PostCSS Tailwind Data Attr

PostCSS plugin that moves tailwind classes to data attributes.

.tw-text-left {}
.md:tw-text-xl {}

[data-tw="text-left"] {}
[data-tw="md:text-xl"] {}

Installation

npm install postcss-tailwind-data-attr

Usage

Check you project for existed PostCSS config: postcss.config.js in the project root, "postcss" section in package.json or postcss in bundle config.

If you already use PostCSS, add the plugin to plugins list:

module.exports = {
  plugins: [
+   require('postcss-tailwind-data-attr'),
    require('autoprefixer')
  ]
}

If you do not use PostCSS, add it according to official docs and set this plugin in settings.