sh: tailwindcss: command not found

[MrDavidson23]

I'm trying to use TailwindCSS, but I can't

Everytime I put npx tailwindcss -o tailwind.css, the bash gives me a: sh: tailwindcss: command not found

The steps I follow are:

1. Init nodejs: npm init
2. Install tailwindcss:
   I have had use npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
   And also npm i -D tailwindcss
3. Build tailwind:
   npx tailwindcss -o tailwind.css
   It gives me: sh: tailwindcss: command not found

[BiboyQG]

Try to delete your node_module and reinstall all the package.

[applyfly]

If your computer is MacOS, run brew install tailwindcss

[aoua11]

thank you so much
it worked

[hwisunggh]

it worked too

[thanmaiaadimulam]

thanks a lot ,it worked

[jaivincoder]

Thanks it worked

[mass10]

I thought tailwindcss was moved into @tailwindcss/cli.

https://tailwindcss.com/docs/installation/tailwind-cli

[rozsazoltan]

Related: Problem installing TailwindCSS after "npx tailwindcss init -p" command - Error: tailwindcss not recognized

[royalcreator1]

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

It worked after running this command and add
@tailwind base;
@tailwind components;
@tailwind utilities;

in index.css

[amar210d]

this works on macOS!

[Brianoyaro]

It works like a charm after spending countless days debugging and going through the documentations. Thank you very much.

[diasgsputra]

thanks bro

[rozsazoltan]

Related: Problem installing TailwindCSS after "npx tailwindcss init -p" command - Error: tailwindcss not recognized

[abuhuraira77788]

OMG!!!
i swear after spending in hours debugging, i feel like you're an angel.

[gocs]

Perhaps VERSION 3 is what you need

my initial setup was just React 19 in Webpack, and i'm not going to install tailwind globally

1. install Tailwind CSS

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

3. Configure your template paths

make sure your content lists where your template files are. for me it is on src and it should detect the .js, or .jsx files

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

4. Add the Tailwind directives to your CSS

add these lines at the top of your index.css file

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

6. Import the css file

my index.css was already imported within index.js

4. start your build process

npm start

7. Start using Tailwind in your project

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