Nuxt•7mo ago

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>

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

amonys19212

StackBlitz

Nuxt - Starter (forked) - StackBlitz

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

19 Replies

Smef•7mo ago

The stackblitz shows everything working properly

Smef•7mo ago

localhostess•7mo ago

I see the issue too. If you add a new page it won't apply the style. Only to existing pages for some reason

Smef•7mo ago

I reran dev and everything was good. It may just be a stackblitz issue

localhostess•7mo ago

@Ryän does it help if you add a tailwind config?

Smef•7mo ago

I think it just needs to be restarted after adding the new file so the new file gets added to the watch Hot reloading and everything is working fine for me locally once it detects the new file Adding the tailwind.config.js does let it detect the new files without needing a restart I do usually use one as well

export default {
    theme: {},
    plugins: [],
    content: [
        `/components/**/*.{vue,js,ts}`,
        `/layouts/**/*.vue`,
        `/pages/**/*.vue`,
        `/composables/**/*.{js,ts}`,
        `/plugins/**/*.{js,ts}`,
        `/utils/**/*.{js,ts}`,
        `/App.{js,ts,vue}`,
        `/app.{js,ts,vue}`,
        `/Error.{js,ts,vue}`,
        `/error.{js,ts,vue}`,
        `/app.config.{js,ts}`
    ]
}

export default {
    theme: {},
    plugins: [],
    content: [
        `/components/**/*.{vue,js,ts}`,
        `/layouts/**/*.vue`,
        `/pages/**/*.vue`,
        `/composables/**/*.{js,ts}`,
        `/plugins/**/*.{js,ts}`,
        `/utils/**/*.{js,ts}`,
        `/App.{js,ts,vue}`,
        `/app.{js,ts,vue}`,
        `/Error.{js,ts,vue}`,
        `/error.{js,ts,vue}`,
        `/app.config.{js,ts}`
    ]
}

RyänOP•7mo ago

I cannot get it to work with either the default settings or the following settings.

export default {
  content: [
    'components/**/*.{vue,js,ts}',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'composables/**/*.{js,ts}',
    'plugins/**/*.{js,ts}',
    'App.{js,ts,vue}',
    'app.{js,ts,vue}',
    'Error.{js,ts,vue}',
    'error.{js,ts,vue}',
    'content/**/*.md'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

export default {
  content: [
    'components/**/*.{vue,js,ts}',
    'layouts/**/*.vue',
    'pages/**/*.vue',
    'composables/**/*.{js,ts}',
    'plugins/**/*.{js,ts}',
    'App.{js,ts,vue}',
    'app.{js,ts,vue}',
    'Error.{js,ts,vue}',
    'error.{js,ts,vue}',
    'content/**/*.md'
  ],
  theme: {
    extend: {}
  },
  plugins: []
}

I encountered this issue during local development and then tested and reproduced it on Stackblitz. If you add a new page it won't apply the style. Only to existing pages for some reason

Smef•7mo ago

Can you try adding a tailwind.config.js? I saw that it didn't detect new pages without that

RyänOP•7mo ago

let me try your config

export default {
    theme: {},
    plugins: [],
    content: [
        `/components/**/*.{vue,js,ts}`,
        `/layouts/**/*.vue`,
        `/pages/**/*.vue`,
        `/composables/**/*.{js,ts}`,
        `/plugins/**/*.{js,ts}`,
        `/utils/**/*.{js,ts}`,
        `/App.{js,ts,vue}`,
        `/app.{js,ts,vue}`,
        `/Error.{js,ts,vue}`,
        `/error.{js,ts,vue}`,
        `/app.config.{js,ts}`
    ]
}

export default {
    theme: {},
    plugins: [],
    content: [
        `/components/**/*.{vue,js,ts}`,
        `/layouts/**/*.vue`,
        `/pages/**/*.vue`,
        `/composables/**/*.{js,ts}`,
        `/plugins/**/*.{js,ts}`,
        `/utils/**/*.{js,ts}`,
        `/App.{js,ts,vue}`,
        `/app.{js,ts,vue}`,
        `/Error.{js,ts,vue}`,
        `/error.{js,ts,vue}`,
        `/app.config.{js,ts}`
    ]
}

Using the config you provided, the same error still occurs. Perhaps, as you mentioned, it is not detecting the newly added page. You can try starting the project with npm run dev, then adding a new page and navigating to the route.

Smef•7mo ago

Yeah, it might just be a stackblitz thing, though It works fine locally Stackblitz has some stuff that just doesn't work I'm actually seeing it apply the classes, and then it gets removed so something weird is going on in stackblitz

RyänOP•7mo ago

I encountered this issue during local development. What other information can I provide to help you?

Smef•7mo ago

Hmm, yeah, I can see this as well Huh... I guess it just doesn't detect new pages until the server restart I've never even noticed that before ha I guess I just use a lot of the same classes

localhostess•7mo ago

maybe its the new version of tailwind

Smef•7mo ago

I'm using 3.4 I don't think that's it It makes sense that it wouldn't know new files are there by default

localhostess•7mo ago

i think its ok, its not part of the hmr workflow to add new pages alot

Smef•7mo ago

I did send a bad config, though It needs the preceeding .

export default {
    theme: {},
    plugins: [],
    content: [
        `./components/**/*.{vue,js,ts}`,
        `./layouts/**/*.vue`,
        `./pages/**/*.vue`,
        `./composables/**/*.{js,ts}`,
        `./plugins/**/*.{js,ts}`,
        `./utils/**/*.{js,ts}`,
        `./App.{js,ts,vue}`,
        `./app.{js,ts,vue}`,
        `./Error.{js,ts,vue}`,
        `./error.{js,ts,vue}`,
        `./app.config.{js,ts}`
    ]
}

export default {
    theme: {},
    plugins: [],
    content: [
        `./components/**/*.{vue,js,ts}`,
        `./layouts/**/*.vue`,
        `./pages/**/*.vue`,
        `./composables/**/*.{js,ts}`,
        `./plugins/**/*.{js,ts}`,
        `./utils/**/*.{js,ts}`,
        `./App.{js,ts,vue}`,
        `./app.{js,ts,vue}`,
        `./Error.{js,ts,vue}`,
        `./error.{js,ts,vue}`,
        `./app.config.{js,ts}`
    ]
}

RyänOP•7mo ago

I tried using an older version of the Tailwind CSS module, version 6.11.3, and everything worked fine, including new class names in newly added files. I believe the issue is caused by the new First HMR feature introduced in version 6.12.0. p.s. I mistakenly mentioned the problematic version as 3.12.0. The correct version is 6.12.0, which is causing the issue.

Orbviox•7mo ago

the content paths include the pages directory and that should trigger invalidation of tailwind cache - let me investigate!

Smef•7mo ago

I saw the sand thing with a manual tailwind install, so I don’t think it’s the module

Gaming

Programming

Tailwind CSS module unexpected style apply