windicss classes doesn't work in Nuxt App

Question

I got some issues with windicss. Classes don't apply on elements. I've tried to install an older version of windi and it still doesn't work. I've even tried to use tailwind instead of windi, but it's still not working.

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

You are overwriting all colors with your current config.

Instead of directly setting the colors: {} inside of theme: {}

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

Consider wrapping your colors: {} inside of an extend: {}.

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

This will, instead of overwriting the default theme, extend the default theme.

The same applies also to other theme options (fontFamily, screens, etc...)

Please refer to the windicss-docs for further information.

Answer 2

The first time you add a windi css style stop your dev server and start again, it will apply the styles and automatically start HMR for you.

Sometimes I also need to clear the cache rm -rf node_modules/.cache and restart the app, also make sure you're using the latest version.