What You Need to Know About Tailwind CSS

The internet is filled with so many UI libraries already. There are:

• Material UI
• React bootstrap
• Prime React
• Shards

...and many more. Now, when there are already so many UI libraries what does tailwind do to make it stand apart from the gen pop.

What is Tailwind CSS?

As per the official website,

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.

To put it simply,

Tailwind is not a UI library but a CSS framework.It is NOT opinionated.It does not govern how a component should look, but gives us the power to create a component using the utility classes provided.

Lets give this a spin, shall we.

Step 1

Starting from my React-Typescript-Parcel2 template so that we have a new React project will all the bells and whistles (More details about this here)

Step 2

Adding tailwind to the project

yarn add tailwindcss

Tailwind uses PostCSS to compile to plain CSS. Create a new file called .postcssrc file to the project’s root folder.

{
  "modules": true,
  plugins: {
    autoprefixer: true,
    tailwindcss: true
  }
}

Make sure to add this to .eslintignore to disable JSlinting for that file.

Step 3

Create an index.css file with below code in the src folder and add the same as a link to the index.html file.

@tailwind base;
@tailwind components;
@tailwind utilities;

Now, you must be seeing red squiggles indicating an error in the CSS file,
but that due to the fact that stylelint doesn’t have any idea what @tailwind means.

Step 4

Update the .stylelintrc file to enable support for @tailwind

{
  "extends": "stylelint-config-standard",
  "rules": {
    "at-rule-no-unknown": [ true, {
      "ignoreAtRules": [
        "extends",
        "tailwind"
      ]
    }]
  }
}

Step 5

Start the local server by running the command yarn dev

We see that we have the above warnings, but the important thing to note is that there are no errors. Opening, http://localhost:1234 in the browser we see that tailwind is actually loaded and we can see the page like below.

Step 6

Tailwind is made up of multiple utility classes which allows us to quickly
change the UI of the element. For example, if we need to make that Hello
World text above have a padding, red color and bold, we would have to
add the following classes to it.

p-4
text-red-300
font-bold

Adding these classes in src/components/App/index.tsx

<div className="p-4 text-red-300 font-bold">Hello World!</div>

As seen above, the page hot updates to show the changes.

I found this neat, tailwind cheatsheet where you can quickly search for any tailwind utility class and use in your project.

Step 7 (Advanced)

Remember the warning we had earlier, lets get rid of them:

1. Configuring tailwind to add future proofing.

Create a tailwind.config.js file by running the below command

npx tailwindcss init

Now, inside the future object all the below properties:

future: {
   removeDeprecatedGapUtilities: true,
   purgeLayersByDefault: true,
} 

More details on this here

2. Purging unused CSS

Update the tailwind.config.js file with the purge object as below

purge: {
  enabled: false,
  content: ['./src/**/*.html', './src/**/*.jsx', './src/**/*.tsx'],
},

This allows us to remove all the unused CSS which we haven’t used in any of our html or tsx files. So, this was supposed to work automatically by
providing the content array directly to the purge key. Tailwind is smart enough not to purge in case of a development build and enable purging
automatically in case of a production build. But, because a parcel 2 bug, it doesn’t set the NODE_ENV properly and this wasn’t allowing the purge to work as expected. For now, until the issue is resolved, you can manually enable/disable purging using the enable key.

After making these changes, the warning are removed and I was able to run TailwindCSS smoothly.

At this point in time, I had a few questions:

1. As someone who is well versed with CSS/SCSS, should I even think about looking into tailwind?

I think Tailwind helps if you are working as a big team where you wouldn’t want your fellow team members or even your designers to randomly add new colors, padding/margin sizes, font sizes etc. Its definitely a good tool to have under your belt, but its not a replacement for learning CSS.

2. What are the benefits of Tailwind over CSS?

Have you even faced a situation where your project has grown out of bounds and you dread changing a value in CSS in fear of it breaking something which you aren’t aware of? Well this problem is solved in tailwind, since the styling of the element/component is done as part of the HTML. It vastly reduces your CSS code and therefore, improves maintainability.

3. This will clutter my HTML file and make it very difficult to read.

Well, this is right. Having all these classes in the HTML file does make it very hard to read. But, tailwind philosophy is to keep your UI as part of the HTML and not add more CSS files to keep it easily maintainable. If you find yourself, using the same classes together again and again, then you should look at making it a component and extracting the CSS into that component. https://tailwindcss.com/docs/extracting-components

4. How do I make sure my CSS file sizes are in check?

Tailwind internally uses PurgeCSS. This allows use to choose only the CSS used in the production build. This drastically reduces the CSS from development to production build since mostly, we use only about 15–20% of all the utility classes provided by tailwind. https://tailwindcss.com/docs/controlling-file-size

Conclusion

Personally, I think Tailwind has lot of good things going for it with very few
drawbacks. I will trying using it my personal projects and give it a
nice try.

Benefits

Not having to think about new class names and having a predefined set of utilities is a great help.Tailwind has responsive classes which helps by allowing me to write the breakpoint logic within the HTML and not creating new media queries.Did I mention, better maintainability.

Drawbacks

Have to learn the utility classes. (This is one time though, once you know how to use them, it will be second nature)Increased HTML code.

I’ve made all the above changes available in my Git project which can be accessed in the link below.

A sample project for learning tailwind CSS. Contribute to tushar2289/learning-tailwindcss development by creating an…github.com

I would love to hear your experience with Tailwind and how it helped (or
didn’t help) you. If you do like the project, please comment here or
star the project. It helps me to continue being motivated to bring such
articles and projects. Thanks. 😸 😄

Also published at https://medium.com/@tushar2289/whats-all-the-fuss-about-tailwind-css-e1d1a1af3a90