Tailwind CSS is a utility-first CSS framework designed to enable rapid and flexible web development. It provides a collection of low-level utility classes that you can use to build custom designs directly in your HTML without writing custom CSS.

Tailwind provides responsive utility classes that you can use to apply different styles at different breakpoints.

Follow these steps to install and set up the Tailwind CSS and React project.

Create a React App

npx create-react-app tailwind-project  --template typescript
cd tailwind-project

Install Tailwind CSS

npm install -D tailwindcss

Create tailwind.config.js file

npx tailwindcss init

Configure Tailwind CSS

Add the paths to all of your template files in your tailwind.config.js file.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add the @tailwind directives for each of Tailwind’s layers to the tailwind.css file.

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

Import tailwind.css

Import the tailwind.css file in your src/index.tsx file.

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import "./tailwind.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

reportWebVitals();

Start using Tailwind

App.tsx

import React from "react";
import "./App.css";
function App() {
  return (
    <div className="App">
      <h1 className="text-4xl font-bold underline text-slate-700">
        React App!
      </h1>
    </div>
  );
}

export default App;

Start development server

npm run dev

Create React App does not support custom PostCSS configurations and is incompatible with many important tools in the PostCSS ecosystem, like `postcss-import`.

Authors highly recommend using Vite, Parcel, Next.js, or Remix instead of Create React App.