shadcn buttons render as plain text, no styles at all

Solved · 93 views · asked 2 days ago by anouk · edited

Fresh Next.js 15 project. I asked Cursor to set up shadcn, it ran npx shadcn@latest init and added button, card and input. The components render but completely unstyled: the button is just the word "Save" in black Times-looking text, the card has no border.

My app/globals.css starts with:

@import "tailwindcss";
@import "tw-animate-css";

@custom-variant dark (&:is(.dark *));

and there is also a tailwind.config.ts in the root that Cursor made earlier. layout.tsx does import ./globals.css. No errors in the terminal.

What I’ve tried

Deleted .next and restarted the dev server, asked Cursor to 'fix the styling' (it added more classes to the button, still nothing), checked that globals.css is imported in layout.tsx.

Comment

Can you paste your postcss config? That file tells you which Tailwind major you're really running. kenji_w 2 days ago · edited

2 answers

Marked as helpful by the asker

aiko_n2 days ago · edited

Almost certainly a version mismatch. That CSS is Tailwind v4 syntax, but your project was scaffolded with Tailwind v3 (the tailwind.config.ts is the giveaway). v3's PostCSS plugin doesn't understand @import "tailwindcss", so it silently outputs nothing useful.

Check:

npm ls tailwindcss
cat postcss.config.*

If you see 3.4.x and plugins: { tailwindcss: {}, autoprefixer: {} }, upgrade instead of downgrading shadcn:

npm i -D tailwindcss@latest @tailwindcss/postcss tw-animate-css

// postcss.config.mjs
export default { plugins: { "@tailwindcss/postcss": {} } };

Then delete tailwind.config.ts (v4 reads the theme from the @theme inline block shadcn already put in globals.css) and restart the dev server. Don't let Cursor "merge" the two configs, that's how you get half-working colors.

Comment

npm ls said 3.4.17. Did exactly this, restarted, everything has borders and colors now. Thank you!! anouk 2 days ago · edited

Bookmarking the npm ls check, same thing bit me last month. kenji_w yesterday · edited

kenji_w2 days ago · edited

Side note: when it happens again, open devtools and look at the generated CSS. If you see a literal @import "tailwindcss" line in the output, the processor never ran on it. Faster than guessing.

Comment

Keyboard shortcuts

shadcn buttons render as plain text, no styles at all

What I’ve tried

2 answers

Your answer

shadcn buttons render as plain text, no styles at all

What I’ve tried

2 answers

Related

Your answer