@latehours/tailwind v0.4.0
@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.