Plugin generated wrong classes

[florianbouvot]

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

v0.3.0

What version of Node.js are you using?

v17.7.1

What browser are you using?

Safari 15.4

What operating system are you using?

macOS

Reproduction repository

https://play.tailwindcss.com/kFPe1ZjEBx

Describe your issue

With aspect ratio plugin Tailwind CSS can generate classes like aspect-1 to aspect-16, I think it's a mistake or I don't understand the use case? 🤔

Thank you, Flo.

[adamwathan]

Hey! So what you are seeing here is a sort of conflict between the native aspect-ratio utilities in Tailwind 3 and the more legacy utilities generated by this plugin. They both read from the aspectRatio property in your theme, and this plugin overrides that property to be set to these values by default:

    theme: {
      aspectRatio: {
        1: '1',
        2: '2',
        3: '3',
        4: '4',
        5: '5',
        6: '6',
        7: '7',
        8: '8',
        9: '9',
        10: '10',
        11: '11',
        12: '12',
        13: '13',
        14: '14',
        15: '15',
        16: '16',
      },
    },

So what's happening is the native aspect-ratio utilities are also reading this config, and generating classes like aspect-1, which as you've mentioned is kinda useless.

The fix here is to disable the aspectRatio core plugin in your config so that only the plugin version is enabled:

https://play.tailwindcss.com/koaWjw6543

module.exports = {
  theme: {
    extend: {
      // ...
    },
  },
  corePlugins: {
    aspectRatio: false,
  },
  plugins: [
    require('@tailwindcss/aspect-ratio')
  ],
}

I'll update the README to recommend this 👍 It's possible we could just have the plugin do that for you even, but I would have to test how that works and make sure there's no unintended side effects, and since this plugin is just going to be used less and less over time I think a note in the README is probably enough.

[florianbouvot]

@adamwathan thank you ;)