TailwindCSS is a CSS framework designed to quickly write styles.
When I first saw the introduction on the official website, I thought it was just a stylesheet that contains many styles, similar to Bootstrap. It comes with many styles, so you can use them directly after installation.
However, TailwindCSS is not that simple. It not only includes many built-in styles, but also supports configuration through a configuration file to override the built-in styles or extend your own styles, mostly customizing colors.
The most basic way to use TailwindCSS is similar to using CSS libraries like Bootstrap, where you add various class names to your HTML elements. TailwindCSS class names consist of property abbreviations, property degrees, and property values. For example, by default, TailwindCSS divides values into several degrees, with each degree being 0.25rem. For example, mt-2 represents margin-top: 0.5rem. For properties like opacity, there are also property values. For example, bg-opacity-30 represents --tw-bg-opacity: 0.3; // e.g. background-color: rgba(0, 0, 0, var(--tw-bg-opacity));. (Variables are used for colors, transformations, etc.) It also provides some literals, such as md, sm, etc., for responsive layouts.
These are the most basic things, and it seems like it's not that complicated, right? But it's hard to remember. No worries, with Tailwind CSS IntelliSense, you can write class names quickly. With practice, you'll definitely write faster than using Emmet.
By configuring TailwindCSS, you can customize many properties, such as colors. For example, in the image above, bg-background-regular is a custom color. Once defined, it can be used in various color styles, such as text-regular and border-regular. Starting from TailwindCSS 2.1, with JIT enabled, you can also generate raw attribute styles, such as h-[40px], which is generated in real-time.
So, after saying so much, won't it be messy to write so many classes on one element? This is where PostCSS + TailwindCSS comes in. TailwindCSS is actually a plugin for PostCSS. PostCSS is a familiar tool used for various CSS preprocessing tasks. By configuring PostCSS, you can use some special syntax. For example, you can use @apply in a CSS file to apply TailwindCSS styles, like this:
.test {
@apply relative w-full h-[40px] bg-background-regular flex items-center justify-between px-4 truncate;
}
Note: You need to install the PostCSS Language Server to use autocompletion for PostCSS. PostCSS is also a format with file extensions .css and .pcss.
There are also methods like @screen and @components, but I won't go into detail about them.
@screen desktop { /* @media(max-width: 1024px), needs separate configuration */
.test {
@apply bg-white;
}
}
Of course, PostCSS also supports plugins that can extend the syntax similar to SCSS.
It seems like none of the above is useful?
Finally, here's the ultimate move. I believe many designers spend their days slicing images based on design drafts.
Open Figma, select any area, go to the plugins, choose "Figma to Code, Tailwind 2".
¡Voila!