How i can custom adaptive midea variants

[root9464]

I have a record like this

@custom-variant max-h-680 (@media (max-height: 680px));
@custom-variant max-h-680 {
  @media (max-height: 680px) {
    @slot;
  }
}

how can I improve it so that I can write @max-h-[value] for example @max-h-[680px] and it works with dynamic values

[wongjn]

There is currently no CSS API for registering custom dynamic variants. However, we can utilize the legacy JavaScript system to do this via matchVariant().

Have a JavaScript file as follows:

// plugin.js

const plugin = require('tailwindcss/plugin');

module.exports = plugin(({ matchVariant }) => {
  matchVariant('@max-h', value => `@media (max-height: ${value})`);
});

In your input CSS file:

@import "tailwindcss";

@plugin "./path/to/plugin.js";

Then in your markup:

<div class="@max-h-[680px]:bg-red-500">

V3 Tailwind Play of the plugin working

[root9464]

thanks

[root9464]

your example helped me a lot, thank you!but will there be a more modern way in the future?

[wongjn]

Perhaps!