def
Briefly
Section titled “Briefly”tw.def
is a powerful utility that combines the flexibility of clsx
for conditional classes with tailwindest
’s record-based styling. It merges class lists and style objects into a single, deduplicated class name string.
1. Type definition
Section titled “1. Type definition”;(classList: ClassList<ClassLiteral>, ...styleList: Array<StyleType>) => string
2. Spec
Section titled “2. Spec”Parameters
Section titled “Parameters”classList
: An array of class values, similar toclsx
. It can contain strings, arrays, and objects for conditional classes. If you’ve configuredtailwindLiteral
increateTools
, this will be strongly typed....styleList
: A rest parameter for any number oftailwindest
style objects. These are merged together and then merged with the result ofclassList
.
Example
Section titled “Example”import { tw } from "./tw"
const condition = true
const buttonClasses = tw.def(
// 1. A clsx-like array for class names
[
"font-semibold",
"border",
"rounded",
condition ? "text-white" : "text-black",
],
// 2. A base style object
{
padding: "p-2",
backgroundColor: "bg-blue-500",
":hover": {
backgroundColor: "hover:bg-blue-700",
},
},
// 3. An override style object
{
// This will override the padding from the object above
padding: "p-4",
// This will override the text color from the classList
color: "text-neutral-100",
}
)
// Resulting className (if merger like tw-merge is used):
// "font-semibold border rounded p-4 bg-blue-500 hover:bg-blue-700 text-neutral-100"
const Button = () => <button className={buttonClasses}>Click me</button>