Tailwind OKLCH examples

Button example

• bg-blue-600 Default Tailwind class to set background color.
• hover:-bg-lightness-offset-10 Darken background color on hover.
• outline-bg/40 Use the same color for outlines as the background color with an opacity of 40%. This color will change lightness too if the lightness of the background is changed.

Button with changing colors example

• The contrast color of bg-blue-600 is white.
• The contrast color of hover:bg-blue-400 is black.

Badge example

• text-blue-600 sets the text color.
• bg-text/20 sets the background color to the same color as the background color with an opacity of 20%.

Outlined badge example

• text-blue-600 sets the text color.
• border-text/40 sets the border color to the same color as the background color with an opacity of 40%.

Named colors example

• When the color is changed, the hex color is converted to OKLCH with Color.js. The values of the lightness, chroma and hue are then set as custom properties.
• text-bg-contrast will calculate the contrast color of the text in css.

The following configuration was used to make use of the primary color:

/** @type {import('tailwindcss').Config} */
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: `oklch(var(--color-primary-l) var(--color-primary-c) var(--color-primary-h) / <alpha-value>)`,
      },
    },
  },
};

@layer base {
  :root {
    --color-primary-l: .32;
    --color-primary-c: .1;
    --color-primary-h: 150;
  }
}

Automatic dark/light themes

• The color of this page is set with a text-body class, which is also a color custom added color. Since the colors used in the following card rely on the text color, the colors automatically adjust if the body color changes.
• Since we're using custom properties, you do not need to add a text-* color class to each element. In the example below bg-text/10 is added to the badges. The text color which is used comes from the first parent with a text color, in this case the body with the text-body class.

The placeholder title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.

#lorem #ipsum