Sveltekit Tailwind 配置变量不起作用

Posted 2023-03-07

【中文标题】Sveltekit Tailwind 配置变量不起作用

【英文标题】：Sveltekit Tailwind configuration variable not work

【发布时间】：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

【参考方案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)