https://github.com/imedadel/attrcss

🦦 AttrCSS: TailwindCSS using data attributes, cuz y not 🙄
https://github.com/imedadel/attrcss

css html otter-power tailwindcss

Last synced: 7 days ago
JSON representation

🦦 AttrCSS: TailwindCSS using data attributes, cuz y not 🙄

• Host: GitHub
• URL: https://github.com/imedadel/attrcss
• Owner: imedadel
• Created: 2020-03-16T22:01:01.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2020-03-17T15:52:19.000Z (almost 5 years ago)
• Last Synced: 2024-12-22T10:34:21.725Z (12 days ago)
• Topics: css, html, otter-power, tailwindcss
• Language: JavaScript
• Homepage:
• Size: 193 KB
• Stars: 2
• Watchers: 3
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        





    



TailwindCSS using data attributes


```html



  
attrCSS



```


## Demo

Buttons: [CodePen.io](https://codepen.io/ImedAdel/pen/GRJGpob?editors=1000)

## Usage

This command generates an `attr.css` file that can be used in your project:

```shell

npx attrcss build

```

Import the generated CSS file in your project, and start using data attributes:

```html



  
attrCSS



```


## Install

```shell

# 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:

```json

{

  "prefix": "",

  "separator": ".",

  "theme": {

    "something": {

      "extend": ["colors", "spacing", "-spacing"],

      "alias": ["someone"],

      "valueName1": "value",

      "valueName2": "value"

    }

  },

  "variants": {}

}

```

- **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 .\_.