Tailwind CSS module unexpected style apply

Hi everyone,

I'm facing an issue with using Tailwind CSS in my project. My setup includes Nuxt 3.12.2, and I'm using the @nuxtjs/tailwindcss module version 6.12.0, both of which are the latest versions.

When I create a new page [test.vue] under the pages directory and add Tailwind CSS class names, HMR allows me to view the /test page. However, the Tailwind CSS styles are not being applied.

test.vue

<template>
  <div class="text-red-500">test</div>
</template>

<template>
  <div class="text-red-500">test</div>
</template>

<template>
  <div class="text-red-500">test</div>
</template>

<template>
  <div class="text-red-500">test</div>
</template>

This problem only occurs when I add a new file and use Tailwind CSS class names that haven't been used before.

I would like to ask if I've done something wrong or missed any settings. Thank.

demo:
https://stackblitz.com/edit/nuxt-starter-dttqi3

StackBlitzamonys19212

Nuxt - Starter (forked) - StackBlitz

Create a new Nuxt project, module, layer or start from a theme with our collection of starters.

Tailwind CSS module unexpected style apply

Similar Threads

Similar Threads

Similar Threads