Setting Up Tailwind With Postcss Or Cra

Setting Up Tailwind with PostCSS or CRA Step by step Implementation and Top 10 Questions and Answers

Last Update:6/1/2025 12:00:00 AM .NET School AI Teacher - SELECT ANY TEXT TO EXPLANATION. 12 mins read Difficulty-Level: beginner

Setting Up Tailwind CSS with PostCSS or Create React App (CRA)

Introduction to Tailwind CSS

Tailwind CSS is a utility-first styling framework that provides low-level utility classes to build custom designs without leaving your HTML. Instead of using pre-defined components, you compose your design directly in the markup. This approach offers immense flexibility and customizability, making it popular among developers who prefer more control over their styles.

PostCSS is a tool for transforming CSS with JavaScript. It can autoprefix your CSS, compress it, and much more through its plugins. Integrating Tailwind CSS with PostCSS can be a straightforward way to include the powerful Tailwind utilities without the additional setup of a build process.

Create React App (CRA) is another widely used tool that sets up a React project with minimal configuration, including built-in support for Sass, Less, and Stylus. However, if you want to use Tailwind CSS with CRA, you'll need to eject the project or customize it in other ways due to CRA's default restrictions on customizing the webpack configuration.

In this step-by-step guide, we will walk through setting up Tailwind CSS with both PostCSS and Create React App, providing detailed explanations for each phase.

Setting Up Tailwind CSS with PostCSS

Step 1: Initialize Your Project

First, you need to create a new npm project. Open your terminal and run:

mkdir tailwind-postcss && cd tailwind-postcss
npm init -y

This command creates a folder named tailwind-postcss and initializes an npm project inside it.

Step 2: Install Tailwind CSS and PostCSS

Next, you need to install Tailwind CSS and the required PostCSS plugins:

npm install --save-dev tailwindcss postcss-cli autoprefixer

TailwindCSS: The primary CSS framework.
postcss-cli: A command-line interface for PostCSS.
autoprefixer: Ensures your CSS works across different browsers by automatically adding vendor prefixes like -webkit-.

Step 3: Create Configuration Files

You need to create tailwind.config.js and postcss.config.js files inside your project’s root directory:

To generate the Tailwind configuration file, run:

npx tailwindcss init

This will create a tailwind.config.js file where you can customize your Tailwind setup:

// tailwind.config.js
module.exports = {
  content: [
    './src/**/*.{html,js}',
    // Add paths to files that reference classes so that PurgeCSS can pick them up.
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Then, create a postcss.config.js file:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

These configuration files ensure that PostCSS processes your CSS files and applies the Tailwind utility classes.

Step 4: Create Basic CSS File

Inside your src directory, create a CSS file named main.css:

/* src/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

These directives import Tailwind's global styles, component styles, and utility classes into your CSS file.

Step 5: Build Your CSS

To build your CSS, add a build script in your package.json:

{
  "scripts": {
    "build:css": "postcss src/main.css -o src/output.css"
  }
}

This script uses PostCSS to transform main.css into output.css, which includes your Tailwind utility classes.

Run this script on the terminal:

npm run build:css

You should now have an output.css file inside the src directory with all the necessary Tailwind classes.

Step 6: Include CSS File in Your HTML

Link the output.css file in your HTML document. If you don’t have an HTML file yet, create one called index.html in your src directory:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tailwind CSS with PostCSS</title>
    <link rel="stylesheet" href="./output.css">
</head>
<body>
    <div class="bg-blue-500 text-white p-6">
        Hello Tailwind CSS!
    </div>
</body>
</html>

The <link> tag points to the output.css file where Tailwind's styles are located.

Step 7: Serve Your Application

For serving your application during development, you can use a simple HTTP server or tools like Parcel, Vite, etc. Here's how you could set up a basic HTTP server with Node.js:

First, install http-server:

npm install --save-dev http-server

Then, add a start script to your package.json:

{
  "scripts": {
    "start": "http-server src -p 3000"
  }
}

This script serves your src directory on port 3000.

Now run your project:

npm run start

Navigate to http://localhost:3000/ in your browser to see the styled content.

Step 8: Watch for Changes (Optional)

If you want to automatically rebuild your CSS whenever you make changes, you can add a watch script:

// package.json
{
  "scripts": {
    "build:css": "postcss src/main.css -o src/output.css",
    "watch:css": "postcss src/main.css -o src/output.css --watch"
  }
}

Run the watch script:

npm run watch:css

Now every update in main.css will automatically trigger a CSS build.

Setting Up Tailwind CSS with Create React App (CRA)

Step 1: Create React App

First, create a new React app using Create React App:

npx create-react-app tailwind-cra
cd tailwind-cra

This command creates a new project folder tailwind-cra with all the necessary dependencies.

Step 2: Install Tailwind CSS and PostCSS

Install Tailwind CSS and PostCSS via npm. CRA has built-in support for PostCSS which makes it easy:

npm install --save-dev tailwindcss postcss autoprefixer

You might also need craco (Create React App Configuration Override) if you want to override the default CRA settings:

npm install @craco/craco

CRACO allows us to easily modify CRA configuration files without ejecting.

Step 3: Generate Configuration Files

Generate Tailwind configuration files:

npx tailwindcss init

This creates a tailwind.config.js file similar to what you saw earlier. Edit it as needed.

Additionally, you need a postcss.config.js file, which you created previously for PostCSS. Now place it in your project's root:

// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
}

This configuration tells PostCSS to process Tailwind and add necessary prefixes.

Step 4: Modify CRACO Configuration

Modify package.json to use CRACO instead of the default React scripts. CRA scripts won't recognize our custom PostCSS configuration, so we need the help of CRACO.

Replace the react-scripts commands in scripts section of package.json with craco:

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

Now, create a craco.config.js file to tell CRACO about our PostCSS configuration:

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

This configuration tells CRACO to use PostCSS and our Tailwind and Autoprefixer plugins.

Step 5: Create Main CSS File

Inside your src directory, create a main.css file if it doesn’t exist. Import Tailwind CSS directives here:

/* src/main.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Ensure to import this CSS file in your index.js or App.js file:

// src/index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './main.css'; // Import the main.css file
import App from './App';

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

Step 6: Test Tailwind

You can now test Tailwind CSS in your React application by adding utility classes to any element in your JSX. For instance:

// src/App.js
import React from 'react';

function App() {
  return (
    <div className="bg-blue-500 text-white p-6">
      Hello Tailwind CSS!
    </div>
  );
}

export default App;

Step 7: Run Your Application

Start your CRA application using the modified commands that utilize CRACO:

npm start

This will serve your React application at http://localhost:3000/ and apply Tailwind CSS utilities automatically through the main.css file.

Additional Tips

PurgeCSS

PurgeCSS removes unused CSS classes from your output file, reducing file sizes and improving performance. It’s particularly beneficial for production builds. Configure PurgeCSS under the Content property in your Tailwind config file:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

In development mode, PurgeCSS isn’t enabled by default, but in production, it will remove any unused styles defined in your application.

Optimization and Customization

Tailwind provides a robust customization system where you can define your own color palette, fonts, spacing, etc., in the tailwind.config.js. Here’s an example of how you can customize the spacing utilities:

// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Now, you can use .space-y-128 or .space-x-144 classes along with Tailwind provided spacing utilities.

Ejecting CRA

While CRACO is a fantastic solution for overriding configurations in CRA, some developers still prefer ejecting to get more control over their project. Be aware that ejecting is irreversible and makes future version updates harder.

Eject CRA by running:

npm run eject

After ejecting, you can manually modify the webpack configuration (webpack.config.js) in the /config folder. You would need to configure rules for PostCSS processing there.

By following these steps, you can successfully integrate Tailwind CSS into your projects using either PostCSS or Create React App. Tailwind, coupled with PostCSS, gives you an incredibly powerful combination for creating high-performance web applications. Whether you're starting fresh with a simple HTML setup or scaling up a complex React project, these methods provide a solid foundation for utilizing Tailwind’s utility-first styling approach.