windicss类在Nuxt应用程序中不起作用

Question

我和温德索斯有点问题。类不适用于元素。我试图安装一个旧版本的windi，但它仍然不能工作。我甚至尝试使用顺风而不是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',
    },
  },
})

Answer 1

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

不是直接使用，而是在theme: {}中设置colors: {}

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

考虑将colors: {}包装在extend: {}中的。

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

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

这同样适用于其他主题选项(fontFamily、screens等)

有关更多信息，请参阅windicss-docs。