Tailwind CSS Intelisense gets a bit confused about the context of the config

[krainboltgreene]

Describe the bug

[assets/tailwind.config.js] Building...
[Error - 10:43:41 PM] Tailwind CSS: Can't resolve 'tailwindcss/plugin' in '/Users/krainboltgreene/Code/project/ept/assets'
Error: Can't resolve 'tailwindcss/plugin' in '/Users/krainboltgreene/Code/project/ept/assets'
    at d (/Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:130:7139)
    at /Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:131:713
    at /Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:134:401
    at eval (eval at create (/Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:5:78), <anonymous>:15:1)
    at /Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:134:401
    at eval (eval at create (/Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:5:78), <anonymous>:27:1)
    at /Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:134:7648
    at /Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:134:401
    at eval (eval at create (/Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:5:78), <anonymous>:15:1)
    at /Users/krainboltgreene/.vscode/extensions/bradlc.vscode-tailwindcss-0.10.5/dist/tailwindServer.js:134:401

To Reproduce Basic tailwind configuration with tails colors configuration. I've managed to narrow down that the:

const { extract } = require('../deps/tailwind_formatter/assets/js')
...
extract(module.exports, '../_build')

Is what breaks it.

Expected behavior The extension works.

Runtime

• Elixir version: Latest
• Erlang version: Latest
• OS: MacOS
• Tails version: Latest

[zachdaniel]

I'm not sure I see a connection with tails here... those two lines you mentioned don't seem to have anything to do with tails?

[krainboltgreene]

When I add the tails suggested color extraction code to my tailwind.config.js the intellisense extension blows up with the above exception.

[zachdaniel]

Ah, interesting. Thats pretty strange. And you can confirm that removing colors: require("./tailwind.colors.json") resolves the issue? Can I see your full config?

[krainboltgreene]

And you can confirm that removing colors: require("./tailwind.colors.json") resolves the issue?

It's specifically the const { extract } = require('../deps/tailwind_formatter/assets/js') require, not the color require.

Can I see your full config?

Yes, I can also do a screensharing session.

// See the Tailwind configuration guide for advanced usage
// https://tailwindcss.com/docs/configuration

const plugin = require('tailwindcss/plugin')
const defaultTheme = require('tailwindcss/defaultTheme')
// const { extract } = require('../deps/tailwind_formatter/assets/js')

module.exports = {
  content: ['./js/**/*.js', '../lib/core_web.ex', '../lib/core_web/**/*.*ex'],
  theme: {
    extend: {
      textShadow: {
        sm: '0 1px 2px var(--tw-shadow-color)',
        DEFAULT: '0 2px 4px var(--tw-shadow-color)',
        lg: '0 8px 16px var(--tw-shadow-color)',
        xl: '0 16px 32px var(--tw-shadow-color)',
        brand:
          '0 1px 2px var(--tw-shadow-color), 0 2px 4px var(--tw-shadow-color), 0 16px 32px var(--tw-shadow-color)'
      },
      colors: require('./tailwind.colors.json'),
      fontFamily: {
        sans: ['Satoshi', ...defaultTheme.fontFamily.sans],
        brand: ['Satoshi', ...defaultTheme.fontFamily.sans]
      }
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    // Allows prefixing tailwind classes with LiveView classes to add rules
    // only when LiveView classes are applied, for example:
    //
    //     <div class="phx-click-loading:animate-ping">
    //
    plugin(({ addVariant }) =>
      addVariant('phx-no-feedback', [
        '.phx-no-feedback&',
        '.phx-no-feedback &'
      ])
    ),
    plugin(({ addVariant }) =>
      addVariant('phx-click-loading', [
        '.phx-click-loading&',
        '.phx-click-loading &'
      ])
    ),
    plugin(({ addVariant }) =>
      addVariant('phx-submit-loading', [
        '.phx-submit-loading&',
        '.phx-submit-loading &'
      ])
    ),
    plugin(({ addVariant }) =>
      addVariant('phx-change-loading', [
        '.phx-change-loading&',
        '.phx-change-loading &'
      ])
    ),
    plugin(function ({ matchUtilities, theme }) {
      matchUtilities(
        {
          'text-shadow': (value) => ({
            textShadow: value
          })
        },
        { values: theme('textShadow') }
      )
    })
  ]
}
// extract(module.exports, '../_build')

[krainboltgreene]

I fully accept this might be out of the realm of fixability for tails, btw.

[zachdaniel]

The only thing that we say to do in our guide is:

// in tailwind.config.js
module.exports = {
  mode: "jit",
  content: ["./js/**/*.js", "../lib/*_web/**/*.*ex"],
  darkMode: "class",
  theme: {
    extend: {
      colors: require("./tailwind.colors.json") // <- and this is the only bit that we're really talking about
    },
  }
};

So I'm not sure how this: // const { extract } = require('../deps/tailwind_formatter/assets/js') has anything to do with tails.

Are you looking for tailwind_formatter perhaps?

[krainboltgreene]

...buh. I'm actually baffled. This is so embarrassing! Yes it seems I confused the source of this change.

[zachdaniel]

No worries, have a good one!