Utilities not always getting compiled when using multiple config files

[robdekort]

What version of @tailwindcss/aspect-ratio are you using?

v0.4.0

What version of Node.js are you using?

v17.1.0

What browser are you using?

Safari

What operating system are you using?

macOS

Reproduction repository

https://github.com/robdekort/aspect-plugin-issue

Describe your issue

The issue I have started out as a discussion here.

In TW v3 I'm having issues getting (plugin based) aspect utilities compiled.

Reproduce

1. Clone repo
2. Run npm i && npm run watch

Note that the aspect-w-, aspect-h- are not being compiled into site.css. They only get compiled when you require the Aspect Ratio plugin in tailwind.config.2.js

Funny thing is this is isn't an issue with the form plugin. That one works wherever I require it. This wasn't an issue for me in v2. Could this be a bug or was it never intended to work like this?

[iuscare]

Seems I am facing a similar issue. Multiple tailwindcss configs, merged via the preset theme option and since upgrade to tailwind v3 aspect ratio plugin does not work anymore. Updated aspect ratio plugin aswell.

[thecrypticace]

Hey, we agree the behavior around this is definitely weird. Properly fixing this is a breaking change so we can't fix this until v4 but likely will. You can however workaround this issue by adding a presets: [] key to tailwind.config.2.js. The reasoning for this is that every preset extends the default config by default. When you include multiple presets the default config included implicitly in the second preset is overwriting the aspect ratio values from the plugin in the earlier preset.

[robdekort]

Hey thanks for your reply. Really appreciate it. It does make sense now why this happens. I'm gonna have to dive into your proposed solution. Not quite sure what you mean, but I noticed theres some docs on in it.

Thanks!

[adamwathan]

Hey @robdekort! Basically you just have to add this to tailwind.config.2.js:

module.exports = {
  presets: [],
  theme: {
    colors: {
    },
  }
}

This will remove the implicit default config from that preset, so that the aspect ratio values in the default config don't override the aspect ratio values added in tailwind.config.1.js by the aspect ratio plugin.

[robdekort]

Adam, you're a champ. This makes sense and I learned :-)

Thank you!