I successfully followed Chris McCord's Tailwind Standalone for Phoenix instructions to add Tailwind.
But I want to enable the tailwindcss/nesting plugin. https://tailwindcss.com/docs/using-with-preprocessors says:
It’s included directly in the tailwindcss package itself, so to use it all you need to do is add it to your PostCSS configuration, somewhere before Tailwind…
But when I add the two require specifiers to my tailwind.config.js like this:
module.exports = {
content: [
'./js/**/*.js',
'../lib/*_web/**/*.*ex'
],
theme: {
extend: {
},
},
plugins: [
require('tailwindcss/nesting'),
require('tailwindcss'),
],
}
...I get (when I run mix phx.server):
node:internal/modules/cjs/loader:933
const err = new Error(message);
^
Error: Cannot find module 'tailwindcss/nesting'
Require stack:
- /Users/dspitzer/dev/from_github/ssauction_live_fly/assets/tailwind.config.js
- /snapshot/tailwindcss/lib/cli.js
- /snapshot/tailwindcss/standalone-cli/standalone.js
1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
So much for it being included in the tailwindcss package itself.
I noticed when I remote the tailwindcss/nesting plugin require from my tailwind.config.js:
module.exports = {
content: [
'./js/**/*.js',
'../lib/*_web/**/*.*ex'
],
theme: {
extend: {
},
},
plugins: [
require('tailwindcss'),
],
}
...I still get:
node:internal/modules/cjs/loader:933
const err = new Error(message);
^
Error: Cannot find module 'tailwindcss'
Require stack:
- /Users/dspitzer/dev/from_github/ssauction_live_fly/assets/tailwind.config.js
- /snapshot/tailwindcss/lib/cli.js
- /snapshot/tailwindcss/standalone-cli/standalone.js
1) If you want to compile the package/file into executable, please pay attention to compilation warnings and specify a literal in 'require' call. 2) If you don't want to compile the package/file into executable and want to 'require' it from filesystem (likely plugin), specify an absolute path in 'require' call using process.cwd() or process.execPath.
In case this helps:
$ which tailwindcss
/Users/dspitzer/bin/tailwindcss
$ tailwindcss --help
tailwindcss v3.0.7
Usage:
tailwindcss [--input input.css] [--output output.css] [--watch] [options...]
tailwindcss init [--full] [--postcss] [options...]
Commands:
init [options]
Options:
-i, --input Input file
-o, --output Output file
-w, --watch Watch for changes and rebuild as needed
--content Content paths to use for removing unused classes
--postcss Load custom PostCSS configuration
-m, --minify Minify the output
-c, --config Path to a custom config file
--no-autoprefixer Disable autoprefixer
-h, --help Display usage information
(I'm using macOS.)