TW 4 with Vite ignores SCSS

[simPod]

What version of Tailwind CSS are you using?

For example: v4.0.8

What build tool (or framework if it abstracts the build tool) are you using?

Vite 6.2.0

What version of Node.js are you using?

v22

What browser are you using?

Chrome

What operating system are you using?

Macos

Reproduction URL

https://github.com/simPod/tw-vite-repro

Describe your issue

I have created

index.css

@import "tailwindcss";

html {
  color: red;
  @apply bg-gray-900 text-gray-100;
}

index.scss

@import "tailwindcss";

html {
  color: green;
  @apply bg-yellow-500 text-black;
}

Imported both files in index.html.

npm run dev

you can see TW styles from css files are applied while from scss file are not. All other styles are applied.

Tailwind vite plugin somehow ignores scss files.

[philipp-spiess]

Hey! You can read about that in our compatibility guide but the short answer is that we do not support SCSS files with the Vite plugin. If you really need it for some reason, you can try to build your own SCSS implementation with the PostCSS plugin and by controlling the execution order but both SCSS and Tailwind CSS are pre-processors that extend CSS and cause a conflict in some areas, so that's not something that we can support unfortunately.

[Stephan-MC]

too bad 😞 to hear this. Ever since i discovered sass, my way of styling slightly improved and tailwindcss made it better. I can't say i'm not confused now. should i drop sass with all the control i had with styling to continue with tailwind or just stick to tailiwind utility classes only 😓.

Either ways, there will be a lot to loose 😢

[ameotoko]

Hey @philipp-spiess, I just upgraded one of my projects from v3 to v4 and faced the opposite problem – Tailwind is now picking up all my SCSS files in subfolders and chokes on them. The immediate question that I had is: why does Tailwind tries to process SCSS files if they are not supported?

I peeked into @tailwindcss/postcss and found a workaround, moving my TailwindCSS entrypoint file to a folder that is a sibling to SCSS framework (not a parent, as before), and setting base option on TailwindCSS PostCSS plugin explicitly. That worked, but then there are more questions: why wasn't it needed in v3 and why wasn't this change documented?

[adlion]

No supporting SCSS and not providing similar features to what SCSS provides, it will cost a lot.
I can not literally use v4 anymore.

[janko]

The PostCSS plugin is compatible with Sass, only the Vite plugin isn't. So, you can still use Sass with @tailwindcss/postcss, just not with @tailwindcss/vite.

@philipp-spiess Maybe this could be documented on the website.

[janko]

BTW, I was able to use Sass with the Vite plugin as well, but I needed to extract Sass code into their own .scss entrypoint, so that Tailwind is skipped there (it's only activated for .css entrypoints). Then I needed to use cascade layers to retain desires rule precedence.

That could be documented as well for Vite.

[rozsazoltan]

TailwindCSS v4 and Sass (works, but independently of each other)

You can use TailwindCSS and Sass side by side separately. Create a tailwind.css file (important: not an .scss file) with content related only to TailwindCSS, for example:

@import "tailwindcss";

Then reference this new file in your styles.scss like this:

@use "./tailwind.css";
@use "custom";

• tailwindlabs/tailwindcss discussion #18364: Support Angular SCSS with TailwindCSS v4
• How to use @apply in Tailwind v4?

Note: So officially it's not supported and cannot be used together directly, but they can be used side by side. Keep in mind that compatibility issues between TailwindCSS and these preprocessors will not be a priority in the future.

Source: How to use SCSS with TailwindCSS v4

References:

• Deprecated: Sass, Less and Stylus preprocessors support
• @import "tailwindcss"; does not work when used in a file with an .scss extension
  • Angular not detecting changes in .scss files
• How to use SCSS with TailwindCSS v4

For @apply strongly recommended reference from me:

• How to use @apply in TailwindCSS v4 with SCSS

[ameotoko]

Is it possible to make TailwindCSS ignore .scss files? I described the problem earlier, see #16793 (reply in thread)

[janko]

@ameotoko Tailwind only picks up files that you directly import, doesn't it? I'm using Vite, and I put my *.scss files in a separate Vite entrypoint, so Tailwind didn't touch them. I only had the make the entrypoint have the .scss extension as well, so that Tailwind's Vite plugin doesn't activate Tailwind processing.

[rozsazoltan]

I think it shouldn't have to deal with your .scss files by default. I believe there's some kind of configuration issue in the background, but to answer the question specifically: Yeah, using @source not.

If you don't want the contents of .scss files to be detected in automatic source detection, you need to exclude them.

./css/style.css

@import "tailwindcss"; /* with automatic source detection */

/* Assuming that the SCSS files are located in the current folder */
@source not "./*.scss";

/* Assuming that the SCSS files can be located anywhere within the project */
/* @source not "./../**/*.scss"; */

As an alternative, you can disable the entire automatic source detection and manually configure what you allow to be indexed.

./css/style.css

@import "tailwindcss" source(none); /* WITHOUT automatic source detection */

/* Now you have to add all the paths yourself */
@source "./../views";
@source "./../components";

Returning to the configuration issue, as I explained earlier in my answer, Sass and TailwindCSS should not be nested within each other; they should only be used alongside each other. You can reference TailwindCSS in SCSS, but not the other way around. Instead of @use, you can also choose to import two separate files into the project - a tailwind.css and a style.scss - ensuring that they never interact with each other.

[ameotoko]

@rozsazoltan the docs give the idea that "sources" are files, that are parsed for tokens, such as HTML files. Did I get it wrong?

Anyway, I have already tried your last example (with source(none)), it didn't work.

[rozsazoltan]

@ameotoko Yeah. I assumed that TailwindCSS is incorrectly interpreting the contents of your SCSS files, including the @apply directives written there, even though they are not intended for it.

I wasn't directly replying to you in the first place, which is why I wrote a separate, independent answer (#16793 (comment)). The core point of that answer is that you should not mix Sass with TailwindCSS v4. Following the approach I described, it should never happen that Sass is imported into TailwindCSS in a way that causes the contents of @apply to be processed by the TailwindCSS parser. By elimination, if the two systems are properly separated, Tailwind can only be reading the SCSS content due to some kind of misconfiguration - specifically via source detection rather than a CSS import.

I think it would be worthwhile for you to share a reproduction of the behavior, because it's difficult to imagine how you are using the two systems independently side by side.

(So, since I assumed that you did not import Sass into TailwindCSS - as I previously stated you shouldn't - by elimination, the only possibility is that source detection incorrectly picked up the contents of the .scss files. And although at first I myself didn't quite understand the situation, I provided a few tips on how to handle source detection: #16793 (reply in thread))

(And since Sass and TailwindCSS v4 only work alongside each other when they are separated, they cannot reference each other's class names. I believe I mentioned this in one of my Stack Overflow answers, but I’ll look it up later - I'm sure I've already touched on this scenario as an example, as it logically follows from a separated setup. My comment essentially described the correct setup of Sass and TailwindCSS v4, while ignoring the "SCSS ignoring" behavior that results from an incorrect installation.)