CSS Preprocessors

PreviousNext

Understanding SCSS/Sass integration with Tailwind v4 - risks, limitations, and alternatives.

Why Preprocessors Are Not Ideal

Official Tailwind CSS Position: The Tailwind team states that preprocessors are not recommended with v4. Read the official documentation →

Tailwind CSS v4 is a complete CSS build tool that replaces preprocessors. It provides import bundling, native nesting, CSS variables, vendor prefixes, and on-demand utilities.

Mixing Sass/SCSS with Tailwind v4 creates order-of-processing conflicts because Sass runs first, then Tailwind runs second.

Common Issues:

  • Tailwind's theme() outputs aren't available to Sass functions
  • Nested SCSS selectors may break @apply
  • @import "tailwindcss" fails in .scss files
  • Slower builds from running two preprocessing layers

Key Problems

Processing Order

Sass functions can't access Tailwind's theme() output. Functions like darken() won't work.

!important Syntax

Sass interprets !important as a syntax error inside @apply. Use interpolation: #{!important}

Import Conflicts

Sass tries to resolve "tailwindcss" as a Sass partial, causing import failures.

If You Must Use SCSS

Warning: Use at your own risk. These approaches are unsupported.

Approach A: Parallel and Isolated

Keep Tailwind CSS and SCSS completely separate. Don't mix @apply into SCSS.

  • Keep Tailwind in a pure CSS file
  • Keep SCSS in its own file(s)
  • Load both in angular.json (Tailwind first)
  • Use CSS variables to share tokens

Approach B: Double-Pass Pipeline

Compile SCSS to CSS first, then import into Tailwind.

  • Install sass and npm-run-all
  • Create parallel watchers for Sass and Tailwind
  • Don't import Tailwind in SCSS files

⚠️ Watch mode is unreliable. SCSS changes may not trigger Tailwind rebuild.

Best Practices

✅ Do

  • Keep Tailwind in .css files
  • Use CSS variables for tokens
  • Leverage native CSS nesting
  • Prefer utility classes in HTML

❌ Avoid

  • Mixing Sass functions with theme()
  • Importing Tailwind in SCSS
  • Deep nesting with @apply
  • Heavy reliance on @apply

References