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

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

In this article, I would like to introduce a CSS framework called Tailwind.
I hope this will be useful when you want to know the overview of what kind of framework it is when selecting a CSS framework.

What is Tailwind?

Tailwind is a CSS framework.
When you think of a CSS framework, you might imagine it as a collection of ready-to-use, useful components, but Tailwind has a slightly different concept: it is a CSS framework that advocates Utility-First.

You may be wondering what Utility-First means, but I think it's a collection of simple and easy-to-use functions for creating complex components.
It's like a moderate summary of overly complex CSS.

The feel is more like building a layout by piling up settings, such as setting rounded borders to elements or setting classes to round the outlines of images to make them look more icon-like, rather than building a site by combining ready-made components like Bootstrap.
Because it's a more modular framework than Bootstrap, it's perfect for those who find Bootstrap too packed with features and layouts all the same, but don't want to write CSS from scratch.

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

 

Tailwind Features

Tailwind CSS , you'll understand that Tailwind has a very weak concept of components, and coding feels almost like writing CSS from scratch.

Since coding is based on using parts that use intricate designs, class specifications tend to be redundant. This may not seem like a good point,
but on the flip side, it makes it easier to understand what styles are being applied by looking at the classes.

As CSS becomes more sophisticated, the amount of code required to be written increases. Properties become too complex.
It's like these issues have been reorganized to strike a good balance.

Of course, it can be used on responsive sites, and it's not like you can't create designs that aren't available in components.
However, I get the impression that there are many parts that require a certain level of understanding of the essentials of CSS, so I think the target audience is probably intermediate or above in CSS.

Perhaps due to the large number of small parts, the uncompressed file size of the version (1.9.6) at the time of writing is a fairly large framework, at 2784.7KB.
Even after minification, the file size is 1967.4KB, which is not enough to make you want to use it.
However, there is a solution to this problem: you can delete all unnecessary style definitions and rebuild Tailwind with only the necessary components, which will reduce the compressed size to around 10KB, according to the official documentation. While
this seems like magic, be aware that there are several things you need to know in order to use this function correctly.

 

How to use Tailwind

To start using Tailwind, install it from npm or yarn.
The command is as follows, which is the same as 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 minification, it's still this size. It's scary.
We can't release it like this, so we'll use PurgeCSS to remove unused styles to further reduce the size.

Since I prepared a build environment for testing purposes, everything was unused, but in the end, I ended up with CSS full of comments, weighing in at 7.5KB.
After further minification, the comments disappeared, bringing the file size down to 668B.
The file size after running PurgeCSS will vary depending on how much is used on the site, but being able to build everything from purging with webpack to minifying in one go is easy to manage, and it's not too difficult to implement, so I think it's easy to use.
In fact, when the size changes this much, it seems like there's no choice but to use it.

 

summary

This time we introduced a CSS framework called Tailwind. It's
a bit different from other CSS frameworks, so I wouldn't recommend it if you're looking to reduce the amount of work you have to do by using components provided by the framework, but I would recommend it if you want to brush up your code by repeatedly making fine adjustments.

It seems that the layout is created by combining small parts, so the file size of the small parts combined was quite large.
Based on the results of the test, it seems best to think of PurgeCSS as something to use as a set, but if the size can be reduced to this extent, it seems like it would be possible to consider using it in conjunction 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 opened the system development service site "SEKARAKU Lab" to which I belong.
Beyond is a one-stop service for everything from server design and construction to operation, so if you have any trouble with server-side development, please feel free to contact us.
SEKARAKU Lab: [https://sekarakulab.beyondjapan.com/](https://sekarakulab.beyondjapan.com/)

That's it.