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! 🎉