Svelte组件中Tailwind CSS类未生效问题求助

核心原因：Tailwind 未扫描到 Button 组件的类 #

你的tailwind.config.js中content配置的路径是./src/**/*.{html,js,svelte,ts}，但项目结构里并没有src目录，所有组件和页面都直接在ui根目录下的lib、routes文件夹里，导致Tailwind无法扫描到Button组件内的Tailwind类名，自然不会生成对应的CSS样式。

修复步骤 #

1. 修正 tailwind.config.js 的 content 路径 #

把content配置改为匹配实际的文件路径：

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./lib/**/*.{svelte,ts}', './routes/**/*.{svelte,ts,css}'],
  theme: {
    extend: {},
  },
  plugins: [],
}

或者更简洁的写法，直接匹配根目录下所有相关文件：

content: ['./*.{js}', './**/*.{svelte,ts,css}'],

2. 移除 Button.svelte 中冗余的 Tailwind 导入 #

Button组件的<style>标签里重复导入了Tailwind相关内容，这完全没必要——+layout.svelte已经全局导入了layout.css（包含Tailwind的导入），重复导入会增加编译冗余，甚至可能导致样式冲突。直接删除Button组件的style标签内容：

<!-- Button.svelte 里的 style 标签可直接清空或删除 -->
<style>
</style>

3. 重启开发服务 #

修改tailwind.config.js后，需要重启npm run dev，让Tailwind重新扫描所有文件并生成正确的CSS样式。

验证效果 #

重启服务后，Button组件的text-white等类应该会正常生效，文字变为白色，背景色和hover效果也能正确显示。

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