Setup
1. Install packages
Section titled “1. Install packages”Install tailwindest
for core functionalities, and create-tailwind-type
to generate types from your tailwind.config.js
.
bash npm i tailwindest
bash yarn add tailwindest
bash pnpm add tailwindest
2. Generate Tailwind types
Section titled “2. Generate Tailwind types”Run the following command to generate a tailwind.ts
file in your project root. This file will contain all the necessary types based on your tailwind.css
.
npx create-tailwind-type --base node_modules/tailwindcss --no-arbitrary-value --disable-variants
3. Create styling tools
Section titled “3. Create styling tools”Create a tw.ts
(or tw.js
) file to define your tailwindest
tools.
import {
createTools,
type CreateTailwindest,
type CreateTailwindLiteral,
} from "tailwindest"
import type { Tailwind, TailwindNestGroups } from "./tailwind" // Adjust path if needed
// Create the main Tailwindest type
export type Tailwindest = CreateTailwindest<{
tailwind: Tailwind
tailwindNestGroups: TailwindNestGroups
// Optional: customize prefix for screen/variant groups
// groupPrefix: "$" <-- prefix for group variants
// useArbitrary: true <-- enable arbitrary values, type-hinting is available for this option
}>
// Create a literal type for all possible Tailwind classes
export type TailwindLiteral = CreateTailwindLiteral<Tailwind>
// Create the tools
export const tw = createTools<{
tailwindest: Tailwindest
tailwindLiteral: TailwindLiteral
// useArbitrary: true
// useTypedLiteral: true <-- enables typed literal classes at tw.style().class(...typed literals)
}>({
// Optional: if you use tailwind-merge
merger: twMerge, // <-- tailwind-merge as classname merger
})
Now you’re all set! You can import tw
from tw.ts
and start creating typed styles.