Failed to load Tailwind config at: ./tailwind.config.js Cannot find module 'tailwindcss/plugin'

This issue has been tracked since 2022-10-19.

Starting from nuxtjs/tailwindcss 6, you can no longer use CJS syntax in tailwind.config.js. You have the following options:

  1. Rename the config to tailwind.config.cjs, set tailwindcss.configPath to tailwind.config.cjs in module options and set VSCode setting "tailwindCSS.experimental.configFile": "tailwind.config.cjs"
  2. Switch to using ESM syntax, and set VSCode setting "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs"
  3. Switch to TypeScript (nuxt.config.ts), and set VSCode setting "tailwindCSS.experimental.configFile": ".nuxt/tailwind.config.cjs".

I would personally recommend option 3 if you are using TypeScript and option 2 otherwise.

Sample config:

// Before:
module.exports = {
	theme: {
		extend: {},
	},
	plugins: [
		require('@tailwindcss/forms'),
		require('@tailwindcss/typography'),
	],
	darkMode: 'class',
}

// After (with TypeScript):
import type { Config } from 'tailwindcss'
import Forms from '@tailwindcss/forms'
import Typography from '@tailwindcss/typography'

export default <Partial<Config>>{
	theme: {
		extend: {},
	},
	plugins: [Forms(), Typography()],
	darkMode: 'class',
}
P4sca1 wrote this answer on 2022-10-20

This is a side-effect of #535. I suggest updating docs and adding a note in the changelog.

More Details About Repo
Owner Name nuxt-modules
Repo Name tailwindcss
Full Name nuxt-modules/tailwindcss
Language TypeScript
Created Date 2019-04-04
Updated Date 2023-03-29
Star Count 1285
Watcher Count 12
Fork Count 157
Issue Count 57

YOU MAY BE INTERESTED

Issue Title Created Date Updated Date