tailwindcss: tailwind.config.js completely ignored

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?

About this issue

Original URL
State: closed
Created 2 years ago
Reactions: 1
Comments: 16 (2 by maintainers)

Commits related to this issue

fix: resolve config paths fully and warn on config errors Fixes #515 — committed to harlan-zw/tailwindcss-module-fork by harlan-zw 2 years ago

Most upvoted comments

Same problem here, extended colors dont work

SilvioDoMine on Aug 10, 2022

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]
    }
  }
}

varna on Aug 19, 2022

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

ngotoandev on Aug 17, 2022

@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.

izznatsir on Aug 14, 2022

@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 on Jul 28, 2022