ineshbose
commented
2 months ago Hi, thanks for opening an issue on this repository.
I see you have a common/ directory that contains your styling classes. This isn't a standard Nuxt directory that the module would know about, so it's not added to the content configuration. You can fix this by adding this line to your nuxt.config:
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
devtools: { enabled: false },
modules: ['@nuxtjs/tailwindcss'],
+ tailwindcss: { config: { content: ['./common/**/*.ts'] }}
});
Environment
Darwinv20.8.03.9.33.10.02.8.1pnpm@8.15.1-ssr,modules,tailwindcss,shadcn,tiptap,experimental,colorMode,nitro,app,devtools,features,eslintConfig@vueuse/nuxt@10.7.2,@nuxtjs/tailwindcss@6.12.0,@pinia/nuxt@0.5.1,@nuxtjs/color-mode@3.3.2,@vite-pwa/nuxt@0.4.0,nuxt-module-eslint-config@0.0.2,shadcn-nuxt@0.9.0,nuxt-tiptap-editor@1.1.0-Reproduction
https://stackblitz.com/edit/nuxt-starter-8grvpb?file=app.vue
Describe the bug
Hello, I want to report a bug that is related to tailwind arbitrary class. In the example I shared below, I have dynamic class definition that will be resolved according to the status value. In this case, you can see that in
paidstatus, the bgColor isbg-[#d1fab3]. But after I specified the value directly, you can see that the color applied. I think this is a bug as The color should have been applied even before I directly use the bgColor value (without import).Attached video too here:
https://github.com/nuxt-modules/tailwindcss/assets/58819726/5d45f22d-29c9-4052-a57e-6c76f9207743
Additional context
No response
Logs