TailwindCSS v4

Starting from TailwindCSS v4, support for preprocessors has been discontinued, meaning that SASS can no longer be used with it from v4 onwards.

• Compatibility
• Deprecated: Sass, Less and Stylus preprocessors support
• tailwindlabs/tailwindcss #15716 by RobinMalfait:
  Migration tool doesn't recognize .scss files

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 in ./scss/main.scss:

@use "custom.scss";

$primary: #42b883;

body {
  background: $primary;
}

You need to include styles.scss and tailwind.css as separate files in the project. They must not interact with each other or be nested into one another.

main.ts

import "./main.scss";
import "./tailwind.css";

• 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.

Related:

• Angular not detecting changes in .scss files
• @import "tailwindcss"; does not work when used in a file with an .scss extension

Extra: open source template

I put together an open-source template. It's difficult to implement directly in a Stack Overflow answer, but it can serve as a useful learning example for using TailwindCSS and Sass in the same project, including both global CSS, CSS modules, and style blocks.

• Template: Vite (with TypeScript) + Sass + TailwindCSS v4