[Vuejs]-Windicss classes doesn't work in Nuxt App

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.

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.