windicss 类在 Nuxt App 中不起作用

Posted 2023-03-07

【中文标题】windicss 类在 Nuxt App 中不起作用

【英文标题】：windicss classes doesn't work in Nuxt App

【发布时间】：2021-12-11 08:31:14

【问题描述】：

我遇到了一些关于 Windics 的问题。类不适用于元素。 我已经尝试安装旧版本的windi，但它仍然无法正常工作。我什至尝试使用tailwind 代替windi，但还是不行。

index.vue

<template>
  <div>
    <p class="text-red">e</p>
  </div>
</template>

windi.config.ts

import  defineConfig  from 'windicss/helpers'

export default defineConfig(
  extract: 
    include: ['**/*.vue,html,jsx,tsx'],
    exclude: ['node_modules', '.git'],
  ,
  theme: 
    colors: 
      primary: '#5b0770',
    ,
  ,
)

【问题讨论】：

删除您的colors 键并设置通常的text-red-500 或使用您当前的配置尝试text-primary。

【参考方案1】：

您正在使用当前配置覆盖所有颜色。

而不是直接将colors: 设置在theme: 内

export default defineConfig(
...
theme: 
  colors: 
    primary: '#5b0770',
  ,
,

考虑将您的colors: 包装在extend: 内。

export default defineConfig(
...
theme: 
  extend: 
    colors: 
      primary: '#5b0770',
    ,
  ,
,

这将覆盖默认主题，而不是扩展默认主题。

这同样适用于其他主题选项（fontFamily、屏幕等...）

请参阅windicss-docs了解更多信息。