Unable to use plugins using the Tailwind CLI + JIT mode

[mbrodt]

What version of Tailwind CSS are you using?

2.2.4

What build tool (or framework if it abstracts the build tool) are you using?

Tailwind CLI, Nuxt 2.15.7

What version of Node.js are you using?

14.15.3

What browser are you using?

Chrome

What operating system are you using?

macOS

Reproduction repository

https://github.com/mbrodt/tailwind-plugin-issue

Describe your issue

Hey,

I'm using the Tailwind CLI to generate classes with JIT mode in a Nuxt project. With this setup, I'm unable to install and use the official Tailwind plugins (typography, aspect-ratio etc.). I'm getting the following error when adding the @tailwindcss/typography to my plugins array in tailwind.config.js:

(node:9827) UnhandledPromiseRejectionWarning: Error: Cannot find module 'tailwindcss/plugin'
Require stack:
- /Users/mbn/Desktop/tailwind-plugin-issue/node_modules/@tailwindcss/typography/src/index.js
- /Users/mbn/Desktop/tailwind-plugin-issue/tailwind.config.js
- /Users/mbn/.npm/_npx/9827/lib/node_modules/tailwindcss/lib/cli.js
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:880:15)
    at Function.Module._load (internal/modules/cjs/loader.js:725:27)
    at Module.require (internal/modules/cjs/loader.js:952:19)
    at require (internal/modules/cjs/helpers.js:88:18)
    at Object.<anonymous> (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/@tailwindcss/typography/src/index.js:1:16)
    at Module._compile (internal/modules/cjs/loader.js:1063:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1092:10)
    at Module.load (internal/modules/cjs/loader.js:928:32)
    at Function.Module._load (internal/modules/cjs/loader.js:769:14)
    at Module.require (internal/modules/cjs/loader.js:952:19)

A minimal reproduction is attached, with a barebones create-nuxt-app (WITHOUT using the @nuxt/tailwind module)
Note: I'm not using the official @nuxt/tailwindcss module as it has other issues related to HMR and JIT, and using the CLI to generate the styles has been working great up until I needed to add a plugin.

Thanks for the help, and let me know if you need more details.

[adamwathan]

Hey! The typography plugin has a peer dependency on the tailwindcss package so you'll have to actually install Tailwind locally in your project so the typography plugin can reference it:

npm install tailwindcss

After that everything should work. The issue is happening because using npx without installing Tailwind is just executing it without actually adding it to the project, so while it works great in isolation, the library isn't in node_modules for anything else that depends on it.

[mbrodt]

Thanks for the reply Adam! Installing Tailwind led to the next error below:

Error: PostCSS plugin postcss-nested requires PostCSS 8.
Migration guide for end-users:
https://github.com/postcss/postcss/wiki/PostCSS-8-for-end-users
    at Processor.normalize (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/postcss/lib/processor.js:167:15)
    at new Processor (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/postcss/lib/processor.js:56:25)
    at postcss (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/postcss/lib/postcss.js:55:10)
    at /Users/mbn/Desktop/tailwind-plugin-issue/node_modules/tailwindcss/lib/util/parseObjectStyles.js:24:33
    at arrayMap (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/lodash/lodash.js:653:23)
    at map (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/lodash/lodash.js:9622:14)
    at Function.flatMap (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/lodash/lodash.js:9325:26)
    at parseObjectStyles (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/tailwindcss/lib/util/parseObjectStyles.js:23:26)
    at parseObjectStyles (/Users/mbn/Desktop/tailwind-plugin-issue/node_modules/tailwindcss/lib/util/parseObjectStyles.js:20:12)
    at /Users/mbn/Desktop/tailwind-plugin-issue/node_modules/tailwindcss/lib/jit/lib/setupContextUtils.js:116:60

I then installed PostCSS v8.3.5, which gets everything working - except that PostCSS now screams at me that it's not actually doing anything (which I guess is wrong, as it got the Tailwind plugins working)

Anyways, maybe this issue is more related to Nuxt/PostCSS, or what do you think?

[adamwathan]

Yeah this seems like a configuration thing unfortunately, I'm not super familiar with Nuxt but I know they recommend using their @nuxt/tailwindcss module:

https://tailwindcss.nuxtjs.org/

Going to move this to discussions since as far as I can tell there's nothing for us to do on our end here, and probably just need to tweak the config to get it working the way you need.