Tailwind CSS and PostCSS not compiling in React + Vite + Typescript Stackblitz web application

I am building a web application in Stackblitz using React + Vite with Typescript, and after finishing all of the main functionality I am adding some styling. This is my first time using Tailwind CSS, and when attempting to add it to my project I have been running into some issues.

First, while I was adding it I downloaded it using npm install -D tailwindcss postcss autoprefixer, but when I tried to do npx tailwindcss init -p it kept telling me error npm error could not determine executable to run. Okay, I can add the tailwind.config.js and postcss.config.js files myself. I populated them with such:

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    extend: {},
  },
  darkMode: 'class',
  plugins: [],
};

postcss.config.js:

module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

After doing this, it gave me the error that looked like Internal Error Failed to load PostCSS Config. I don't remember exactly what it looked like as I can't get this one to reappear but it recommend that I change my postcss.config.js file to the .cjs extension. After that, now I am getting It looks like you're trying to use `tailwindcss` directly as a PostCSS plugin. The PostCSS plugin has moved to a separate package, so to continue using Tailwind CSS with PostCSS you'll need to install `@tailwindcss/postcss` and update your PostCSS configuration. Finally, I have done npm install @tailwind/postcss, and that same error won't go away so I am at a standstill.

I have already checked to make sure my terminal is active in the correct directory, I don't know how to check to see that everything is installed properly but everything I installed above is in my package.json folder under devDependencies, except @tailwind/postcss which is under dependencies. Every time I try to npm install these packages again it says they are up to date. I'd appreciate it if someone could let me know what I could try as now I am lost.

Answer

The tailwind version has upgraded to v4, npx tailwindcss init -p this command will no longer work in the new update

Tailwind v4 requires @tailwindcss/vite for Vite projects, simplifying integration without manual PostCSS setup in most cases. Using tailwindcss directly as a PostCSS plugin is deprecated.

refer this for the brief installation steps for installing v4 or continuing with the old versions.

Read more