DEV Community

loading...

Setting up Tailwind CSS v2.0 with Create React App

thefierycoder profile image Rishi Purwar ・3 min read

Alt Text
Hello Everyone,
Today I am going to show you how to set up Tailwind CSS v2.0 with create react app.

Create Your React Project

So before starting to set up Tailwind CSS with create react app, first, we need to create a react project using the command below if you already have a project, you don't need to create it again.

npx create-react-app your_react_project_name

Enter fullscreen mode Exit fullscreen mode

Setting Up Tailwind CSS

Now we can start setting up Tailwind CSS in our react project.
If you prefer to watch video tutorial, you can check out it over here .

Installing npm packages

First, we need to install tailwindcss, postcss, autoprefixer and postcss-cli packages as dev dependencies using npm.

PostCSS: PostCSS is a tool for transforming CSS with JS plugins.

Autoprefixer: PostCSS plugin to parse CSS and add vendor prefixes to CSS rules. It is a CSS post-processor. It combs through compiled CSS files to add or remove vendor prefixes like -webkit and -moz after checking the code.
If you want to read more about postcss, check out their documentation.

So, in order to install all the four npm packages, you need to run this command

npm install tailwindcss postcss autoprefixer postcss-cli -D

Enter fullscreen mode Exit fullscreen mode

After installing the npm packages, now, you need to create a new folder inside src folder and name it assets and then inside the newly created assets folder create two files output.css and tailwind.css.
Open your tailwind.css file and paste the following code.

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

Now, If you want to see all the tailwind default configuration, you can run this command to generate a tailwind config file.

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

The above command generates a tailwind.config.js file which contains all the default tailwind configurations. I don't recommend you directly make any changes in this file.

After that create a tailwindcss-config.js and postcss.config.js file by using this command

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

tailwindcss-config.js file looks something like this.

module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Enter fullscreen mode Exit fullscreen mode

In this file, you can extend default tailwind CSS configurations like colors, fonts, and much more.

Now, Open your postcss.config.js file and change the tailwindcss line with this one.

tailwindcss: { config: './tailwindcss-config.js' },

Your complete postcss.config.js file looks like this.

module.exports = {
  plugins: {
    tailwindcss: { config: './tailwindcss-config.js' },
    autoprefixer: {},
  },
}
Enter fullscreen mode Exit fullscreen mode

Now, open your package.json file and replace all the script files with these ones.

  "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/assets/tailwind.css -o src/assets/output.css"
  }
Enter fullscreen mode Exit fullscreen mode

Import output.css file

Now, you need to import the output.css file inside your app.js file like this.

import './assets/output.css'

And run

npm start

CongratulationsπŸŽ‰! You successfully set up Tailwind CSS v2.0 in your react project.

Thanks for reading this blog

If you find the blog helpful, feel free to subscribe to our newsletter so whenever our new post goes live, you'll get the notification first.

Do leave your feedback and suggestions as comments.

Check out my youtube channel

Let's connect on Twitter

Thank You

Discussion (8)

pic
Editor guide
Collapse
mefaba profile image
AW A RE

For those who wants to use React and Tailwind.css. I have been trying to find out solution to this since 5 days. Solution is getting rid of "Create React App". Because CRA limits 3rd party plugin integration and CRA is not crucial for React Development. Well there are way around its problems but it makes whole your codebase ugly and complicated, millions of 3rd party dependencies, disgusting. Instead you can use for example Vite.js, it is an another react project starter, but much cleaner and open to customize configurations and integrating 3rd party plugins.

Collapse
prettyirrelevant profile image
Adewumi Isaac

you can just do "npx tailwindcss init -p" or is there any actual need of the "tailwind.config.js" in the command?

Collapse
thefierycoder profile image
Rishi Purwar Author

No, there is not any need to create this file. It is optional but tailwindcss-config.js is necessary in future if you want to extend default tailwind configuration, you can do this inside this file.
Thanks for reading.

Collapse
prettyirrelevant profile image
Adewumi Isaac

You don't seem to get my point. I meant the "tailwind.config.js" in "npx tailwindcss init tailwind.config.js -p", i feel its redundant because "npx tailwindcss init -p" gives the same result which is creating a "tailwind.config.js" file and "postcss.config.js" file

Overall it's a nice article.

Collapse
golangch profile image
Stefan Wuthrich

Cool article.
If someone wants to use React & TailwindCSS 2 with Webpack 5 and Babel, I created a Boilerplate:

github.com/altafino/react-webpack-...

Collapse
anandnakat profile image
Anand Nakat

Thank you so much for this article! Just what I needed.

Collapse
thefierycoder profile image
Rishi Purwar Author

I'm glad you liked itπŸ™‚

Collapse
andrii profile image
Andrii

Thanks! How to apply Tailwind styles?