After configuring Elixir Phoenix to use Tailwind standalone, how do I enable tailwindcss/nesting?

Viewed 231

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

1 Answers
Related