CODEWITHSUNDEEP
angulartailwind-cssangular19tailwind-css-4
Milad Zai
Milad Zai

Reputation: 3

Tailwind v4 Dark Mode Not Working in Angular 19 (SCSS)

I'm using Angular 19 with Tailwind CSS v4 and SCSS as my stylesheet preprocessor. Tailwind classes are working ex: bg-white but not the dark mode ex: dark:bg-black.

What I Did:

  1. I followed the installation from official Tailwind documentation for Angular Link
  2. Added dark class to html

src/Styles.scss

@use '@fontsource/poppins';
@use 'primeicons/primeicons.css';
@use 'tailwindcss';
@custom-variant dark (&:where(.dark, .dark *));

Test

<main class="flex-grow bg-white px-6 py-12 dark:bg-black">
  <p>Test</p>
</main>

EDIT: I added the following line to styles.scss but it didn't help. And it shows a warning in the vscode editor "Unknown at rule @custom-variantscss(unknownAtRules)"

@custom-variant dark (&:where(.dark, .dark *));

Upvotes: 0

Views: 96

Answers (1)

Wongjn
Wongjn

Reputation: 24408

The docs advise against using Tailwind with Sass:

Tailwind CSS v4.0 is a full-featured CSS build tool designed for a specific workflow, and is not designed to be used with CSS preprocessors like Sass, Less, or Stylus.

Regardless, several things:

  • Replace @use with @import (but with a .css suffix to stop Sass processing it):

    @use '@fontsource/poppins';
@use 'primeicons/primeicons.css';
@import 'tailwindcss/index.css';

  • Configure dark: variants to use the dark class (since you "Added dark class to html"):

    @use '@fontsource/poppins';
@use 'primeicons/primeicons.css';
@import 'tailwindcss/index.css';

@custom-variant dark (&:where(.dark, .dark *));

  • Consider using CSS instead of Sass:

    @import 'tailwindcss';
@import '@fontsource/poppins' layer(base);
@import 'primeicons/primeicons.css' layer(components);

@custom-variant dark (&:where(.dark, .dark *));

Upvotes: 1

Related Questions