Angular 19（SCSS）中Tailwind CSS v4深色模式失效问题

问题根源 #

你用的@custom-variant是Tailwind v3的语法，v4已经彻底废弃了这个指令——这既是深色模式类无效的核心原因，也是VS Code提示“Unknown at rule @custom-variant”的来源。另外，Tailwind v4的深色模式规则需要在配置文件中定义，而非通过SCSS指令设置。

解决步骤 #

1. 修正Tailwind配置文件
   打开项目根目录的tailwind.config.js，确保darkMode配置包含你使用的.dark类选择器：

   /** @type {import('tailwindcss').Config} */
   export default {
     // 配置深色模式为class策略，适配根元素的.dark类
     darkMode: ['class', '.dark'],
     content: [
       "./src/**/*.{html,ts}",
     ],
     theme: {
       extend: {},
     },
     plugins: [],
   }
   

2. 清理styles.scss中的无效代码
   删除styles.scss里的@custom-variant dark (&:where(.dark, .dark *));行，修正后的代码如下：

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

3. 验证根元素的dark类
   确认HTML根标签已正确添加.dark类：

   <html class="dark">
     <!-- 页面内容 -->
   </html>
   

原理说明 #

Tailwind v4将深色模式的变体生成逻辑完全迁移到了配置文件中，通过darkMode选项指定触发深色模式的选择器。当配置darkMode: ['class', '.dark']后，Tailwind会自动生成所有带dark:前缀的类，这些类会在父元素（或根元素）拥有.dark类时生效。

内容的提问来源于stack exchange，提问作者Milad Zai