Nuxt not reading the value of tailwind config

[fachryadhitya]

Nuxt not reading the value of tailwind config

[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!