#  windicss-hsl

**Repository Path**: fireloong/windicss-hsl

## Basic Information

- **Project Name**:  windicss-hsl
- **Description**: windicss 插件 -- css 颜色使用 hsl 表示
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: https://www.npmjs.com/package/windicss-hsl
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-04-30
- **Last Updated**: 2022-05-21

## Categories & Tags

**Categories**: Uncategorized

**Tags**: windicss, plugin, color

## README

#  windicss-hsl

A windicss plugin

## Installation

Install the plugin from npm:

```sh
# Using npm
npm install windicss-hsl

# Using Yarn
yarn add windicss-hsl
```

Then add the plugin to your `windicss.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('windicss-hsl'),
    // ...
  ],
}
```

## Usage

Use the `bg-{h}-{s}-{l}` utilities to specify how many lines of text should be visible before truncating::

```html
<button class="bg-primary-100-50 border border-success-60-30" type="button">Button</button>
<button class="bg-primary-100-50/60" type="button">Button</button>
```

Utilities are for clamping text up to 6 lines are generated by default:

| Class | CSS |
| --- | --- |
| `bg-primary-10-10` | `background-color: hsl(216 10% 10% / var(--tw-bg-opacity));` |
| `bg-success-20-50` | `background-color: hsl(152 20% 50% / var(--tw-bg-opacity));` |
| `bg-danger-100-50/60` | `background-color: hsl(354 20% 50% / 0.6);` |
| `border-warning-70-80` | `border-color: hsl(45 70% 80% / var(--tw-bg-opacity));` |
| …… | …… |

## Configuration

You can configure which values and variants are generated by this plugin under the `hslColors` key in your `tailwind.config.js` file:

```js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      hslColors: {
        error: '0' // 0~360
      }
    }
  },
  variants: {
    hslColors: ['responsive', 'hover']
  }
}
```

### Default

```js
hslColors: {
  primary: '216',
  secondary: '210',
  success: '152',
  danger: '354',
  warning: '45',
  info: '190',
}
```