79634295

Date: 2025-05-22 18:03:53
Score: 0.5
Natty:
Report link

Instead of manually including

@tailwind base;
@tailwind components;
@tailwind utilities;

in your input.css, try using this instead:

@import "tailwindcss";

This ensures that Tailwind's default theme is included in your build (see here). This is shorthand for:

@layer theme, base, components, utilities;
@import "./theme.css" layer(theme);
@import "./preflight.css" layer(base);
@import "./utilities.css" layer(utilities);

The theme defines default colors and sizes (and more) for you, which is required before classes like text-red-300 or text-lg are recognized by Tailwind. If most Tailwind classes are being compiled, except for ones involving color/size, then it's likely that you're missing a theme.

@import "tailwindcss"; also ensures that Tailwind's default normalization is also applied, so you might see a shift from Times New Roman to a sans serif font.

Tailwind Play appears to import all these for you automatically, which is why your styles work fine in that context.

Reasons:
  • Long answer (-0.5):
  • Has code block (-0.5):
  • Unregistered user (0.5):
  • Low reputation (1):
Posted by: tommo