tw-fns

A js/ts tailwindcss library implemented using pure functions

Install

npm install tw-fns
yarn add tw-fns
pnpm add tw-fns
bun install tw-fns

Usage

import { twfns, flex, flex_col, items_center, justify_center } from "tw-fns";

const css = twfns(flex, flex_col, items_center, justify_center);
console.log(css);

API

All api is designed from tailwindcss, about ~20000 api.

Utilities with some naming rules

• utilities: use underscore-connected property access
  • ml-1 is ml_1
  • ml-1.5 is ml_1_dot_5
  • ml-1/5 is ml_1_slash_5
  • @container is at_container
  • ..
• size: put number in the end
  • w-2xl is w_xl2
  • 2xl:text-2xl is xl2(text_2xl)

Hover, focus, and other states

• use function to wrap
  • hover:ml-1 is hover(ml_1)
  • hover:active:ml-1 is hover(active(ml_1))
  • hover:active:ml-1 hover:active:bg-gray-100 is hover(active(ml_1, bg_gray_100))
  • ..

Arbitrary value

• utilities: use function to wrap arbitrary value
  • ml-[20px] is ml_("20px")
  • w-[500px] is ml_("500px")
  • ..
• states: use function to wrap arbitrary value
  • aria-[role=user]:text-blue-500 is aria('role="user"', text_blue_500)
  • has-[:active]:bg-amber-50 is has(':active', bg_amber_50)
  • ..
• named group
  • group-hover/some:text-blue-500 is group_by("some", hover(text_blue_500))
  • peer-hover/some:text-blue-500 is peer_by("some", hover(text_blue_500))
  • ..

There are some special api

Use aria-[...] to match combined styles

• <div aria-group>
  • below element use group(text_2xl, ...)
• <div aria-group="some">
  • below element use group_by("some")(text_2xl, ...)
• <div aria-peer>
  • sibling element use peer(text_2xl, ...)
• <div aria-peer="some">
  • sibling element use peer_by("some")(text_2xl, ...)

Container api

• <div class={at_container}>
  • <div class={at_sm(text_2xl, ...)}>

License

MIT