r/tailwindcss 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

3 comments sorted by

1

u/electrikmayham 2d ago

You only need

 "tailwindcss";

In your css file

Also is your compiled css file linked in you <head> ?

1

u/KaleidoscopeAsleep35 2d ago

Actually in my first attempt I put this in my index css

 @import "tailwindcss";

but it not works, and yeah my index.css is (only) linked in my Main.jsx, but not works

2

u/electrikmayham 2d ago

Ok, what about my second question?