@ueberbit/tailwind

Utilities for Tailwindcss

Usage

Install

pnpm add -D eslint @ueberbit/tailwind

Examples

Remcalc

Convert pixel values to rem values.

fontSize: {
  8: remCalc(8),
}

semantic colors

Use css custom properties in your tailwind config. In combination with strip-color postcss plugin you have good DX in your editor, while also being compatible with tailwinds color opacity.

colors: {
  ...semanticColors(['primary'], ['DEFAULT', 'content', '100', '200', '400', '600', '800', '900'], 'hsl'),
}

--c-primary: theme("colors.blue.900") --strip-color;
--c-primary-100: theme("colors.blue.100") --strip-color;
--c-primary-200: theme("colors.blue.200") --strip-color;
--c-primary-400: theme("colors.blue.400") --strip-color;
--c-primary-600: theme("colors.blue.600") --strip-color;
--c-primary-800: theme("colors.blue.800") --strip-color;
--c-primary-900: theme("colors.blue.900") --strip-color;
--c-primary-content: theme("colors.white") --strip-color;
--c-error-form: hsl(10deg 100% 33%) --strip-color;