How do I enable tailwindcss/nesting in an Elixir Phoenix app?

Phoenix
1

I successfully followed Chris McCord’s Tailwind Standalone for Phoenix instructions to add Tailwind.

But I want to enable the tailwindcss/nesting plugin. Using with Preprocessors - Tailwind CSS 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 tried committing the tailwind.config.js changes above anyway and successfully ran fly deploy without error. But nested declarations didn’t work.

So my question is how do I enable tailwindcss/nesting in an Elixir Phoenix app on Fly.io?

2

Tailwind standalone won’t do plugins, except for some of theirs. But I guess not nesting.

Your best bet is to:

cd assets
npm install taildwindcss tailwindcss/nesting

Then add a few lines to your Dockerfile:

...

# install build dependencies
RUN apt-get update -y && apt-get install -y build-essential git npm \
    && apt-get clean && rm -f /var/lib/apt/lists/*_*

...

# Sadly, daisyui needs this
COPY assets/package*.json assets/
RUN npm --prefix ./assets ci --progress=false --no-audit --loglevel=error

COPY assets assets
COPY lib lib

# compile assets
RUN mix assets.deploy

...

I still use tailwind standalone locally, it seems to just work when you add the right npm modules. :smiley:

1 Like
3

Thanks @kurt. I decided it was simpler and easier to live without nesting.