DEV Community

Cover image for Set Up Tailwind In React - The fastest way! πŸš€
Savio Martin
Savio Martin

Posted on

Set Up Tailwind In React - The fastest way! πŸš€

Hello Folks πŸ‘‹

This is Savio here. I'm young dev with an intention to enhance as a successful web developer. I love building web apps with React. I have proved my superiority in frontend technologies.

Today, I'll show you the easiest and the fastest way to set up Tailwind CSS in your React App. So, be with me! Lets code something amazing!


Why Tailwind CSS?

tailwind.png

Tailwind is designed to be component friendly. It is so much easier to separate a site's elements into smaller components and not pollute the codebase with objects or extraneous CSS classes. Furthermore, every class is inlined in the component, making it much easier to read and understand.

Create Your React Project

First of all, lets create a react project. Just use the command below to create a react app βš›οΈ.

npx create-react-app your_react_project_name
Enter fullscreen mode Exit fullscreen mode

Setup Tailwind CSS

Now, lets check how we can setup tailwind css on the react app, we just created.

Install NPM Packages

We need some NPM packages to setup tailwind. These are the npm packages-

  • PostCSS: A tool for transforming CSS with JavaScript
  • Autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules using values from Can I Use.
  • Tailwindcss: A utility-first CSS framework packed with classes

So, lets install all of them, paste the command in the terminal ⬇️.

npm install tailwindcss postcss autoprefixer postcss-cli -D
Enter fullscreen mode Exit fullscreen mode

Creating tailwind.css

After installing NPM packages, let's create a folder named styles inside src/ folder. Create a new tailwind.css and output.css. Here is the folder structure of src ⬇️

src/
β”œβ”€β”€ styles/
         β”œβ”€β”€ output.css
         └── tailwind.css
β”œβ”€β”€ app.js
└── index.js
Enter fullscreen mode Exit fullscreen mode

So, paste the following contents into tailwind.css.

@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode

Leave the output.css empty. It will be taken care by tailwindcss.

Creating Config Files

Now, lets create the config files. First, lets generate the default configuration file on tailwind css. Paste the code ⬇️ and you'll be good to go!

npx tailwindcss init --full
Enter fullscreen mode Exit fullscreen mode

This command generates a tailwind.config.js with all the default configuration. Now, we have 2 more files to generate.

Create tailwindcss-config.js and postcss.config.js config file by using the following command.

npx tailwindcss init tailwindcss-config.js -p
Enter fullscreen mode Exit fullscreen mode

Now, lets not touch the files, we can jump onto the last part!

Edit package.json

Here comes the last part, it is so simple, we just have to add a new command watch:css to the package.json. I have made it in the way, every time you start the app, it get automatically called. So, here goes the scripts part of package.json.

  "scripts": {
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run watch:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "watch:css": "postcss src/styles/tailwind.css -o src/styles/output.css"
  },
Enter fullscreen mode Exit fullscreen mode

Now, if we just run npm start we can see our output.css gets filled with the styles of tailwindcss. That means, Everything gone absolutely correct. πŸŽ‰

Testing Tailwind CSS

Now, it is time to test. To, use the styles of tailwind, we have to import output.css to our app.js.

import './styles/output.css'
Enter fullscreen mode Exit fullscreen mode

Yeah, that's it. We're good to go! Lets add some tailwind styles.

Feel free to use the following code to test your app.

import "./styles/output.css";

function App() {
  return (
    <div className="bg-gray-900 p-20 h-screen flex justify-center items-start flex-col">
      <h1 className="text-5xl text-white">Hello Tailwind πŸ‘‹</h1>
      <p className="text-gray-400 mt-5 text-lg">
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit
        consequuntur odio aut nobis ab quis? Reiciendis doloremque ut quo fugiat
        eveniet tempora, atque alias earum ullam inventore itaque sapiente iste?
      </p>
      <button class="p-4 bg-green-600 rounded-lg font-bold text-white mt-5 hover:bg-gray-600">
        Hello Friends πŸš€
      </button>
    </div>
  );
}

export default App;
Enter fullscreen mode Exit fullscreen mode

So, lets do npm start and check if it is working!

screenshot (2).png

Hurray πŸŽ‰ That's it we could see our good-looking app in the browser. We just made it with a little line of code. That's all! I hope it was fast! πŸš€

I have deployed it! So, have a demo πŸš€ create-react-app-tailwind.vercel.app

I have created a starter repo on github - saviomartin/create-react-app-tailwind. It would be a good idea if you really wish to avoid these stuffs, just clone the repo and start app. You are good to go!

Star the repository! 🌟 saviomartin/create-react-app-tailwind


πŸ‘€ Wrapping Up

Yeah, that's a wrap. Hope you enjoyed the article. Do not hesitate to share your feedback. I am on Twitter @saviomartin7. Give a follow!

Follow me on Github @saviomartin, Don't miss my amazing projects! πŸ’―

I hope you learned to use Unsplash API and created an image search app, now go start building amazing apps. Feedbacks are greatly appreciated! πŸ™Œ

Have an amazing day!

🌎 Lets connect

πŸ™Œ Support

My projects are fueled by coffees β˜•, get one for me!

Top comments (13)

Collapse
 
myrlandnu profile image
JΓΈrn AndrΓ© Myrland

Well written post πŸ‘ This is a "no-hassle" way of setting up tailwind with CRA πŸ‘

However, I feel I have to point out one major drawback to this approach; the output css includes ALL the styles of tailwind 😒 Ideally, you would like postcss to purge all unused utility-classes, so you end up with a really slim CSS file.

A way around this is to setup CRA with craco, but this comes with a bit more hassle 😐

I would love to see a JIT implementation working with CRA, but as far as I understand, this will not be possible until CRA internally updates the PostCSS dependency πŸ€”

Collapse
 
akov profile image
Ako

what if we upgrade postcss manually?

Collapse
 
myrlandnu profile image
JΓΈrn AndrΓ© Myrland

I don't think it is possible, due to a constraint in CRA (even with craco). If this however has changed, please let me know!

Thread Thread
 
akov profile image
Ako

yeah, CRA does not let us to do that, but after some hours I found (created) a way to use jit feature alongside react.and it feels so good using it.

Thread Thread
 
cindyeme profile image
Emerenini Cynthia Ngozi

Hello.

How did you achieve that?

Thread Thread
 
akov profile image
Ako

Actually I wrote a blog post about it. Here it is:
dev.to/akov/how-to-set-up-tailwind...

Thread Thread
 
cindyeme profile image
Emerenini Cynthia Ngozi

Thanks Ako. Let me check it out.

Collapse
 
ngmisl profile image
ngmisl

doesn't work with current settings... might need an update

warn - The purge/content options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
warn - tailwindcss.com/docs/upgrade-guide...

warn - The content option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - tailwindcss.com/docs/content-confi...
/bin/sh: 1: react-scripts: not found

Collapse
 
imervinc profile image
πŸ‘ΊMervyn

You should have included JIT, since it is where TailwindCSS is heading anyways. And the new features are freaking awesome!

Collapse
 
saviomartin profile image
Savio Martin

Yeah, Setting up tailwind jit is coming on the next blog!

Collapse
 
chaygo profile image
Aygozel Chariyeva

I have got error like this:
warn - The content option in your Tailwind CSS configuration is missing or empty.
warn - Configure your content sources or your generated CSS will be missing styles.
warn - tailwindcss.com/docs/content-confi...

and my doesnt work :(

Collapse
 
divyaxavier profile image
divyaxavier

This is really amazing! It is working! Thanks, it is a life saver!

Collapse
 
tarekhassan410 profile image
Tarek Hassan

Worked, thank you :)