@latehours/tailwind

@latehours/tailwind 💨

@latehours/tailwind is collection of plugins for Tailwind CSS that i need often enough.

is has zero dependencies. ofc you need to have tailwindcss set up in your project.

usage

install the library using your package manager of choice:

npm install @latehours/tailwind
pnpm install @latehours/tailwind
bun add @latehours/tailwind
yarn add @latehours/tailwind

ligatures plugin

define how ligatures should behave.

in your tailwind.config.mjs:

import { ligatures } from "@latehours/tailwind/ligatures";

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [ligatures()],
}

in your file.html or component.tsx:

<div class="ligatures-none">no ligatures</div>
<div class="ligatures-normal">normal ligatures</div>
<div class="ligatures-none">no ligatures</div>
<div class="ligatures-common">common ligatures</div>
<div class="ligatures-no-common">no common ligatures</div>
<div class="ligatures-discretionary">discretionary ligatures</div>
<div class="ligatures-no-discretionary">no discretionary ligatures</div>
<div class="ligatures-historical">historical ligatures</div>
<div class="ligatures-no-historical">no historical ligatures</div>
<div class="ligatures-contextual">contextual ligatures</div>
<div class="ligatures-no-contextual">no contextual ligatures</div>

cn utility

merge classnames together.

first add clsx and tailwind-merge to your deps then you can use cn:

import { cn } from "@latehours/tailwind/cn";

const padding = "p-4";
const classes = cn("text-red-500", "bg-blue-500", padding);

cond utility

opinionated way to conditionally add classes. most useful when combined with cn.

first add clsx to your deps then you can use cond:

import { cn } from "@latehours/tailwind/cn";
import { cond } from "@latehours/tailwind/cond";

<div
  className={cn(
    cond(state === "selected", "bg-yellow-500"),
    cond(() => state === "disabled", "bg-gray-500"),
  )}
/>

condc utility

similar to cond but is curried. most useful when combined with cn.

first add clsx to your deps then you can use condc:

import { cn } from "@latehours/tailwind/cn";
import { condc } from "@latehours/tailwind/condc";

const isState = condc(state);

<div
  className={cn(
    isState("selected", "bg-yellow-500"),
    // also accepts third argument which is returned
    // when condition is false
    isState("disabled", "bg-gray-500", "bg-yellow-500"),
  )}
/>

development

To install dev dependencies:

bun install

when creating commits follow the conventional commits format.