Sveltekit Tailwind 配置变量不起作用答案

【问题标题】：Sveltekit Tailwind configuration variable not workSveltekit Tailwind 配置变量不起作用
【发布时间】：2021-09-14 20:45:15
【问题描述】：

这是我的顺风配置文件，我尝试添加一个新的颜色变量。但它不起作用！但是在 VsCode Tailwind CSS IntelliSense 插件中建议颜色。

tailwind.config.cjs


module.exports = {
  mode: 'jit',
  purge: ["./src/**/*.svelte"],
  darkMode: false, // or 'media' or 'class'
  theme: {
    colors: {
      'test-blue': {
        100: '#d0e7fb',
        DEFAULT: '#0063bd',
        500: '#4299e1',
        700: '#2b6cb0',
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

VsCode 代码段

在网络中

注意：更改配置文件后，我重新启动了hmr。

【问题讨论】：

尝试重新启动顺风。如果一切正常，这意味着你有顺风 jit 的问题。我有同样的问题。我将tailwind替换为wind.js，一切正常。 windicss.org

标签： tailwind-css svelte-3 sapper sveltekit

【解决方案1】：

我在使用 Tailwind 和 Sveltekit 时遇到过各种各样的问题。我开始使用 windicss，这是顺风替换的一个下降（使用所有相同的类，工作方式完全相同）。开始工作的步骤：

npm i -D vite-plugin-windicss
在 svelte.config.js 添加插件：

import WindiCSS from 'vite-plugin-windicss
const config = {
  preprocess: [],
  kit: {
    // hydrate the <div id="svelte"> element in src/app.html
    target: '#svelte',
      plugins: [ WindiCSS.default() ]
    },
...
}
export default config

你可以走了！您可以将 tailwind.config.js 更改为 windi.config.js（或 .ts）
您可以下载windicss VScode 插件用于intellisense (WindiCSS IntelliSense)

【讨论】：