require("tailwindcss/defaultTheme") points to AppData

[florian-lefebvre]

@nuxtjs/tailwindcss: ^4.0.1 nuxt: ^2.15.3

In my tailwindcss.config.js file, doing const defaultTheme = require("tailwindcss/defaultTheme"); points to C:/Users/USERNAME/AppData/Local/Microsoft/TypeScript/4.3/node_modules/@types/tailwindcss/defaultTheme. This was not really a problem for the defaultTheme but it was when importing colors, because it doesn't exist in my AppData. I thought it was because I didn't have the tailwindcss module so I installed it but it was still not working (version: ^2.0.4). As a workaround, I changed the path in my config file:

const defaultTheme = require("./node_modules/tailwindcss/defaultTheme");
const colors = require("./node_modules/tailwindcss/colors");

I think it should be written in the docs that to import colors, theme or whatever, the tailwindcss module must be installed. However, I still don't understand why require("tailwindcss") doesn't use the tailwindcss of my node_modules folder.

package.json

{
  "name": "nuxt",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "dev": "nuxt --port 3000",
    "build": "nuxt build --modern",
    "start": "nuxt start --port 55555",
    "generate": "nuxt generate",
    "analyze": "yarn build -a"
  },
  "dependencies": {
    "@nuxtjs/google-adsense": "^1.3.0",
    "@nuxtjs/strapi": "^0.3.0",
    "@nuxtjs/toast": "^3.3.1",
    "@nuxtjs/vercel-builder": "^0.20.3",
    "core-js": "^3.8.3",
    "node-fetch": "^2.6.1",
    "nuxt": "^2.15.3",
    "nuxt-i18n": "^6.20.1",
    "v-click-outside": "^3.1.2",
    "vue-clipboard2": "^0.3.1",
    "vue-country-flag": "^2.0.3"
  },
  "devDependencies": {
    "@nuxtjs/google-analytics": "^2.4.0",
    "@nuxtjs/google-fonts": "^1.2.0",
    "@nuxtjs/pwa": "^3.3.5",
    "@nuxtjs/tailwindcss": "^4.0.1",
    "@teamnovu/nuxt-breaky": "^1.2.2",
    "nuxt-vite": "^0.0.36",
    "postcss": "^8.2.8",
    "tailwindcss": "^2.0.4",
    "tailwindcss-textshadow": "^2.1.3"
  }
}

nuxt.config.js

import { theme } from "./tailwind.config.js";
import localesFetcher from "./lang/localesFetcher";

export default async function () {
  const locales = await localesFetcher();
  return {
    head: {
      title: "nuxt",
      htmlAttrs: {
        lang: "en",
        class: "custom-scrollbar"
      },
      meta: [
        { charset: "utf-8" },
        { name: "viewport", content: "width=device-width, initial-scale=1" },
        { hid: "description", name: "description", content: "" },
      ],
      link: [{ rel: "icon", type: "image/png", href: "/icon.png" }],
    },
    plugins: [
      // https://github.com/ndelvalle/v-click-outside
      "~/plugins/v-click-outside.js",
      // https://github.com/Inndy/vue-clipboard2
      "~/plugins/vue-clipboard2.js",
      // https://github.com/P3trur0/vue-country-flag
      "~/plugins/vue-country-flag.js",
      // https://i18n.nuxtjs.org/callbacks/
      "~/plugins/i18n.js",
    ],
    components: true,
    loading: false,
    build: {
      loaders: {
        limit: 0,
      },
    },
    buildModules: [
      // https://go.nuxtjs.dev/tailwindcss
      "@nuxtjs/tailwindcss",
      // https://go.nuxtjs.dev/pwa
      "@nuxtjs/pwa",
      // https://google-analytics.nuxtjs.org/
      "@nuxtjs/google-analytics",
      // https://vite.nuxtjs.org/
      // "nuxt-vite"
      // https://github.com/teamnovu/nuxt-breaky
      "@teamnovu/nuxt-breaky",
    ],
    modules: [
      // https://i18n.nuxtjs.org/
      "nuxt-i18n",
      // https://github.com/nuxt-community/google-adsense-module
      "@nuxtjs/google-adsense",
      // https://strapi.nuxtjs.org/
      "@nuxtjs/strapi",
      // https://github.com/nuxt-community/community-modules/tree/master/packages/toast
      "@nuxtjs/toast",
      // https://google-fonts.nuxtjs.org/
      "@nuxtjs/google-fonts",
    ],
    i18n: {
      baseUrl: process.env.BASE_URL || "http://localhost:3000",
      strategy: "prefix",
      locales,
      lazy: true,
      langDir: "lang/",
      defaultLocale: "en",
      vueI18n: {
        fallbackLocale: "en",
      },
      detectBrowserLanguage: {
        useCookie: true,
        cookieKey: "i18n_redirected",
        onlyOnRoot: true,
      },
    },
    "google-adsense": {
      // id: "ca-pub-#########"
    },
    strapi: {},
    toast: {
      position: "top-center",
      duration: 1000,
      theme: "tw",
    },
    pwa: {
      meta: {
        theme_color: theme.extend.colors.primary[500],
      },
    },
    tailwindcss: {
      jit: true,
      exposeConfig: true,
      viewer: false,
    },
    googleFonts: {
      families: {
        Poppins: [100, 200, 300, 400, 500, 600, 700, 800, 900],
      },
    },
    googleAnalytics: {
      dev: true,
    },
  };
}

[atinux]

Can you please try with v4.0.2? And re-open if it does not fix

[florian-lefebvre]

@Atinux It doesn't fix.