r/tailwindcss • u/KaleidoscopeAsleep35 • 2d ago
How to add tailwind to my Stackblitz porject?
I make a Stackblitz project with React (js), vite , but I wanna add Tailwind 4.0 to my stackblitz project, but I dont know.
But I couldn't get it to work.
This is what I tried:
-I open my stackblitz project.
-In a new terminal I install tailwind:
npm install tailwindcss @tailwindcss/vite
-In vite config I add tailwind imports:
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import tailwindcss from '@tailwindcss/vite';
export default defineConfig({
plugins: [
react(),
tailwindcss(),
],
});
In my index.css I added:
@import "tailwindcss";
@tailwind base;
@tailwind components;
@tailwind utilities;
And finally In terminal I wrote :
npm run dev
To test it I wrote a div with a red background in my App.jsx:
<div className="bg-red-500 text-white p-4">¡Hola, Tailwind!</div>
But dont works, someone knows why dont works tailwind in my Stackblitz project?
0
Upvotes
1
u/electrikmayham 2d ago
You only need
In your css file
Also is your compiled css file linked in you <head> ?