CreateTailwindest
Briefly
Section titled “Briefly”CreateTailwindest
is a utility type that generates the main style type for tailwindest
. It uses the types generated by create-tailwind-type
to build a deeply nested object type that represents all possible CSS-in-JS style objects you can write.
1. Type definition
Section titled “1. Type definition”import type { CreateTailwindest } from "tailwindest"
import type { Tailwind, TailwindNestGroups } from "./tailwind" // Generated file
export type Tailwindest = CreateTailwindest<{
tailwind: Tailwind
tailwindNestGroups: TailwindNestGroups
groupPrefix?: string
useArbitrary?: boolean
}>
2. Spec
Section titled “2. Spec”Generic Parameter: Config
Section titled “Generic Parameter: Config”CreateTailwindest
takes a single generic Config
object with the following properties:
tailwind
(required): TheTailwind
type imported from the file generated bycreate-tailwind-type
. This contains all your project’s tailwind classes as a mapped type.tailwindNestGroups
(required): TheTailwindNestGroups
type imported from the generated file. This is a string literal union of all possible variant names (e.g.,"hover"
,"focus"
,"md"
,"dark"
).groupPrefix
(optional): A string literal to prefix variant groups. For example, if you set it to"$"
you would write"$hover": { ... }
.useArbitrary
(optional,boolean
): If set totrue
, allows any string for class values, enabling arbitrary values. Defaults tofalse
.
Example
Section titled “Example”Here is a typical setup in a tw.ts
file:
import {
createTools,
type CreateTailwindest,
type CreateTailwindLiteral,
} from "tailwindest"
import type { Tailwind, TailwindNestGroups } from "./tailwind"
// 1. Create the main Tailwindest style type
export type Tailwindest = CreateTailwindest<{
tailwind: Tailwind
tailwindNestGroups: TailwindNestGroups
useArbitrary: true
}>
// 2. (Optional) Create a literal type for all tailwind classes
export type TailwindLiteral = CreateTailwindLiteral<Tailwind>
// 3. Create the tools
export const tw = createTools<{
tailwindest: Tailwindest
tailwindLiteral: TailwindLiteral
useArbitrary: true
useTypedLiteral: true
}>()
The resulting Tailwindest
type allows you to write styles like this, with full type-safety and autocompletion:
const myStyle: Tailwindest = {
display: "flex",
padding: ["p-2", "md:p-4"],
":hover": {
backgroundColor: "hover:bg-blue-500",
},
"@dark": {
color: "dark:text-white",
},
}