Tailwind is a massive collection of small CSS utility classes that you can use to build good-looking websites quickly and consistently. But, it becomes arduous when it comes to naming your CSS classes in a sane way. Bootstrap and material UI addresses this challenge by creating styles for high-level components like buttons, dropdowns, and forms.
Tailwind takes a more functional approach by providing you with utility classes that can be composed to build components. For example, instead of using the card class as you might in Bootstrap, you combine utility classes like flex and shadow.
Now talking about PostCSS, it’s a tool for transforming styles with JavaScript plugins. When you build a website, the CSS code you write is rarely the code you want to ship to the browser. The developer wants to write the code with modern features that maximizes productivity, but end users wish for fast, minified code that supports legacy browsers.
PostCSS is a build tool that can take a CSS file and convert it to an abstract syntax tree. It provides an API where plugins are written in JavaScript that can produce different outputs as per your requirements. For example, you will never have to worry about writing vendor prefixes on your styles ever again while using the autoprefixer plugin.
Now, let’s find out how you can install Tailwind with PostCSS easily.
Installing Tailwind with PostCSS
You can integrate Tailwind with a lot of frameworks like Nextjs, Vuejs, Laravel, Create React App, and many more. But, in this blog, I will use a plain HTML file to show how simple the process is.
We can start with an empty project, and install Tailwind and PostCSS. Since Tailwind and PostCSS packages are available on npm, the first thing we need to do is to create a package.json file.
Run npm init –y to create a basic empty package.json file.
Let’s use npm install tailwindcss postcss-cli to install Tailwind and PostCSS packages.
Finally, Tailwind doesn’t include any vendor prefixes -Webkit or –MS in any of the CSS it generates. Let’s also install autoprefixer which is a PostCSS plugin for automatically adding vendor prefixes to your CSS using the command.
npm install autoprefixer
Now that you have installed the dependencies, let’s configure Tailwind and PostCSS. The first thing that you should do is to run the command.
npx tailwind init -p.
This is going to create an empty tailwind.config.js and postcss.config.js files in your project root.
As the next step, let’s create a directory ‘src’ where you will keep all of your source files. You will also need another directory ‘public’ where the generated files will be stored. Create a style.css file inside the ‘src’ directory where all the tailwind CSS will be imported.
Next in your style.css, add tailwind’s basic styles using the @tailwind directive.
@tailwind base;
@tailwind components;
@tailwind utilities;
Using this code, Tailwind is going to look through the CSS for @tailwind directives and replace it with Tailwind’s generated styles.
To compile it, you need to add a build script in your package.json file:
Build the CSS using the command.
npm run build.
You should be able to see a style.css file generated with the Tailwind CSS in the public directory.
Your CSS is ready. Let’s create an index.html file with the following content in the public folder:
You also need to specify the HTML files by adding the path of your public directory in your tailwind.config.js. Open tailwind.config.js and add the following path:
To run this code you also need a server. You can install the live server plugin in VS code to check it. After running it you should be able to see the below page:
Notice the style.css is optimized and only takes 10kb which is small. As you use more Tailwind classes it will go through the .html/.js files and only generate the CSS that you have used. Now, that the Tailwind is installed, let’s discuss some of its top advantages.
Advantages of using Tailwind
Below are the top advantages of Tailwind that you must know before you decide to use it.
- Faster development
Tailwind helps you develop faster because you don’t have to think about the class names that make sense and add styling as per the design. - Naming
When you work on large projects with a team of more than 20-25 developers, naming becomes very important. With Tailwind, you can move from project to project and not have the difficulty of not knowing what class names should be used. Naming classes is a tough task considering it should make sense to other developers as well. - Colocation
You can infer your style just by reading markup. You can easily look at an element and see its style instead of looking at that element’s class name and finding the CSS to which the class name belongs. - CSS stops growing with the project
In traditional CSS, even using material UI or styled-components, as you add new components, you also need to add new styles which eventually makes the overall website too heavy. Tailwind has a built-in purging which is smart enough to find the classes that you have used. It will build the custom CSS for you so that only smaller packets are shipped to the browser. - Safe refactoring
As the classes are set at the element level, Tailwind solves the problem of updating or refactoring code. Refactoring global CSS is a pretty tough task as it eventually leads to creating new classes for everything. You won’t be able to do more clean-ups in time because you don’t know what element is using which CSS. When you use CSS, you can be confident that refactoring a webpage will not break anything else.
Disadvantages of using Tailwind
After discussing the top advantages of Tailwind, I would like to highlight some advantages as well for you to make a sound decision.
- Markup gets hard to read
Components that require lots of styling will have a long list of classes, which make the markup look ugly that can get extremely hard to read. - Lack of web components
Tailwind doesn’t provide components by default like Bootstrap or Material UI, so you have to create the components from scratch, which is time-consuming. - Learning curve
While working with CSS, web developers have only one task- assign a proper class name to elements and add CSS to them. But if you are new to Tailwind, you will have to go through docs for every little styling to know what class name needs to be applied for your desired output.
Conclusion
With its utility-first classes, default mobile-first approach, and optimisation capabilities, Tailwind is becoming one of the most popular CSS frameworks. And with Tailwind, you can create mobile-first responsive web applications without any need to write custom CSS. I would recommend that you must give it a try and see it by yourself. Do share your experience with us in the comments section.
