Sveltekit Tailwind配置变量不工作

Question

这是我的顺风配置文件，在这里我试图添加一个新的颜色变量。但是它不起作用！但是在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代码段

​

在Web上

​

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

Answer 1

我在使用Tailwind和Sveltekit时遇到了各种各样的问题。我开始使用windicss，这是一种顺风替代(使用所有相同的类，以完全相同的方式工作)。开始工作的步骤：

1. npm i -D vite-plugin-windicss
2. In 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

1. 你可以开始了！您可以将您的tailwind.config.js更改为windi.config.js (或.ts)
2. 您可以下载用于智能感知的windicss插件(WindiCSS intellisense