How to install React, TypeScript and TailwindCSS v4 using PostCSS

I tried to configure a new project using React, TypeScript and Tailwind v4 but Tailwind isn't applying.

Here is my installation:

npx create-react-app web
npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest
npx tsc --init
npm install --save-dev tailwindcss @tailwindcss/postcss postcss

I could use npx create-react-app web --template typescript but this way puts TypeScript in production dependencies. It is why I used my first steps.

Now, regarding Tailwind v4 doc I created postcss.config.mjs to the root, (near package.json) with this code:

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

Then, in src/index.css, I removed all styles and I added only this line:

@import "tailwindcss";

Now I changed the App extension from App.js to App.tsx with this sample code:

function App() {
  return (
    <h1 className="text-3xl font-bold underline">
    Hello world!
  </h1>
  );
}

export default App;

and this this is the index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.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();

Now I run npm start but Tailwind CSS not applied. Here is a screen:

Versions:

"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"tailwindcss": "^4.0.12",
"postcss": "^8.5.3",

Did I miss a step?

Short answer: Don't use create-react-app, as it is outdated. Alternatives: Next.js or Vite.

Deprecated Create React App

Deprecated

Create React App was one of the key tools for getting a React project up-and-running in 2017-2021, it is now in long-term stasis and we recommend that you migrate to one of React frameworks documented on Start a New React Project.

If you are following a tutorial to learn React, there is still value in continuing your tutorial, but we do not recommend starting production apps based on Create React App.

---

Source: facebook/create-react-app

Use Next.js instead of Create React App

Follow this: Creating a React App with Next.js App Router (react.dev) - React Docs

npx create-next-app@latest

After that follow TailwindCSS guide for Next.js:

• Install TailwindCSS v4 with Next.js - TailwindCSS v4 Docs

npm install tailwindcss @tailwindcss/postcss postcss

Then you can easily integrate TailwindCSS to postcss.config.mjs using the @tailwindcss/postcss plugin released from v4 like this:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};
export default config;

And import TailwindCSS to main global.css:

@import "tailwindcss";

Alternative: Use Vite for React Project

Can use Vite with a simple installation step:

• Get started with create-vite - Vite Docs

npm create vite@latest

Choose whether you need a React template, and whether you want a TypeScript or JavaScript-based starting point.

Then you can easily integrate TailwindCSS (even without postcss) using the @tailwindcss/vite plugin released from v4 like this:

• Get started TailwindCSS v4 with Vite - TailwindCSS v4 Docs

npm install tailwindcss @tailwindcss/vite

Add the Vite plugin to vite.config.ts:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

// https://vite.dev/config/
export default defineConfig({
  plugins: [
    tailwindcss(),
    react(),
  ],
})

And import TailwindCSS to main app.css:

@import "tailwindcss";