"With this thing, I might not need to introduce a CSS preprocessor language, after all, I might not write CSS." - I said it myself
Atomic CSS (原子 CSS)#
Before knowing Tailwind CSS, you need to know a concept called Atomic CSS, which is 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, it ensures that their styles are also 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 naming conventions, which increases our learning cost. And even if the style we need is not included in this set of styles, we have to write it 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 (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 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 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 code readability and make maintenance and expansion difficult. 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 is 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 be applied.
- There will be a large number of class names in the tags, which can appear ugly and affect the reading experience, and it may be inconvenient for later maintenance and modification.
- It needs to be used in conjunction with UI specifications, otherwise it is not easy to maintain in multi-person development.
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#
Personally, I think atomic CSS is a trend worth paying attention to. Currently, big companies like Twitter and Meta are using it.
If a team designs based on a set of design specifications, using Tailwind CSS will be very comfortable. At the same time, I feel that it is very enjoyable to use it to write layouts, as a few classes can solve the problem without the need for meaningless naming. 😆
These are just some of my personal thoughts on using it. If you are interested, I suggest trying it out for yourself. ✍️
I also recommend Unocss by antfu - a highly performant and flexible on-demand atomic CSS engine.
Finally, I hope everyone fully understands CSS. 💡