tailwind.config.js completely ignored

[teegee]

Version

@nuxtjs/tailwindcss: v5.3.1 nuxt: v3.0.0-rc6

After upgrading my nuxt blog to v3 (+content and image modules), the only thing that is still completely broken is styling. I found out that my tailwind.config.js is not being used at all. If I introduce a syntax error in the file on purpose, nuxt dev server still starts without a problem (except the broken styling). It doesn't matter if I explicitly configure the config path with tailwindcss: { configPath: '~/tailwind.config.js' } or not (as per issue #500).

The nuxt v2 version works fine with the same @nuxtjs/tailwindcss version.

Any ideas on how I could debug this?

[teegee]

Postscript: it seems introducing deliberate syntax errors is not a good way to test if the config file is being ignored, because in nuxt v2 the same syntax error is also not reported anywhere. It just silently doesn't work anymore. For reference, my config file is pasted below, including syntax error opening bracket on line 2.

It is possible that only the typography styling is being ignored -- I don't know how to find out if any section of this file is being used..

module.exports = {
{
  content: [
    './assets/**/*.{vue,js,css}',
    './components/**/*.{vue,js}',
    './layouts/**/*.vue',
    './pages/**/*.vue',
    './plugins/**/*.{js,ts}',
    './nuxt.config.{js,ts}',
    app.vue
  ],
  theme: {
    extend: {
      screens: {
        'print': {'raw': 'print'},
      },
      typography: {
        DEFAULT: {
          css: {
            color: '#333',
            lineHeight: '1.5',
            maxWidth: '900px',
            fontSize: '15px',
            h1: {
              borderBottom: '2px solid cadetblue',
            },
            h2: {
              marginBottom: '0.5em',
              marginTop: '0.5em',
              borderBottom: '2px solid cadetblue',
            },
            li: {
              marginBottom: '0',
              marginTop: '0',
            },
            'ul > li': {
              paddingLeft: '1.25em'
            },
            'ul > li::before': {
              width: '0.25em',
              height: '0.25em',
            },
            img: {
              marginTop: '0',
              marginBottom: '0',
            },
            table: {
              marginTop: '0.5em',
              marginBottom: '0.5em',
            },
            'thead th:first-child': {
              paddingLeft: '0.5em',
            },
            'tbody td': {
              paddingTop: '0.3em',
              paddingBottom: '0.3em',
            },
          },
        },
      }
    },
  },
  variants: {
    extend: {},
  },
  plugins: [
    require(`@tailwindcss/typography`)
  ]
}

[mahapo]

@teegee I have the same issue. @tailwindcss/typography plugin will completely ignored. All other plugins works

  plugins: [
    require('daisyui'),
    require('@tailwindcss/typography'),
    require('@tailwindcss/line-clamp'),
    require('@formkit/themes/tailwindcss'),
  ],

@nuxtjs/tailwindcss: v5.3.1 nuxt: v3.0.0-rc6

[mahapo]

This two example also don't work for typography plugin https://tailwindcss.nuxtjs.org/tailwind/config#tailwindcssconfig-hook https://tailwindcss.nuxtjs.org/tailwind/config#config-option

[teemualap]

I messed up my module declaration order in nuxt config. Nothing to see here :)

[SilvioDoMine]

Same problem here, extended colors dont work

[ugurarici]

Yeah having same problem now. Infact it was working at the morning, I changed literally nothing, even rolled back all my changes on git repository but it's not taking account my tailwind config file. Any suggestions?

Ok now I found something. On my VS Code I use an extension named Tailwind CSS IntelliSense and it gives an error when I update my tailwind.config.js file.

Here is the error:

[Error - 14:35:54] Tailwind CSS: defaultTheme is not defined
ReferenceError: defaultTheme is not defined
    at Object.<anonymous> (/Users/myusername/projectpath/tailwind.config.js:15:53)
    at Module._compile (node:internal/modules/cjs/loader:1163:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1216:10)
    at Module.load (node:internal/modules/cjs/loader:1035:32)
    at Module._load (node:internal/modules/cjs/loader:876:12)
    at Function.c._load (node:electron/js2c/asar_bundle:5:13343)
    at Module.require (node:internal/modules/cjs/loader:1059:19)
    at Module.Vd._require.Gi.default.require (/Users/myusername/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.6/dist/tailwindServer.js:179:63908)
    at require (node:internal/modules/cjs/helpers:102:18)
    at /Users/myusername/.vscode/extensions/bradlc.vscode-tailwindcss-0.8.6/dist/tailwindServer.js:690:9893

So the only place I used defaultTheme is fontFamily config. Here it is;

fontFamily: {
    sans: ["Roboto", ...defaultTheme.fontFamily.sans],
},

When I delete the ...defaultTheme.fontFamily.sans part config is loading nicely, but of course when we want to extend the default config we need to access defaultTheme. I don't understand why it's not working. I think for now I will manually add the parts of the remaining ...defaultTheme.fontFamily.sans data but need to find a fix for this.

[SilvioDoMine]

I only use extends on my tailwind.config.js and still gets errors.

I don't get errors when I'm using tailwind configs directly in the nuxt.config.js, so this can be a workaround for those with problems.

[izznat]

@ugurarici You need to import the defaultTheme object first:

const defaultTheme = require('tailwindcss/defaultTheme')

Also make sure tailwindcss npm package is installed as dev dependency.

[ngotoandev]

confirmed issue - custom colors don't work, tailwind config file is completely ignored.

"@nuxtjs/tailwindcss": "^5.3.2",
"nuxt": "3.0.0-rc.8"

[ngotoandev]

For anyone that encounters this issue, the temporary fix is transferring the config file into nuxt.conf.js instead:

<nuxt.conf.js>

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    tailwindcss: {
        config: {
           ... <tailwind.conf.js goes here> ...
        }
    }
});

[varna]

For anyone that encounters this issue, the temporary fix is transferring the config file into nuxt.conf.js instead:

<nuxt.conf.js>

export default defineNuxtConfig({
    modules: ['@nuxtjs/tailwindcss'],
    tailwindcss: {
        config: {
           ... <tailwind.conf.js goes here> ...
        }
    }
});

And here is a TS version of nuxt.config.ts:

import tailwindTypography from '@tailwindcss/typography'
import tailwindForms from '@tailwindcss/forms'

export default {
  modules: ['@nuxtjs/tailwindcss'],
  tailwindcss: {
    config: {
      plugins: [tailwindTypography, tailwindForms]
    }
  }
}

[atinux]

Can you please provide a minimum reproduction using Stackblitz?

[schneggal]

i had the same issue, that the tailwind.config was ignored.

my problem was a false structure in my tailwind.config. if there is any mistake all my custom configurations are ignored without an error again.

[atinux]

Is this something we could solve @harlan-zw ?

[harlan-zw]

I'm guessing this is related to this line: https://github.com/nuxt-modules/tailwindcss/blob/main/src/module.ts#L119

With tryRequireModule any errors in passing the file will be silent. I believe TS files would also have this issue but the type-checker will probably catch anything for you.

I was going to jump into it further but got blocked on having the tests working so I could fix these things without regression, PR for that is here: https://github.com/nuxt-modules/tailwindcss/pull/521

May have a chance to look into it further soon.

[harlan-zw]

So the above is one error, the other error is the code that was added to remove the extension when reading the config: https://github.com/nuxt-modules/tailwindcss/blob/main/src/module.ts#L81

Previously the default config would resolve from tailwind.config correctly but this line changed it to resolve as just tailwind, which isn't valid.

PR