tailwindcss-hsl

A tailwindcss plugin

Installation

Install the plugin from npm:

# Using npm
npm install tailwindcss-hsl

# Using Yarn
yarn add tailwindcss-hsl

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

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('tailwindcss-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:

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

Attribute color

• [x] text
• [x] bg
• [x] border
• [x] decoration
• [x] divide
• [x] outline
• [x] shadow

// Default

hslColors: {
  h: {
    primary: '216',
    success: '152',
    danger: '354',
    warning: '45',
    info: '190',
    secondary: '210'
  },
  s: {
    10: '10%',
    20: '20%',
    30: '30%',
    40: '40%',
    50: '50%',
    60: '60%',
    70: '70%',
    80: '80%',
    90: '90%',
    100: '100%',
  },
  l: {
    10: '10%',
    20: '20%',
    30: '30%',
    40: '40%',
    50: '50%',
    60: '60%',
    70: '70%',
    80: '80%',
    90: '90%',
  }
}

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: {
        h: {
          error: '0' // 0~360
        },
        s: {
          15: '15%',
          25: '25%',
          35: '35%'
        },
        l: {
          15: '15%',
          25: '25%',
        }
      }
    }
  },
  variants: {
    hslColors: ['responsive', 'hover']
  }
}