search

tailwindlabs / tailwindcss

A utility-first CSS framework for rapid UI development.
https://tailwindcss.com/
MIT License
81.78k stars 4.11k forks source link

v4 crashes with .scss #13147

Closed piscopancer closed 6 months ago

piscopancer commented 6 months ago

v4.0.0-alpha.6

Crashes if .scss file used:

@import "tailwindcss";

image

RobinMalfait commented 6 months ago

If you want to use scss, then you have to process it before giving it to Tailwind CSS. Are there any features you must use that won't work in native .css files?

Can you also provide a minimal reproduction repo?

adamwathan commented 6 months ago

Hey! So what happens here is Sass sees @import "tailwindcss" and processes it itself, inlining the contents of that file which gives you this:

@layer theme, base, components, utilities;

@import './theme.css' layer(theme);
@import './preflight.css' layer(base);
@import './utilities.css' layer(utilities);

Then when postcss-import tries to resolve those imports, the paths are no longer correct.

The best solution here is to explicitly tell Sass not to process the original import by including the full file name and .css extension:

@import "tailwindcss/index.css";

This is something we will make sure to document when v4 is stable 👍