How to use Tailwind CSS with a React App

Let's set up a Tailwind CSS React App.

It's a straightforward process that requires a few installs and a bit of configuration.

Install Node.js

Install node.js and npm

Visit the Node installer to install Node.js and npm. Choose your system's installer package and complete the install process. 

Check your version of Node.js

Command Line (Windows)

C:\Users\Owner>node -v
v12.13.1

Note, Tailwind CSS requires Node.js 12.13.0 or higher. So check that your version meets this requirement. 

Create React App

Create a new React App project

The create-react-app is a Github repo created by Facebook.

It comes with pre-configured files and packages including a live dev server, auto-compilation of CSS, JS, and React files, and ESLint for error alerts.

Command Line (Windows)

C:\Users\Owner\desktop> npx create-react-app tw-react

To use this project, just run the command npx create-react-app <name>. 

I created a project named tw-react to easily identify it as Tailwind CSS React. 

Wait for the project to be created

Command Line (Windows)

C:\Users\Owner\desktop> npx create-react-app tw-react
...

Created git commit.

Success! Created tw-react
Inside that directory, you can run several commands:

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd tw-react
  npm start

Happy hacking!

Wait for the project to install packages and create the React app.

This will take a couple of minutes.

You'll know it's done when you get the "Success! Created tw-react" message in the command prompt. 

Start the React development server

Command Line (Windows)

C:\Users\Owner\desktop> cd tw-react
C:\Users\Owner\desktop> npm start
...

Now we follow the suggestion in the command line.

1. cd tw-react (Enter into the React project)

2. npm start (Run the React dev server)

View React project in the browser

Browser Window

The React App will automatically open in a new browser window after running npm start. 

Install Tailwind CSS via npm

Install Tailwind CSS and its dependencies

Command Line (Windows)

(ctrl + c)
Terminate batch job (Y/N)? y
C:\Users\Owner\desktop\tw-react> npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9
...

 Ctrl + c  or command + c, depending on your OS, and type y to terminate the batch job if necessary.

The command prompt will then reappear.

Run the command above to install Tailwind CSS and all its dependencies.

This again will take a few seconds to install.

Install CRACO

Command Line (Windows)

C:\Users\Owner\desktop\tw-react> npm install @craco/craco
...

Next, install CRACO or Create React App Configuration Override. It's a configuration layer for the create-react-app that that will allow us to override the PostCSS configuration.

Configure CRACO

tw-react > package.json

{
...
 "scripts": {
    "start": "craco start",
    "build": "craco build",
    "test": "craco test",
    "eject": "react-scripts eject"
  },
...
}

After the install, open the project in a text editor and find the package.json in the root directory. 

Replace "react-scripts start" with "craco start", "react-scripts build" with "craco build", and "react-scripts test" with "craco test".  

Save the updates to the file.

Create a CRACO Configuration file

tw-react > (New File) craco.config.js

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Create a new file called craco.config.js in the root directory, tw-react.

Add tailwindcss and autoprefixer as plugins for PostCSS. 

Create a TailwindCSS Configuration file

Command Line (Windows)

C:\Users\Owner\desktop\tw-react> npx tailwindcss init

   @tailwindcss/postcss7-compat 2.0.4

   ✅ Created Tailwind config file: tailwind.config.js

Return to the command prompt and create another file in the root directory called tailwind.config.js using the command npx tailwindcss init. 

Configure the new TailwindCSS Configuration file

tw-react > tailwind.config.js

// tailwind.config.js
module.exports = {
  purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Update the tailwind.config.js file with new purge paths. 

Updating the purge options gives Tailwind CSS access to eliminate unused styles from all of the components in the production build. 

Add Tailwind CSS to your CSS

Update the CSS file with Tailwind CSS directive

tw-react > src > index.css

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

Go to the index.css file generated by create-react-app located in the tw-react > src directory. 

Replace the CSS file with the @tailwind directive including the base, components, and utilities style.

Import the CSS file in the index.js

tw-react > src > index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Finally, go to the index.js file and double-check index.css is imported at the top of the file. 

Add Tailwind CSS to a component

tw-react > src > App.js

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App" class="p-6 items-center justify-center">
        <h1 class="text-blue-400 font-extrabold">Hello World!</h1>
        <p class="tracking-widest">This is my first React App.</p>
    </div>
  );
}

export default App;

Go to the App.js file and quickly replace the existing code with the Tailwind CSS above to double-check the install and configurations all worked. 

View React project in the browser

Browser Window

Run npm start again to see the CSS updates. 

Visit the Tailwind CSS section of Top 3 CSS Frameworks for Front-End Development for basic components and 17 Tailwind CSS Card Examples for card references.