Sage 11 + tailwind + SCSS

sage
,
1

Hi, I used to have my styles in scss with sage and it worked perfectly fine with tailwind. Now I can see that the SCSS docs require me to get rid of tailwind. And just renamng the files without removing tailwind does not compile the classes from templates. Is there a way to still use SCSS along with Tailwind in Sage 11?

2

You can see the Tailwind v4 docs that touch on that subject a bit: Compatibility - Getting started - Tailwind CSS

It might still be possible to do by following https://vite.dev/guide/features#css-pre-processors and changing extensions to .scss, but I’m not actually sure.

3

Tailwind 4 is not suitable for scss. I solve it with nested and imports.
Imports e.g.:

@import './components/forms.css';
@import './components/drawer.css';
@import './components/buttons.css';
@import './components/toc.css';

nested:

#toc ul {
 li {
 font-size: clamp(1rem, 0.5rem + 1.6vw, 1.4rem);
 line-height: clamp(1.2rem, 0.2rem + 3.2vw, 2rem);
 @apply font-normal hover:underline hover:text-parrot mt-2;
 }
}

Goes so far. Personally, I also prefer scss.

Translated with DeepL.com (free version)