TailwindCSS is a slowly gaining popularity CSS framework that allows you to make changes in the design of websites and applications without leaving HTML markup (both in the corresponding files and in components such as React or Svelte) and without using the tag.</p>
Let’s dwell a bit on how Tailwind is structured from a technical point of view. I’ll note right away that there’s no magic in this framework. It doesn’t make critical changes at a low level and doesn’t convert its specific syntax into standard CSS markup (or rather, it doesn’t exactly do that).
Tailwind is based on all the same classes and selectors, only on a larger scale and with preprepared interaction rules. Yes, any property in Tailwind is a class. This is what it looks like when converted to CSS.
Why do we need TailwindCSS and why exactly?
The creator of Tailwind wrote a huge article on this topic back in 2017. And it’s not just graphomania for marketing purposes, but a serious breakdown of why the current system of semantic classes makes it hard to support CSS code.
Right now, styling websites and apps looks something like this:
You create an HTML document or a conditional React component.
You describe the structure of something in the created file, adding for each element a certain class through which it can be found.
Then you include a CSS file and write styles inside it, relying on selectors (previously specified classes) and using classical CSS syntax.
With Tailwind, you don’t need to create a new file, write something in it in parallel and make up classes. Instead of a semantic class, you can directly write the name of the styles.
TailwindCSS changes the way you work with styles, implement adaptive layout, design code and create your own design systems. It is not a panacea, but thousands of developers have already appreciated Tailwind features in their projects and got a noticeable productivity boost coupled with noticeably reduced number of nervous breakdowns due to CSS markup analysis.