https://github.com/vielhuber/postcss-tailwind-data-attr

PostCSS plugin that moves tailwind classes to data attributes.
https://github.com/vielhuber/postcss-tailwind-data-attr

Last synced: 19 days ago
JSON representation

PostCSS plugin that moves tailwind classes to data attributes.

• Host: GitHub
• URL: https://github.com/vielhuber/postcss-tailwind-data-attr
• Owner: vielhuber
• License: mit
• Created: 2019-10-14T00:12:35.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2020-12-20T23:59:52.000Z (about 4 years ago)
• Last Synced: 2024-11-15T02:42:07.360Z (about 1 month ago)
• Language: JavaScript
• Size: 9.77 KB
• Stars: 5
• Watchers: 3
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# PostCSS Tailwind Data Attr

[PostCSS] plugin that moves tailwind classes to data attributes.

[postcss]: https://github.com/postcss/postcss

```css

.tw-text-left {}

.md:tw-text-xl {}

```

```css

[data-tw="text-left"] {}

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

```

## Installation

```sh

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:

```diff

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.

[official docs]: https://github.com/postcss/postcss#usage