Tailwind prefix not working with custom data attributes Tailwind @3.4.3

[michTheBrandofficial]

When working with a custom tailwind prefix e.g 'tws-', it works well with normal values like 'tws-bg-blue-300', but the styles dont apply when I do something like 'tws-data-[state=closed]'.

I don't know if this is the correct syntax for data attirbutes with custom prefixes.

My version of tailwindcss is 3.4.3 and all the other styles work fine but this just doesn't.

Here is a reproduction link of the error in the tailwind playground: https://play.tailwindcss.com/5KPeSPAlW1?size=814x720

[wongjn]

As per the documentation:

It’s important to understand that this prefix is added after any variant modifiers. That means that classes with responsive or state modifiers like sm: or hover: will still have the responsive or state modifier first, with your custom prefix appearing after the colon:

<div class="tw-text-lg md:tw-text-xl tw-bg-red-500 hover:tw-bg-blue-500">
  <!-- -->
</div>

See this fixed example of your Tailwind Play.

[michTheBrandofficial]

Oh, thanks.

This works perfectly.