Tailwind CSS classes not imported to CSS without nuxt restart

Environment

Nuxt CLI v3.0.0-rc.8
Nuxt project info:

---

• Operating System: Linux
• Node Version: v18.6.0
• Nuxt Version: 3.0.0-rc.8
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: build, runtimeConfig
• Runtime Modules: -
• Build Modules: -

---

Reproduction

<template>
 <div class="">test</div>
</template>

then change it to

<template>
 <div class="p-5">test</div>
</template>

and save your file.

Describe the bug

Nuxt server will reload but the CSS for p-5 is not shown in the browser.

Additional context

No response

Logs

✔ Vite server built in 500ms

[bf]

Okay, I was missing the “buildModules” option in my nuxt config.

New nuxt config which works:

import { defineNuxtConfig } from 'nuxt'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  build: {
    transpile: ['@heroicons/vue'],
    postcss: {
      postcssOptions: {
        plugins: {
          tailwindcss: {},
          autoprefixer: {},
        },
      },
    },
  },
  buildModules: ['@nuxtjs/tailwindcss'],
  runtimeConfig: {
    cookieName: '__session',
    cookieSecret:'foo'
  },
});

@Joaojack thanks for your kind help!

[Joaojack]

If i were you I would try to uninstall tailwindcss and install @nuxtjs/tailwindcss in devDependencies. Works flawlessly with Nuxt 3. https://tailwindcss.nuxtjs.org/ Config is good as it is (if you had a tailwind.config.js you can keep it too).

BTW i think you can keep everything in devDependencies now, that’s what i do since this discussion