React + Tailwind

Introduction

Tailwind has proven itself to be quite the handy CSS framework. Similar to Bootstrap, except more flexibility and customization. There are other options out there when it comes to choosing a framework in React, but Tailwind just makes sense to me. So today I'd like to share a very easy way to get it set up in React!

Installing Tailwind

Step 1: Dependency

The first thing you want to do (assuming you have Node.js), is to npm install tailwindcss. This will save it as a dependency to your project.

Step 2: tailwind.css

Create a tailwind.css file under your src/ file. Next, include these contents inside:

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

Step 3: Scripts

Next, we need to enable tailwind to compile the CSS together in a new file when our application runs. To do this, we need to run some prebuild scripts. Head into your package.json and update the script with this:

"scripts": {
    "build:tailwind": "tailwindcss build src/tailwind.css -o src/tailwind.output.css",
    "prestart": "npm run build:tailwind",
    "prebuild": "npm run build:tailwind",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

This will ultimately create a new tailwind.output.css file when we run our application.

Step 4: Making it accessible

Now we just need to make tailwind.output.css accessible to our entire application. Head over to index.js and place this line anywhere at the top of the file:

import './tailwind.output.css';

And it's that easy! You're all set to use Tailwind in your React application. Just fire it up with npm start!

Conclusion

As someone who isn't quite an expert designer, I find that Tailwind works well even in more advanced applications/libraries. Design is its own beast, and it is easy to get lost in crafting UI alone before getting into the nitty gritty logic of your app. It's better to streamline the design and make it all work before making it pretty.

I hope you guys enjoyed this quick setup tutorial!
Happy Tuesday! 🎉

Comments

[Andrés Ruda]

Can i ask u why is it better than Bootstrap?

[JoelBonetR 🥇]

Bootstrap is the remains of a past era. With CSS Flex and Grid there's no reason for adding the entire or part of boostrap on a new app . I also can't find the point for tailwind for the same reason, you can just use Sass components and import it properly to style your SPA and ensure performance while maintaining good scalability.

[Andrés Ruda]

I see, thanks!

[Yogini Bende]

Just few days ago I started using Tailwind on one of my side projects. I must say, it gives you a lot of flexibility in terms of defining your own values which other UI libraries like Bootstrap cannot. But only concern which I had was, I felt little like writing inline css. Maybe that is too early opinion, as its been only few days I have started using it. But still, its a good refresher over bootstrap!!

Do share more of your experiences working with it!

[Astrit]

This was a nice title tutorial, thanks ✌️