TailwindCSS using data attributes
attrCSS
Usage
This command generates an attr.css
file that can be used in your project:
npx attrcss build
Import the generated CSS file in your project, and start using data attributes:
attrCSS
Install
# yarn yarn add -D attrcss # npm npm i -D attrcss
Then run it using attrcss build
.
Options
-i
, --input
Specify a custom .json
theme file. Your theme will be merged with the default one.
It must follow this structure:
- prefix: inserted after
data-
- separator: used for nested values, like
gray.900
- something: a valid css property. Use either kebab case or camel case
- extend: automatically extends this property with theme colors or spacing.
"-spacing"
results in negative values. - alias: alternative name for
something
. Will be used for creating data properties. - valueName: possible values.
- variants: can be
responsive
or any other CSS pseudo class.
-o
, --output
You can specify a custom output file here. It must be a CSS file.
PS. Use PurgeCSS!
PPS. This is functional, but I never tried it in production. 🦦
PPPS. The code is a bit messy. I was kinda bored ._.