createTools
Briefly
Section titled “Briefly”createTools
is the main factory function in tailwindest
. You call it to create a set of styling utilities (tw
object) that are typed according to your project’s specific Tailwind CSS configuration.
1. Type definition
Section titled “1. Type definition”import type { Merger } from "tailwindest"
interface ToolOptions {
merger?: Merger
}
export const createTools = <Type extends TailwindestInterface>({
merger,
}: ToolOptions = {}) => {
// ... returns tools
}
2. Spec
Section titled “2. Spec”import { createTools } from "tailwindest"
import { twMerge } from "tailwind-merge" // example merger
const tw = createTools<{
tailwindest: MyTailwindest
tailwindLiteral: MyTailwindLiteral
// ... other options
}>({
merger: twMerge,
})
Generic Parameter: Type
Section titled “Generic Parameter: Type”Type
: A generic parameter that extendsTailwindestInterface
. This is where you plug in your generated types to make the tools type-safe.Type.tailwindest
: Your main style type, created withCreateTailwindest
.Type.tailwindLiteral
: A literal union of all your classes, created withCreateTailwindLiteral
.Type.useArbitrary
: Set totrue
to allow arbitrary values.Type.useTypedClassLiteral
: Set totrue
to typeclassList
arguments withTailwindLiteral
.
Options Parameter: ToolOptions
Section titled “Options Parameter: ToolOptions”merger
(optional): A function to merge and deduplicate class names. It’s highly recommended to use a library liketailwind-merge
for this to correctly handle conflicting Tailwind CSS utilities.
Return Value
Section titled “Return Value”createTools
returns an object (commonly named tw
) with the following methods:
def
: Combineclsx
-like class lists with record-based styles.join
: Aclsx
-like utility to join class names.style
: Create a basic, non-variant style object.toggle
: Create styles for boolean (on/off) states.rotary
: Create styles for a single set of variants (e.g., sizes or colors).variants
: Create styles for multiple, combinable sets of variants.mergeProps
: Merges multiple style objects into a single class string.mergeRecord
: Merges multiple style objects into a single style object.