First Attempt with Tailwind CSS

"With this thing, I might not need to introduce a CSS preprocessor language, after all, I might not write CSS myself." - I said it myself

Atomic CSS#

Before knowing Tailwind CSS, you need to know a concept called Atomic CSS, which can be explained very simply as each CSS class having a unique CSS rule.

There are some benefits to writing CSS in this way:

There will be no style conflicts because each class is unique and there are no duplicate class names.
When moving HTML elements, there will be no loss of styles.
When removing new features, their styles will also be removed.

/* Atomic CSS */
.bw-2x {
  border-width: 2px;
}
.bss {
  border-style: solid;
}
.sans {
  font-style: sans-serif;
}
.p-1x {
  padding: 10px;
}

Before using this writing style, we need to define some commonly used class names, such as .bw-2x, .bss, .sans, .p-1x, and then we can start development. If this set of styles is written by someone else, we have to learn this set of styles and learn the conventions of their class names, which will increase our learning cost. Even if the styles we need are not included in this set of styles, we will have to write them ourselves.

Tailwind CSS#

~~And God said, "Let there be styles," and there was Tailwind CSS.~~
And God said, "Let there be light," and there was light.

Tailwind CSS provides some common naming conventions. With a configuration file, you can generate a set of custom utility CSS for your website. It is a complete design system that provides out-of-the-box functionality to meet 80% of business scenarios, while also supporting good extension mechanisms to meet the other 20% of business scenarios.

Custom Configuration#

Tailwind CSS provides some configuration options that can be set in tailwind.config.js. When a project already has a clear UI design specification (such as font size, theme color, button size, etc.), we can use the configuration file to generate a set of CSS class names that comply with the specification.

// Example configuration from the official Tailwind CSS website
module.exports = {
  content: ['./src/**/*.{html,js}'],
  theme: {
    colors: {
      'blue': '##1fb6ff',
      'purple': '##7e5bef',
      'pink': '##ff49db',
      'orange': '##ff7849',
      'green': '##13ce66',
      'yellow': '##ffc82c',
      'gray-dark': '##273444',
      'gray': '##8492a6',
      'gray-light': '##d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '8xl': '96rem',
        '9xl': '128rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  },
}

Support for Arbitrary Values#

Tailwind CSS provides a set of class names corresponding to styles. We can use w-1/2 to set the width to 50%, or w-1/3 to set the width to 33.3333%. However, there are always styles that the framework does not provide.

Tailwind CSS also provides a rule for arbitrary values. If we need to set the width to 50px, we can use the class name w-[50px] to achieve this. This approach is also applicable to other CSS properties with arbitrary values.

Responsive Design#

Every utility class in Tailwind can be conditionally applied to different breakpoints (similar to Bootstrap), making it easy to build complex responsive interfaces without leaving HTML. By default, Tailwind generates the following breakpoints:

sm: 640px, @media (min-width: 640px) { ... }
md: 768px, @media (min-width: 768px) { ... }
lg: 1024px, @media (min-width: 1024px) { ... }
xl: 1280px, @media (min-width: 1280px) { ... }
2xl: 1536px, @media (min-width: 1536px) { ... }

@apply Extraction/Reuse#

Due to the need for responsiveness, a class name needs to be written in multiple ways to adapt to different sizes. As a result, there may be dozens of class names in a single tag, which can affect the readability of the code and make it difficult to maintain and extend in the future. Tailwind CSS provides the @apply directive to inline existing class names into your own custom CSS.

.my-class {
  @apply h-48 w-full text-lg font-bold text-gray-900;
}

Will the File be Large?#

Yes! Because it needs to encapsulate all CSS properties, the CSS file can be huge. Therefore, Tailwind CSS uses PurgeCSS during the build process to find all unused class names and ensure that they are not bundled together. So there is no need to worry about the file size during the build process.

Drawbacks#

Since Tailwind CSS is based on class names, it requires a certain understanding of class names when using it, otherwise unnecessary styles may occur.
There will be a large number of class names in the tags, which can make them look ugly and affect the reading experience. It can also be inconvenient for later maintenance and modifications.
It needs to be used in conjunction with a UI specification; otherwise, it is not easy to maintain when multiple people are working on the project.

Practical Use#

HTML/CSS Implementation#

<div class="chat-notification">
  <div class="chat-notification-logo-wrapper">
    <img
      class="chat-notification-logo"
      src="/img/logo.svg"
      alt="ChitChat Logo"
    />
  </div>
  <div class="chat-notification-content">
    <h4 class="chat-notification-title">ChitChat</h4>
    <p class="chat-notification-message">You have a new message!</p>
  </div>
</div>

<style>
  .chat-notification {
    display: flex;
    max-width: 24rem;
    margin: 0 auto;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background-color: ##fff;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  }
  .chat-notification-logo-wrapper {
    flex-shrink: 0;
  }
  .chat-notification-logo {
    height: 3rem;
    width: 3rem;
  }
  .chat-notification-content {
    margin-left: 1.5rem;
    padding-top: 0.25rem;
  }
  .chat-notification-title {
    color: ##1a202c;
    font-size: 1.25rem;
    line-height: 1.25;
  }
  .chat-notification-message {
    color: ##718096;
    font-size: 1rem;
    line-height: 1.5;
  }
</style>

Tailwind CSS Implementation#

Looks much simpler 😋

<div class="max-w-sm mx-auto flex p-6 bg-white rounded-lg shadow-xl">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo" />
  </div>
  <div class="ml-6 pt-1">
    <h4 class="text-xl text-gray-900 leading-tight">ChitChat</h4>
    <p class="text-base text-gray-600 leading-normal">
      You have a new message!
    </p>
  </div>
</div>

Conclusion#

I personally feel that atomic CSS is a trend worth paying attention to. Currently, large companies like Twitter and Meta are using it.

If a team designs based on a set of design specifications, using Tailwind CSS can be very comfortable. I also find it very enjoyable to write layouts with it, as I don't need to come up with meaningless names for classes anymore. 😆

These are just my personal thoughts based on my own usage. If you're interested, I recommend trying it out for yourself. ✍️

I also recommend checking out Unocss by antfu, which is a highly performant and flexible on-demand atomic CSS engine.

Lastly, I hope everyone fully understands CSS. 💡