Nuxt not reading the value of tailwind config

[fachryadhitya]

Environment

• Operating System: Darwin
• Node Version: v20.8.0
• Nuxt Version: 3.9.3
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.15.1
• Builder: -
• User Config: modules, shadcn, tiptap, experimental, nitro, app, devtools, features, eslintConfig
• Runtime Modules: @nuxtjs/tailwindcss@6.11.4, @vueuse/nuxt@10.7.2, @pinia/nuxt@0.5.1, @vite-pwa/nuxt@0.4.0, nuxt-module-eslint-config@0.0.2, shadcn-nuxt@0.9.0, nuxt-tiptap-editor@1.1.0
• Build Modules: -

Reproduction

No response

Describe the bug

Hello there 👋

First of all, thanks for making the integration of Tailwind and Nuxt so easy! I love this very much.

I have a question: I wanted to force my app to just use light mode. After setting the colorMode and preference to light, I can see the correct class=light value in the HTML head, but Tailwind still seems to be using the system preference when reading the class name, even though I have set the darkMode in the config to be class-based.

Then, I tried to check if Nuxt is correctly reading my config by creating a new custom color. Upon testing, I found that the color is not recognizable, which indicates that Nuxt is not reading my Tailwind configuration.

My question is: what might I have set incorrectly for Nuxt to not read my config correctly?

PS: I'm not changing the Tailwind config path in nuxt.config.js. I'm using the default file, which is tailwind.config.js.

Here's my full tailwind config

const animate = require("tailwindcss-animate");
const { blackA, green, grass, mauve } = require("@radix-ui/colors");

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: "class",
  content: [
    "./pages/**/*.{ts,tsx,vue}",
    "./components/**/*.{ts,tsx,vue}",
    "./app/**/*.{ts,tsx,vue}",
    "./src/**/*.{ts,tsx,vue}",
  ],
  theme: {
    container: {
      center: true,
      padding: "2rem",
      screens: {
        "2xl": "1400px",
      },
    },
    extend: {
      colors: {
        "green-primary": "#00A878",
        primary: "#3177FF",
        secondary: "#CCDDFF",
      },
      keyframes: {
        "accordion-down": {
          from: { height: 0 },
          to: { height: "var(--radix-accordion-content-height)" },
        },
        "accordion-up": {
          from: { height: "var(--radix-accordion-content-height)" },
          to: { height: 0 },
        },
      },
      animation: {
        "accordion-down": "accordion-down 0.2s ease-out",
        "accordion-up": "accordion-up 0.2s ease-out",
      },
    },
  },
  plugins: [animate],
};

Thank you very much!

Additional context

No response

Logs

No response

[ineshbose]

Could you share a screenshot of your Nuxt config and directory tree please?

[fachryadhitya]

Sure!

Nuxt Config

import { pwa } from "./config/pwa";
import { appDescription } from "./constants/index";

export default defineNuxtConfig({
  modules: [
    "@nuxtjs/tailwindcss",
    "@vueuse/nuxt",
    "@pinia/nuxt",
    "@nuxtjs/color-mode",
    "@vite-pwa/nuxt",
    "nuxt-module-eslint-config",
    "shadcn-nuxt",
    "nuxt-tiptap-editor",
  ],
  shadcn: {
    /**
     * Prefix for all the imported component
     */
    prefix: "",
    /**
     * Directory that the component lives in.
     * @default "./components/ui"
     */
    componentDir: "./components/ui",
  },
  tiptap: {
    prefix: "Tiptap", //prefix for Tiptap imports, composables not included
  },
  experimental: {
    // when using generate, payload js assets included in sw precache manifest
    // but missing on offline, disabling extraction it until fixed
    payloadExtraction: false,
    renderJsonPayloads: true,
    typedPages: true,
  },

  colorMode: {
    // classSuffix: "light",
    preference: "light",
  },

  nitro: {
    esbuild: {
      options: {
        target: "esnext",
      },
    },
    prerender: {
      crawlLinks: false,
      routes: ["/"],
      ignore: ["/hi"],
    },
  },

  app: {
    head: {
      viewport: "width=device-width,initial-scale=1",
      link: [
        { rel: "icon", href: "/favicon.ico", sizes: "any" },
        { rel: "icon", type: "image/svg+xml", href: "/nuxt.svg" },
        { rel: "apple-touch-icon", href: "/apple-touch-icon.png" },
      ],
      meta: [
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { name: "description", content: appDescription },
        {
          name: "apple-mobile-web-app-status-bar-style",
          content: "black-translucent",
        },
        {
          name: "theme-color",
          content: "#ffffff",
        },
        {
          name: "color-scheme",
          content: "light dark",
        },

        // {
        //   name: "theme-color",
        //   media: "(prefers-color-scheme: dark)",
        //   content: "#222222",
        // },
      ],
    },
  },

  // pwa,

  devtools: {
    enabled: true,
  },

  eslintConfig: {
    setup: false,
  },
});

[ineshbose]

Hmm.. do you have an assets/css/tailwind.css you could share contents of?

[fachryadhitya]

weird right.. oh it's actually just for testing purpose; I can safely delete it and it still wont read my nuxt config

the content is just this

@tailwind base;
@tailwind components;
@tailwind utilities;

[ineshbose]

Sorry - I'll triage this ASAP. Meanwhile, if you can help me help you faster, a web reproduction would be amazing!

https://stackblitz.com/github/nuxt-modules/tailwindcss/tree/docs-examples/examples/basic-usage

[fachryadhitya]

sorry its working now! found the issues in nuxt config, importing module that's somehow problematic. Will close this. Thank you!