windicss-hsl v0.0.2

windicss-hsl

A windicss plugin

Installation

Install the plugin from npm:

# Using npm
npm install windicss-hsl

# Using Yarn
yarn add windicss-hsl

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

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

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

Configuration

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

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

Default

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