Can't install TailwindCSS in create react app

Question

I'm trying to install TailwindCSS in react but got an error in the command npx tailwindcss-cli@latest init. It doesn't generate the tailwind.config.js file as expected. Please help me, I'm very grateful.

Answer 1

Have you followed the official documentation?

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

Answer 2

1. Install React

npx create-react-app my-app

2. Install TailwindCSS

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

3. Replace these codes in tailwind.config.js

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

4. Add these in index.css

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

Congratulations your setup is completed! Now you can use tailwind classes

For production build npm run build CSS classes automatically optimized, removed unused classed! You don't have to set up another plugin.