TailwindCSS is a CSS framework designed to write styles quickly.

When I first saw the introduction on the official website, I thought, isn’t it just a style sheet that contains many styles? Like bootstrap before, it comes with many styles. After that, you can just use the style sheet that comes with it.

But TailwindCSS is more than that. TailwindCSS not only has a lot of built-in styles, but also supports configuration through configuration files, overwriting the built-in styles, or extending their own styles, usually custom colors.

The most basic way to use TailwindCSS is to add a class name to it, just like the bootstarp library used before. TailwindCSS class names are made up of attribute abbreviation + attribute degree + [attribute value]. For example, by default, TailwindCSS divides values into several degrees, each of which is 0.25rem. For example, MT-2 stands for margin-top: 0.5rem. Opacity properties also have property values, such as bG-animation-30, which indicates –tw-bg-opacity: 0.3; // e.g. background-color: rgba(0, 0, 0, var(–tw-bg-opacity)); . (Variables are used for colors, transformations, and so on.) Literals such as MD SM are also provided for responsive layout.

That’s all basic stuff, right? And I can’t even remember it. No problem, there is Tailwind CSS IntelliSense, write class name very fast. With practice, I’m sure I can write faster than Emmet.

By configuring TailwindCSS, you can customize many properties, such as colors. For example, bG-background-regular regluar is a custom color that can be used in all color styles once defined. Such as text – regular border – regular. After TailwindCSS 2.1, JIT enabled, you can also generate styles for raw attributes. For example, h-[40px] takes 40px as a value and is generated in real time.

So, that’s all. Wouldn’t it be a mess to have so many classes on one label? This is where the PostCSS + TailwindCSS comes in. TailwindCSS is actually a plugin for PostCSS. PostCSS is familiar, used for various preprocessing of CSS. Configure PostCSS to use some special syntax. For example, use @apply to append TailwindCSS styles to CSS files. Such as:

.test {
  @apply relative w-full h-[40px] bg-background-regular flex items-center justify-between px-4 truncate;
}
Copy the code

Note: You need to install PostCSS Language Server to use postCSS-specific completion. PostCSS is also a format with the extension.css.pcss

Methods like @screen@components are no longer expanded.

@screen desktop { /* @media(max-width: 1024px) */
  .test {
    @applybg-white; }}Copy the code

Of course, PostCSS also supports plug-ins that extend the scSS-like syntax.

Like, none of that worked, right?

Finally, the big move. I believe that many people cut the map, every day is to cut the map.

Open Figma, select a random area, and select Figma to Code, Tailwind 2.