nuxt-windicss

Windi CSS for Nuxt.js! ⚡️
^{Next generation utility-first CSS framework.}

Features

⚡️ It's FAST - 20~100x times faster than @nuxtjs/tailwindcss
🧩 On-demand CSS utilities (Compatible with Tailwind CSS v2) and native elements style resetting
🍃 Load configurations from tailwind.config.js
📄 Use @apply / @screen directives in any file: Vue SFC, Less, SCSS, SASS, PostCSS, Stylus
🎳 Support Utility Groups - e.g. bg-gray-200 hover:(bg-gray-100 text-red-300)
🧑‍🤝‍🧑 Works with @nuxt/vite & @nuxt/content

yarn add nuxt-windicss -D
# npm i nuxt-windicss -D

Within your nuxt.config.js add the following.

// nuxt.config.js
export default {
  buildModules: [
    'nuxt-windicss',
  ],
}

This module won't work with @nuxtjs/tailwindcss, you will need to remove it.

buildModules: [
-  '@nuxtjs/tailwindcss',
],

If you have a tailwind.config.js, please rename it to windi.config.js or windi.config.ts.

Follow the migration guide for other change details.

Read the documentation for more details.