I wanted to understand Tailwind CSS more than just a little bit, so I looked into it

Hello.
I'm Mandai, the Wild team member in charge of development.

This article will introduce the Tailwind CSS framework.
I hope it will be helpful for those who want to know the basics of what kind of framework it is when choosing a CSS framework.

What is Tailwind?

Tailwind is a CSS framework.
While CSS frameworks are often thought of as a collection of readily usable components, Tailwind has a slightly different concept; it's a CSS framework that prioritizes utility-first principles.

What is Utility-First? It's essentially a collection of simple, easy-to-use features for creating complex components.
It's like a way to simplify overly complex CSS.

The overall feel is less like building a site by combining pre-made components like in Bootstrap, and more like building a layout by layering settings such as setting rounded borders on elements or applying classes to round the edges of images to make them look like icons. It
's a framework that's more component-oriented than Bootstrap, so if you find Bootstrap's features too comprehensive and all the layouts look the same, but you don't want to write CSS from scratch, then this might be perfect for you.

Font size and color information are also defined at an appropriate level of granularity, making it easy to use

 

Tailwind Features

Tailwind CSS, Tailwind has a very weak concept of components, and you code with a feeling very similar to writing CSS from scratch.

Since the coding process primarily involves using components to implement complex designs, class specifications tend to become redundant. This might not seem like a good point.
However, on the other hand, it makes it easier to understand what styles are being applied by looking at the classes.

As CSS has become more feature-rich, the amount of code has grown, and the properties have become too complex. This new
approach seems to have reorganized these elements to strike a good balance.

It can certainly be used on responsive websites, and it's not like you can't create designs that aren't available as components.
However, I get the impression that it requires a certain level of understanding of the fundamentals of CSS, so I'd say the target audience is probably intermediate or advanced CSS users.

Perhaps because it contains a large number of small components, the uncompressed file size of Tailwind in version 1.9.6 at the time of writing is a rather large 2784.7KB.
Even after minification, it's still 1967.4KB, which is quite unappealing.
However, there is a solution: by deleting all unnecessary style definitions and rebuilding Tailwind with only the essentials, the compressed size should be around 10KB, according to the official documentation. It
sounds like magic, but be careful, as there are several things you need to know to use this feature correctly.

 

How to use Tailwind

To get started with Tailwind, install it using npm or yarn.
The command is the same as in the official documentation:

# npm $ npm install tailwindcss # yarn $ yarn add tailwindcss

 

Create a suitable CSS file in a suitable location and try building it

# Create CSS with basic components $ echo -e "@tailwind base;\n@tailwind components;\n@tailwind utilities;" > hogehoge.css # Build $ npx tailwindcss build hogehoge.css -o output.css tailwindcss 1.9.6 ? Building: style.css Browserslist: caniuse-lite is outdated. Please run next command `yarn upgrade` ✅ Finished in 4.99 s ? Size: 2.66MB ? Saved to output.css

 

It seems that I have neglected to update the version, but that is the basic build process

This is fine if you're using it in its raw state, but if you want to minify or gzip it for production use, you'll need to incorporate it into a build like webpack

I lightly minified it with webpack and was able to reduce the size to 2.15MB

Even after minifying, it's still this big. Incredible.
I obviously can't release it like this, so I'll try using PurgeCSS to remove unused styles to further reduce the size.

I set up the build environment for testing purposes, so everything was unused at first, but ultimately, a CSS file full of comments was created, resulting in a size of 7.5KB.
After further minification, the comments disappeared, and the size dropped to 668B.
The file size after running PurgeCSS varies depending on how much it's used on the site, but being able to build everything from purging to minifying in one go with webpack is easy to manage, and the difficulty of implementation isn't high, so it's easy to use.
In fact, with such a drastic size change, it seems there's no reason not to use it.

 

summary

This time, I introduced the CSS framework called Tailwind. It's
a framework that's a little different from other CSS frameworks, and it's not really recommended if you want to reduce the amount of work by using pre-built components, but I would recommend it if you want to repeatedly fine-tune and refine your work.

It seems the intended use is to create layouts by combining small parts, so the file size of the combined small parts was quite large.
Based on the results of our testing, it seems best to understand that PurgeCSS should be used in conjunction with other CSS frameworks, but if it can reduce the size this much, it might be worth considering using it in combination with other CSS frameworks.

Although it's not really relevant to the main article, PurgeCSS can be used with CSS frameworks other than Tailwind, so it looks like you can get two benefits with one

lastly

I have launched "SEKARAKU Lab," a service site for the system development company I belong to.
Beyond offers a one-stop service for everything from server design and construction to operation, so please feel free to contact us if you have any problems with server-side development.
SEKARAKU Lab:[https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

That's all