Sveltekit Tailwind 配置变量不起作用

问题描述

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

解决方法

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

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

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