用 @theme

Question

I安装了parwindcss v4，我遵循设置：npm install tailwindcss @tailwindcss/vite

vite.config.js

import { defineConfig } from 'vite'
import tailwindcss from '@tailwindcss/vite'
export default defineConfig({
  plugins: [
    tailwindcss(),
  ],
})

index.css@import "tailwindcss";

现在，当我尝试使用它时，它不起作用，它无法识别此规则，而且如果我应用了十六进制值，它就不起作用
我应该如何解决此问题？

@theme

Answer 1

可能的问题和解决方案

确保您正在使用parwindcss v4.0+

1. run此命令检查您的版本：

@theme {
  --color-mint-500: oklch(0.72 0.11 178);
}

如果不是v4，请更新：npx tailwindcss -v

使用@tailwind主题，而不是 @theme

tailwind v4用@tailwind主题代替@theme。而不是：

2. npm install tailwindcss@latest
try：

@tailwind主题;

，然后在tailwind.config.js内部：

@theme {
  
--color-mint-500: oklch(0.72 0.11 178);

}

在重新启动开发服务器（NPM Run Dev）后，您应该能够使用：

export default {
  theme: {
    extend: {
      colors: {
        mint: {
          500: 'oklch(0.72 0.11 178)',
        },
      },
    },
  },
  plugins: [],
};

可启用尾风的JIT模式

确保您的tailwind.config.js包括：

<div class="bg-mint-500 text-white p-4">Mint Background</div>
jit模式需要动态生成实用程序类。

确定Vite正在正确处理尾风 由于您正在使用Vite，您的vite.config.js应该看起来像这样：

export default {
  mode: 'jit',
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
};

4. ->结论

使用@tailwind主题，而不是 @theme。

在tailwind.config.js.

中定义颜色

更改后Restart Dev Server（NPM运行DEV）。

检查Pisqre