Only works with nuxt-vite

[itpropro]

I think it is confusing that this plugin only works with nuxt-vite installed. I would like to use the nuxt-windicss module, but don't want to have nuxt-vite in all my project so I have to stay with the documented implementation (https://windicss.org/guide/vue.html#nuxt).
It would be great to also support nuxt installations besides nuxt-vite enabled ones.

To verify, I just tried to install it into an untouched npx create-nuxt-app app and it doesn't load windicss. As soon as I added nuxt-vite, everything started to work as expected.

[izundo-viennv]

Me too, I used it along with Vuetify, but it doesn't work. I don't know what I need to add more. This is my nuxt.config.js:

import minifyTheme from 'minify-css-string';

export default {
  /*
   ** Nuxt target
   ** See https://nuxtjs.org/api/configuration-target
   */
  target: 'server',

  /*
   ** Loading configuration
   ** See https://nuxtjs.org/api/configuration-loading
   */
  loading: false,
  /*
   ** Headers of the page
   ** See https://nuxtjs.org/api/configuration-head
   */
  head: {
    titleTemplate: '%s - Hello',
    title: 'Hello',
    htmlAttrs: { lang: 'en' },
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
    ],
    link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
  },
  /*
   ** Global CSS
   */
  css: [],
  /*
   ** Plugins to load before mounting the App
   ** https://nuxtjs.org/guide/plugins
   */
  plugins: ['~/plugins/vee-validate.ts'],
  /*
   ** Auto import components
   ** See https://nuxtjs.org/api/configuration-components
   */
  components: [{ path: '~/components', prefix: 's' }],
  /*
   ** Nuxt.js dev-modules
   */
  buildModules: ['@nuxt/typescript-build', '@nuxt/image', '@nuxtjs/vuetify', 'nuxt-windicss'],
  /*
   ** Nuxt.js modules
   */
  modules: [
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
   ** Public Runtime Config
   */
  publicRuntimeConfig: {
  },
  /*
   ** Private Runtime Config
   */
  privateRuntimeConfig: {},
  /*
   ** Axios module configuration
   ** See https://axios.nuxtjs.org/options
   */
  axios: {
    baseURL: process.env.API_ENDPOINT_URL,
  },
  /*
   ** Router configuration
   */
  router: {
  },
  /*
   ** Vuetify configuration
   ** See https://github.com/nuxt-community/vuetify-module
   */
  vuetify: {
    customVariables: ['~/assets/scss/vuetify.scss'],
    treeShake: true,
    defaultAssets: {
      icons: false,
    },
    theme: {
      themes: {
        light: {
          primary: {
            base: '#6415ff',
            100: '#e5d9ff',
            200: '#c5aaff',
            300: '#8344ff',
            400: '#742cff',
            500: '#6415ff',
            600: '#5a13e6',
            700: '#5011cc',
            800: '#460fb3',
            900: '#3c0d99',
            lighten4: '#e5d9ff',
            lighten3: '#c5aaff',
            lighten2: '#8344ff',
            lighten1: '#742cff',
            darken1: '#5a13e6',
            darken2: '#5011cc',
            darken3: '#460fb3',
            darken4: '#3c0d99',
          },
          secondary: {
            base: '#243E63',
            100: '#7c8ba1',
            200: '#667892',
            300: '#506582',
            400: '#3a5173',
            500: '#243E63',
            600: '#203859',
            700: '#1d324f',
            800: '#192b45',
            900: '#16253b',
            lighten4: '#7c8ba1',
            lighten3: '#667892',
            lighten2: '#506582',
            lighten1: '#3a5173',
            darken1: '#203859',
            darken2: '#1d324f',
            darken3: '#192b45',
            darken4: '#16253b',
          },
          error: {
            base: '#f56565',
            100: '#fff5f5',
            200: '#fed7d7',
            300: '#feb2b2',
            400: '#fc8181',
            500: '#f56565',
            600: '#e53e3e',
            700: '#c53030',
            800: '#9b2c2c',
            900: '#742a2a',
            lighten4: '#fff5f5',
            lighten3: '#fed7d7',
            lighten2: '#feb2b2',
            lighten1: '#fc8181',
            darken1: '#e53e3e',
            darken2: '#c53030',
            darken3: '#9b2c2c',
            darken4: '#742a2a',
          },
          info: {
            base: '#4299e1',
            100: '#ebf8ff',
            200: '#bee3f8',
            300: '#90cdf4',
            400: '#63b3ed',
            500: '#4299e1',
            600: '#3182ce',
            700: '#2b6cb0',
            800: '#2c5282',
            900: '#2a4365',
            lighten4: '#ebf8ff',
            lighten3: '#bee3f8',
            lighten2: '#90cdf4',
            lighten1: '#63b3ed',
            darken1: '#3182ce',
            darken2: '#2b6cb0',
            darken3: '#2c5282',
            darken4: '#2a4365',
          },
          success: {
            base: '#48bb78',
            100: '#f0fff4',
            200: '#c6f6d5',
            300: '#9ae6b4',
            400: '#68d391',
            500: '#48bb78',
            600: '#38a169',
            700: '#2f855a',
            800: '#276749',
            900: '#22543d',
            lighten4: '#f0fff4',
            lighten3: '#c6f6d5',
            lighten2: '#9ae6b4',
            lighten1: '#68d391',
            darken1: '#38a169',
            darken2: '#2f855a',
            darken3: '#276749',
            darken4: '#22543d',
          },
          warning: {
            base: '#ed8936',
            100: '#fffaf0',
            200: '#feebc8',
            300: '#fbd38d',
            400: '#f6ad55',
            500: '#ed8936',
            600: '#dd6b20',
            700: '#c05621',
            800: '#9c4221',
            900: '#7b341e',
            lighten4: '#fffaf0',
            lighten3: '#feebc8',
            lighten2: '#fbd38d',
            lighten1: '#f6ad55',
            darken1: '#dd6b20',
            darken2: '#c05621',
            darken3: '#9c4221',
            darken4: '#7b341e',
          },
        },
      },
      options: {
        minifyTheme,
      },
    },
  },
  /*
   ** Build configuration
   ** See https://nuxtjs.org/api/configuration-build/
   */
  build: {
    transpile: ['vee-validate/dist/rules'],
    analyze: false,
    extractCSS: {
      ignoreOrder: true,
    },
    optimizeCSS: true,
    html: {
      minify: {
        collapseBooleanAttributes: true,
        decodeEntities: true,
        minifyCSS: true,
        minifyJS: true,
        processConditionalComments: true,
        removeEmptyAttributes: true,
        removeRedundantAttributes: true,
        trimCustomFragments: true,
        useShortDoctype: true,
        preserveLineBreaks: false,
        collapseWhitespace: true,
      },
    },
  },
};

And this is tailwind.config.js

const typography = require('windicss/plugin/typography');
const forms = require('windicss/plugin/forms');
const aspectRatio = require('windicss/plugin/aspect-ratio');
const lineClamp = require('windicss/plugin/line-clamp');

module.exports = {
  prefix: 'tw-',
  darkMode: 'class',
  theme: {
    fontFamily: {
      sans: ['Roboto', 'sans-serif'],
    },
    colors: {
      transparent: 'transparent',
      black: '#000',
      white: '#fff',
      primary: {
        100: '#e5d9ff',
        200: '#c5aaff',
        300: '#8344ff',
        400: '#742cff',
        500: '#6415FF',
        600: '#5a13e6',
        700: '#5011cc',
        800: '#460fb3',
        900: '#3c0d99',
      },
      secondary: {
        100: '#7c8ba1',
        200: '#667892',
        300: '#506582',
        400: '#3a5173',
        500: '#243E63',
        600: '#203859',
        700: '#1d324f',
        800: '#192b45',
        900: '#16253b',
      },
      gray: {
        100: '#f7fafc',
        200: '#edf2f7',
        300: '#e2e8f0',
        400: '#cbd5e0',
        500: '#a0aec0',
        600: '#718096',
        700: '#4a5568',
        800: '#2d3748',
        900: '#1a202c',
      },
      red: {
        100: '#fff5f5',
        200: '#fed7d7',
        300: '#feb2b2',
        400: '#fc8181',
        500: '#f56565',
        600: '#e53e3e',
        700: '#c53030',
        800: '#9b2c2c',
        900: '#742a2a',
      },
      orange: {
        100: '#fffaf0',
        200: '#feebc8',
        300: '#fbd38d',
        400: '#f6ad55',
        500: '#ed8936',
        600: '#dd6b20',
        700: '#c05621',
        800: '#9c4221',
        900: '#7b341e',
      },
      yellow: {
        100: '#fffff0',
        200: '#fefcbf',
        300: '#faf089',
        400: '#f6e05e',
        500: '#ecc94b',
        600: '#d69e2e',
        700: '#b7791f',
        800: '#975a16',
        900: '#744210',
      },
      green: {
        100: '#f0fff4',
        200: '#c6f6d5',
        300: '#9ae6b4',
        400: '#68d391',
        500: '#48bb78',
        600: '#38a169',
        700: '#2f855a',
        800: '#276749',
        900: '#22543d',
      },
      teal: {
        100: '#e6fffa',
        200: '#b2f5ea',
        300: '#81e6d9',
        400: '#4fd1c5',
        500: '#38b2ac',
        600: '#319795',
        700: '#2c7a7b',
        800: '#285e61',
        900: '#234e52',
      },
      blue: {
        100: '#ebf8ff',
        200: '#bee3f8',
        300: '#90cdf4',
        400: '#63b3ed',
        500: '#4299e1',
        600: '#3182ce',
        700: '#2b6cb0',
        800: '#2c5282',
        900: '#2a4365',
      },
      indigo: {
        100: '#ebf4ff',
        200: '#c3dafe',
        300: '#a3bffa',
        400: '#7f9cf5',
        500: '#667eea',
        600: '#5a67d8',
        700: '#4c51bf',
        800: '#434190',
        900: '#3c366b',
      },
      purple: {
        100: '#faf5ff',
        200: '#e9d8fd',
        300: '#d6bcfa',
        400: '#b794f4',
        500: '#9f7aea',
        600: '#805ad5',
        700: '#6b46c1',
        800: '#553c9a',
        900: '#44337a',
      },
      pink: {
        100: '#fff5f7',
        200: '#fed7e2',
        300: '#fbb6ce',
        400: '#f687b3',
        500: '#ed64a6',
        600: '#d53f8c',
        700: '#b83280',
        800: '#97266d',
        900: '#702459',
      },
    },
  },
  variants: {},
  plugins: [typography, forms, aspectRatio, lineClamp],
};

[harlan-zw]

I think it is confusing that this plugin only works with nuxt-vite installed. I would like to use the nuxt-windicss module, but don't want to have nuxt-vite in all my project so I have to stay with the documented implementation (https://windicss.org/guide/vue.html#nuxt).
It would be great to also support nuxt installations besides nuxt-vite enabled ones.

To verify, I just tried to install it into an untouched npx create-nuxt-app app and it doesn't load windicss. As soon as I added nuxt-vite, everything started to work as expected.

Hey @itpropro

The nxut module should have first class webpack support, i'm the author of the webpack windicss plugin as well.

I've noticed sometimes the initial HMR won't be working for a new project, sometimes I need to clear the cache rm -rf node_modules/.cache and restart the app, also make sure you're using the latest version. If that doesn't fix it then can you share a reproduction repo or your configs.

Thanks

[harlan-zw]

Me too, I used it along with Vuetify, but it doesn't work. I don't know what I need to add more. This is my nuxt.config.js:

Hi @izundo-viennv, I've moved this to a new issue

[rashidpathiyil]

Why this is not working with Nuxt @ v2.15.3.

Need typescript support?

[itpropro]

I think it is confusing that this plugin only works with nuxt-vite installed. I would like to use the nuxt-windicss module, but don't want to have nuxt-vite in all my project so I have to stay with the documented implementation (https://windicss.org/guide/vue.html#nuxt).
It would be great to also support nuxt installations besides nuxt-vite enabled ones.
To verify, I just tried to install it into an untouched npx create-nuxt-app app and it doesn't load windicss. As soon as I added nuxt-vite, everything started to work as expected.

Hey @itpropro

The nxut module should have first class webpack support, i'm the author of the webpack windicss plugin as well.

I've noticed sometimes the initial HMR won't be working for a new project, sometimes I need to clear the cache rm -rf node_modules/.cache and restart the app, also make sure you're using the latest version. If that doesn't fix it then can you share a reproduction repo or your configs.

Thanks

Hey,
I have literally created a completely new Nuxt application with npx and just added the nuxt-windicss-module package.
I also added it to other projects where I regularly clear the complete node_modules folder. I was not able to create any configuration either with an existing or a new project where the module works without vite installed.

[itpropro]

@harlan-zw I just created a repository to reproduce the issue. No css is generated except for the @apply styles.
https://github.com/itpropro/nuxt-windicss

[harlan-zw]

@harlan-zw I just created a repository to reproduce the issue. No css is generated except for the @apply styles.
https://github.com/itpropro/nuxt-windicss

Hey @itpropro

I cloned the repo, did yarn and yarn dev and this is what I get.

/* windicss(boot) */
*, ::before, ::after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}
* {
  --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
  --tw-ring-offset-width: 0px;
  --tw-ring-offset-color: #fff;
  --tw-ring-color: rgba(59, 130, 246, 0.5);
  --tw-ring-offset-shadow: 0 0 #0000;
  --tw-ring-shadow: 0 0 #0000;
  --tw-shadow: 0 0 #0000;
}
:root {
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
}
:-moz-focusring {
  outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
  box-shadow: none;
}
::moz-focus-inner {
  border-style: none;
  padding: 0;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
  height: auto;
}
::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}
[type='search'] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}
abbr[title] {
  -webkit-text-decoration: underline dotted;
  text-decoration: underline dotted;
}
body {
  margin: 0;
  font-family: inherit;
  line-height: inherit;
}
html {
  -webkit-text-size-adjust: 100%;
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height: 1.5;
}
a {
  color: inherit;
  text-decoration: inherit;
}
h1 {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}
svg {
  display: block;
  vertical-align: middle;
}
.container {
  width: 100%;
}
.space-y-1 > :not([hidden]) ~ :not([hidden]) {
  --tw-space-y-reverse: 0;
  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-y-reverse: 0;
  border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
  border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-cyan-800 > :not([hidden]) ~ :not([hidden]) {
  --tw-divide-opacity: 1;
  border-color: rgba(21, 94, 117, var(--tw-divide-opacity));
}
.bg-cool-gray-900 {
  --tw-bg-opacity: 1;
  background-color: rgba(17, 24, 39, var(--tw-bg-opacity));
}
.bg-gray-100 {
  --tw-bg-opacity: 1;
  background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
.rounded-lg {
  border-radius: 0.5rem;
}
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex-col {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  -webkit-flex-direction: column;
  flex-direction: column;
}
.items-center {
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.flex-1 {
  -webkit-box-flex: 1;
  -ms-flex: 1 1 0%;
  -webkit-flex: 1 1 0%;
  flex: 1 1 0%;
}
.flex-shrink-0 {
  -ms-flex-negative: 0;
  -webkit-flex-shrink: 0;
  flex-shrink: 0;
}
.font-sans {
  font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
}
.font-normal {
  font-weight: 400;
}
.h-screen {
  height: 100vh;
}
.h-full {
  height: 100%;
}
.text-sm {
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.leading-10 {
  line-height: 2.5rem;
}
.mt-5 {
  margin-top: 1.25rem;
}
.mb-24 {
  margin-bottom: 6rem;
}
.overflow-hidden {
  overflow: hidden;
}
.overflow-y-auto {
  overflow-y: auto;
}
.overflow-y-scroll {
  overflow-y: scroll;
}
.py-5 {
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}
.py-3 {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}
.px-2 {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.px-8 {
  padding-left: 2rem;
  padding-right: 2rem;
}
.pt-6 {
  padding-top: 1.5rem;
}
.absolute {
  position: absolute;
}
.relative {
  position: relative;
}
.left-10 {
  left: 2.5rem;
}
.w-64 {
  width: 16rem;
}
.w-full {
  width: 100%;
}
@media (min-width: 640px) {
  .container {
    max-width: 640px;
  }
}
@media (min-width: 768px) {
  .container {
    max-width: 768px;
  }
}
@media (min-width: 1024px) {
  .container {
    max-width: 1024px;
  }
}
@media (min-width: 1280px) {
  .container {
    max-width: 1280px;
  }
}
@media (min-width: 1536px) {
  .container {
    max-width: 1536px;
  }
}

This looks correct to me, is it doing something different for you locally?

What node version are you using 🤔

[itpropro]

Hey,
thanks for testing, I use Windows 10 with Node 14.15.3. When I just use yarn and yarn dev, I get this result:

I just tested multiple browsers, but that doesn't make a difference. The stylesheet for the Sidebar only contains this

.menu-selected {
  --tw-bg-opacity: 1;
  background-color: rgba(21, 94, 117, var(--tw-bg-opacity));
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.menu-default {
  --tw-text-opacity: 1;
  color: rgba(207, 250, 254, var(--tw-text-opacity));
}
.menu-default:hover {
  --tw-text-opacity: 1;
  color: rgba(255, 255, 255, var(--tw-text-opacity));
  --tw-bg-opacity: 1;
  background-color: rgba(8, 145, 178, var(--tw-bg-opacity));
}

And there are no other stylesheets loaded:

[harlan-zw]

Thanks for your help debugging this one @itpropro. I was able to replicate it and it should now be fixed within version 0.4.4.

Let me know you go, please re-open if there are still issues.

[itpropro]

Wow, thanks for the support @harlan-zw , much better already, but I am still missing some styles:

Here is the diff between my css and your posted one:
flex-row and bg-cyan missing here

text-white missing here

EDIT: Completely deleted and re-cloned the repo and upgraded all packages and it's fixed, deleting node_modules wasn't enough for some reason, thanks again ❤️

[chaderenyore]

I don't know about using it with Vuetify but 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.