https://github.com/domchristie/tailwind-initial

Tailwind plugin that generates utilities at a low specificity
https://github.com/domchristie/tailwind-initial

Last synced: 12 days ago
JSON representation

Tailwind plugin that generates utilities at a low specificity

• Host: GitHub
• URL: https://github.com/domchristie/tailwind-initial
• Owner: domchristie
• Created: 2022-06-25T16:01:28.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-06-25T16:01:46.000Z (over 2 years ago)
• Last Synced: 2023-12-26T01:03:58.547Z (11 months ago)
• Language: JavaScript
• Size: 49.8 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# tailwind-initial

Generates utilities at a low specificity using CSS layers, letting developers set default styles for a component that can be overridden by adding plain Tailwind utility classes.

## Usage

```

npm install tailwind-initial

```

```js

// tailwind.config.js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require('tailwind-initial'),

    // ...

  ],

}

```

```html

Hello, world!

Hello, world!

```


### Options

By default, the variant name is `initial`, and the generated layer name is `tw-initial`. These names can be customized like so:

```js

// tailwind.config.js

module.exports = {

  theme: {

    // ...

  },

  plugins: [

    require('tailwind-initial')({ name: 'init', layer: 'init-layer' }),

    // ...

  ],

}

```

## Should you use it?

Maybe, maybe not! This is an experimental approach, and it might be preferable to [configure your utility classes within your components](https://twitter.com/adamwathan/status/1496663841849151493). However, this might come in handy during the initial stages of component design, when the customization requirements are not yet known.