What I researched to understand Tailwind CSS beyond just a little research

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 helpful when you want to get an overview of what kind of frameworks are available when selecting a CSS framework.

What is Tailwind?

Tailwind is a CSS framework.
When you think of a CSS framework, you have the image of a bunch of convenient components that can be used immediately, but Tailwind is a CSS framework with a slightly different concept and a Utility-First approach.

What is Utility-First? I think it will be a collection of simple and easy-to-use functions for creating complex components.
It feels like a moderately organized version of CSS that has become too complex.

Rather than building a site by combining finished components like Bootstrap, the atmosphere is more like setting a border with rounded corners for elements, or setting a class to round the outline of an image to make it look like an icon. It gives an image of building up a layout by accumulating settings.
It's a framework that is more parts-oriented than Bootstrap, so I think it's perfect if Bootstrap has too many functions and the layouts are all the same, but you don't want to write CSS from scratch.

I think it's easy to use, as font size and color information are all defined at an appropriate level of granularity.

 

Features of Tailwind

Tailwind CSS , Tailwind has a very weak concept of components, and you can code as if you were writing CSS from scratch. I'm going.

Class specifications tend to become redundant because coding is basically done using parts for complex designs. This doesn't seem like a very good point.
However, it also makes it easier to understand what style is being applied by looking at the class.

As CSS becomes more sophisticated, the amount of description increases. Properties that have become too complex.
It seems like these things have been rearranged in just the right way.

Of course, you can use it on responsive sites, and there's no need to say that 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 degree of understanding of the essentials of CSS, so I guess the target audience is intermediate CSS users or above. That's about it.

Perhaps because it has a large number of small parts, the uncompressed file size of the version (1.9.6) at the time of writing is quite large, which is 2784.7KB.
Even if you minify it, it's 1967.4KB, which is a level you don't want to use.
However, there is a solution to this, and you can delete all unnecessary style definitions and rebuild Tailwind with only the necessary ones, so the compressed size will probably be around 10KB. That's what the official documentation says.
Although it is like a magic writing method, please be careful as there are various writing methods that 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.
It is the same as the official document, but the command is as follows.

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

 

Create an appropriate CSS file in an appropriate 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

 

I found out that I neglected to update the version, but the basic build flow is as above.

This is fine if you want to use it in its raw state, but if you want to minify or compress it with gzip for production use, you need to incorporate it into a build such as webpack.

When I lightly minified it using webpack, I was able to reduce it to 2.15MB.

This size even if I minify it. I'm afraid.
As expected, I can't release it as is, so I'm going to use PurgeCSS to remove unused styles to further reduce the size.

I prepared a build environment for verification purposes so it was all unused, but in the end I had CSS full of comments and it was 7.5KB.
If you minify further, that comment will disappear and it will become 668B.
The file size after passing through PurgeCSS varies depending on how much it is used within the site, but it is easy to manage because you can build from purge to minify with webpack all at once, and it is easy to install. My impression is that it is easy to use because it is not expensive.
In fact, if the size changes so much, there seems to be no option not to use it.

 

summary

This time I introduced a CSS framework called Tailwind.
I don't really recommend it if you want to reduce the amount of man-hours by using components prepared with a framework that is a little different from other CSS frameworks, but if you want to repeatedly fine-tune and brush up, I would like to recommend it. I think so.

Since it seems to be used to create a layout by combining small parts, the file size of the small parts was quite large.
Based on the verification results, I think it's a good idea to use PurgeCSS as a set, but if the size can be reduced to this extent, it might be possible to consider using it in conjunction with other CSS frameworks.

Although it's not really related to the main story, PurgeCSS can be used with CSS frameworks other than Tailwind, so it seems like you can get two delicious experiences 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.