Configure Create React App with Tailwind CSS in React

Streamline Your React Project with Tailwind CSS

Effortless Setup and Configuration

When it comes to setting up Tailwind CSS in a React project bootstrapped by Create React App (CRA), things can get complicated quickly. The abstracted configuration of CRA makes it difficult to customize settings without ejecting the app, which can lead to a tedious setup process. But fear not! We’ve found a better way to integrate Tailwind CSS into your React project without having to eject CRA.

Getting Started

To follow along with this tutorial, you’ll need:

• Node.js 12.13.0 or higher installed on your PC
• Yarn / npm 5.6 or higher installed on your PC
• Basic knowledge of CSS
• Basic understanding of React and Tailwind CSS

Create a New Project

Open your terminal and type the following commands to create a new project:


npx create-react-app my-app
cd my-app


Install Tailwind and Dependencies

Next, install Tailwind and its dependencies:


npm install tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9


Configure CRACO

Create React App doesn’t support PostCSS 8 yet, so we’ll need to install CRACO to configure Tailwind. CRACO provides an easy and comprehensible configuration layer for Create React App.

Create a CRACO configuration file in your base directory:


touch craco.config.js


Add tailwindcss and autoprefixer as PostCSS plugins to your CRACO config file:

javascript
module.exports = {
style: {
postcss: {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
],
},
},
}


Configure Your App

Open your package.json file and replace the content of “scripts” with:

json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
}


Create Default Configurations

Create the default configurations scaffold:


npx tailwindcss init --full


Include Tailwind in Your CSS

Inside your src folder, create a folder named styles. This is where all your styles will be stored. Inside that folder, create a tailwind.css and an index.css file.

Add the following to your index.css file:

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


Configure Your App to Build Your CSS File

Open your package.json file and replace the content of “scripts” with:

json
"scripts": {
"start": "craco start",
"build": "craco build",
"test": "craco test",
}


Import Your CSS to the App

Open your index.js file and import your Tailwind styles:

“`javascript
import React from ‘eact’;
import ReactDOM from ‘eact-dom’;
import ‘./styles/index.css’;

ReactDOM.render(


,
document.getElementById(‘root’)
);
“`

Testing Your Tailwind CSS Configurations

To test that our configurations work correctly, let’s create a simple sign-in form. Open your App.js file and replace the content between the return function with the following:

“`jsx

“`

You should get a result similar to this:

Check out an editable example on CodeSandbox.

Take Your React App to the Next Level

With LogRocket, you can create better digital experiences. Try it out today and see how it can help you streamline your development process.