tailwindcss.config.ts is not loaded in a nuxt 3 project.

[Gianthard-cyh]

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

1. Use the shadow-soft class in a Vue component:

<template>
  <div class="shadow-soft p-4 bg-white rounded">
    Test content
  </div>
</template>

2. Run the development server
3. 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

[wongjn]

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);
}

[Gianthard-cyh]

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

[wongjn]

You should generally use CSS configuration. @config is mainly for backwards compatibility and for your configuration, you don't need to use @config.

[Gianthard-cyh]

I see. Thank you!