style
Briefly
Section titled “Briefly”tw.style()
is the most basic style generator. It takes a single style object and creates a reusable styler instance.
1. Type Definition
Section titled “1. Type Definition”;(stylesheet: StyleType) => PrimitiveStyler<StyleType, StyleLiteral>
A PrimitiveStyler
instance has the following methods:
class(...extraClassList)
: Returns theclassName
string.style(...extraStyles)
: Returns the style object.compose(...styles)
: Returns a new, composedPrimitiveStyler
instance.
2. Spec
Section titled “2. Spec”const boxStyle = tw.style({
display: "flex",
alignItems: "items-center",
justifyContent: "justify-center",
})
Parameter: stylesheet
Section titled “Parameter: stylesheet”- type:
Tailwindest
- usage: A style object that conforms to the
Tailwindest
type you defined.
3. Returns
Section titled “3. Returns”class()
Section titled “class()”Briefly
Section titled “Briefly”Returns the generated className
as a string
.
const className = boxStyle.class()
// "flex items-center justify-center"
// You can also pass extra classes to be merged.
const classNameWithExtra = boxStyle.class("p-4", "bg-red-100")
// "flex items-center justify-center p-4 bg-red-100"
style()
Section titled “style()”Briefly
Section titled “Briefly”Returns the original style object
.
const styleObject = boxStyle.style()
/*
{
display: "flex",
alignItems: "items-center",
justifyContent: "justify-center",
}
*/
// You can also pass extra style objects to be merged.
const mergedStyle = boxStyle.style({ padding: "p-4" })
/*
{
display: "flex",
alignItems: "items-center",
justifyContent: "justify-center",
padding: "p-4"
}
*/
compose()
Section titled “compose()”Briefly
Section titled “Briefly”Merges the current style with one or more other style objects to create a new PrimitiveStyler
instance.
The original styler is not modified.
The base style sheet is overrided, and new instance is created. So don’t have to worry about the original style being modified.
const base = tw.style({ padding: "p-2", color: "text-black" })
const composed = base.compose(
{ backgroundColor: "bg-blue-100" },
{ padding: "p-4" } // This will override the base padding
)
const finalClass = composed.class()
// "text-black bg-blue-100 p-4"