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.