-
-
Notifications
You must be signed in to change notification settings - Fork 4.8k
tailwindcss.config.ts is not loaded in a nuxt 3 project. #18753
-
Minimal Reproduction
https://github.com/Gianthard-cyh/nuxt-tailwind-issue
Environment
- Project Type : Nuxt 3 + Tailwind CSS (using Vite plugin)
- Tailwind CSS Version : 4.1.12
- Nuxt Version : 3.18.1
- Package Manager : pnpm
Current Configuration
tailwind.config.ts:
import type { Config } from 'tailwindcss' console.log("tailwindcss config loaded") export default <Config>{ content: [ './components/**/*.{js,vue,ts}', './layouts/**/*.vue', './pages/**/*.vue', './plugins/**/*.{js,ts}', './nuxt-app.{js,ts}', 'app.vue' ], theme: { extend: { boxShadow: { soft: '0 10px 20px 0 rgba (0, 0, 0, 0.05)', } } }, plugins: [], }
nuxt.config.ts:
import tailwindcss from "@tailwindcss/vite"; export default defineNuxtConfig({ compatibilityDate: '2025-07-15', devtools: { enabled: true }, css: [ '~/assets/css/tailwind.css', ], vite: { plugins: [ tailwindcss() ] }, })
Steps to Reproduce
- Use the shadow-soft class in a Vue component:
<template> <div class="shadow-soft p-4 bg-white rounded"> Test content </div> </template>
- Run the development server
- Observe that the shadow-soft css is not applied
Expected Behavior
The shadow-soft class should be compiled and apply the CSS rule:
.shadow-soft { box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05); }
Actual Behavior
- The .shadow-soft class definition is missing from the compiled CSS
- No shadow effect is visible on the element
- Browser dev tools show the class name but no associated styles
- Console did not show "tailwindcss config loaded", so the config file is not read
Beta Was this translation helpful? Give feedback.
All reactions
You are using Tailwind v4, and as such, it does not use a tailwind.config.ts file that you seem to be expecting. Rather, configuration is done in CSS. As per the documentation, to add a custom shadow theme token:
@import "tailwindcss"; @theme { --shadow-soft: 0 10px 20px 0 rgba (0, 0, 0, 0.05); }
Replies: 2 comments 2 replies
-
You are using Tailwind v4, and as such, it does not use a tailwind.config.ts file that you seem to be expecting. Rather, configuration is done in CSS. As per the documentation, to add a custom shadow theme token:
@import "tailwindcss"; @theme { --shadow-soft: 0 10px 20px 0 rgba (0, 0, 0, 0.05); }
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1
-
Solved by adding @config "../../tailwind.config.ts"; to my css file.
Thanks @wongjn for quick response!
https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file
Beta Was this translation helpful? Give feedback.
All reactions
-
You should generally use CSS configuration. @config is mainly for backwards compatibility and for your configuration, you don't need to use @config.
Beta Was this translation helpful? Give feedback.
All reactions
-
I see. Thank you!
Beta Was this translation helpful? Give feedback.