Tailwindcss: Use data attributes instead of classes

[vielhuber]

the prefix option is quite cool, but is there an even stricter way to distinguish tailwind classes from the rest?

e.g.:

<div class="own-class1 own-class2" data-tw="bg-white rounded-lg"></div>

if not, is this doable via a tailwind plugin?

[hacknug]

You can disable all corePlugins and write your own that style elements based on data-attributes 👍

[vielhuber]

Thanks for your answer!

If I disable all corePlugins, then I loose a lot of functionality I need (i don't want to reimplement everything).

Is it not possible to have a postcss plugin or another plugin in the build pipeline of tailwind that replaces all class names with data-attributes?

[hacknug]

Probably although I'm not aware of any. Maybe you'll find something on https://www.postcss.parts/

[adamwathan]

Yeah I think you could probably write a PostCSS plugin to transform any Tailwind classes into data attribute selectors, maybe by assigning a unique prefix in your Tailwind config, then walking all of the rules in CSS looking for that prefix and converting to data attributes.

Not something I plan to bake into core though, sorry 😞

[vielhuber]

Thanks! Made a quick prototype that seems to work: https://github.com/vielhuber/postcss-tailwind-data-attr

PostCSS (and Tailwind CSS) is a joy!