使用shadcn-svelte的Svelte项目：如何配置Tailwind忽略HTML的dark属性？

方法1：通过Tailwind配置忽略HTML的dark属性 #

你可以调整Tailwind的暗色模式配置，让它不再识别HTML标签上的dark属性来应用暗色样式，具体有两种方式：

完全禁用暗色模式 #

如果你的项目不需要暗色模式，直接在tailwind.config.js中设置darkMode: false：

/** @type {import('tailwindcss').Config} */
export default {
  darkMode: false,
  content: [
    './src/**/*.{html,js,svelte,ts}',
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

修改暗色模式触发规则 #

如果仍需保留暗色模式但不想用HTML的dark属性触发，可以切换为媒体查询模式（跟随系统主题），或者自定义触发选择器：

// 切换为系统主题触发的媒体查询模式
export default {
  darkMode: 'media',
  // 其他配置项...
}

// 或自定义一个不会被默认添加的触发类
export default {
  darkMode: '.manual-dark-trigger',
  // 其他配置项...
}

方法2：阻止shadcn-svelte自动添加dark属性 #

shadcn-svelte的dark属性通常是通过项目中的ThemeProvider组件自动添加的。你可以找到主题提供者文件（一般是src/lib/components/ui/theme-provider.svelte），定位到添加dark类到HTML的代码（类似document.documentElement.classList.add('dark')），删除或注释掉这部分逻辑，就能避免默认添加该属性。

内容的提问来源于stack exchange，提问作者david 11