Setup Tailwind in create-react-app project

Install tailwindcss

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Configure template paths

Add the following to tailwind.config.js:

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

Add tailwind CSS directives

Add the following to src/index.css:

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

Restart build process

npm run start

Start using tailwind

Edit src/App.tsx:

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

(Optional) Setup Tailwind UI

See this post.

Sources

• Tailwind docs