Creating consistent, concise, and effective CSS can be quite challenging. There are so many things to consider like responsiveness, accessibility, and structure. This is exactly why CSS Frameworks exist, to take that burden off of you! Bootstrap, Bulma, SemanticUI and Tailwindcss are some of the most known and used CSS Frameworks.

In this article we'll be talking about Tailwindcss and why you should use it, and how to use it in a CRA (Create React App) project.

What is Tailwindcss ?

Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

Why Tailwindcss ?

• Most CSS frameworks do too much.

  While some css Frameworks come with predesigned components like buttons, cards, toasts ... and while it's a good thing, in big projects where you would have to customize your components and override their style : that's when things gets tricky and time consuming.
  Instead of opinionated predesigned components, Tailwind provides low level utility classes that let you build completely custom designs without ever leaving your HTML.

  

• Responsive to the core.

  No need to write code for media queries, no need to worry much about responsive design, with Tailwindcss responsive variants it's pretty simple, all you have to do is to use the appropriate prefix for each screen before your properties.

  

• Highly customizable

  The best thing about Tailwindcss is how customizable it is, and besides the default styling already provided, you can add your custom stylings and variants.

  

• Purge Unused CSS Classes for a Smaller Download

Setup Tailwindcss with React

1. First we install a few development dependencies using the command :

npm install tailwindcss postcss-cli autoprefixer -D

2. Then we init the tailwind.js in the root of our project :

npx tailwind init tailwind.js --full

This file contains the configuration, such as our colors, themes, media queries, and so on. It’s a useful file that helps with predefined sets of properties which will aid the need to re-brand certain conventions or properties if the need arises.

3. Create a PostCSS configuration file :

touch postcss.config.js

with the following configuration :

4. Next we create our tailwind.css file :

5. Finally we configure our project to build our CSS styles each time we run either npm start.

in package.json we insert this script :

and import our main css file that holds all the generated css in the root of our project (index.js).

Aaaand we're ready to go.