Hello Everyone👋,

Today we are going to take a look at setting up TailwindCSS v2.0 with create react app. TailwindCSS is a popular module for developing responsive websites, and it has been around for a long time now. It has received a huge update recently that includes new features and bug fixes. I am sure you will like this article as I will be showing you how to set up Tailwind with Create React App!

Create a React Project

The first step to getting started is to use the create-react-app tool to generate a new React project. If you don't already have it installed, first open your terminal and run this command to install it globally:

npm install -g create-react-app

Once it's installed, you can run the following command to generate a new react project:

npx create-react-app your_react_project_name

Once you execute this command, create-react-app will take a few minutes to download and install all of the required dependencies. This might seem like a long time, but it's normal! You can go make yourself some tea while that happens.

When the process is complete, cd into the directory using the cd your_react_project_name command, now that we're in our project directory, let's run code . to open the project folder into your code editor(I'm using VS Code) and now open your terminal by pressing ctrl + ` and run npm start to start the development server. This will open up a new browser tab with our app running inside it. Your browser will display something like this:

Setting Up Tailwind CSS

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

Installing npm packages

First, we need to install the following packages: tailwindcss, postcss, autoprefixer and postcss-cli 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

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;

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

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

tailwindcss-config.js file looks something like this.

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

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: {},
  },
}

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"
  }

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