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.