Write
Typesafe
Tailwindcss
powered by typescript
Features
Type-safety
Type-safety and autocompletion magics, will give you the best DX and solid product.
Easy to use
It's as easy and as quickly to get started as if you were writing CSS in JS
.
Variants based
Use variants
based modern conditional styling approaches such as stitches
and cva
.
Customizable
Define custom styles defined in tailwind.config.js
via Tailwindest
type.
Tiny, 768B
Don't have to worry about bundle size. It is 768B
tiny library.
Performant
All operation is optimized and styles are cached by default. It is fast.
Combine two worlds
Write tailwindcss and CSS-in-JS like syntax at the same time. Get the best of two worlds.
const button = tw.style({
display: "flex",
alignItems: "items-center",
justifyContent: "justify-center",
padding: "p-2",
borderRadius: "rounded-md",
color: "text-white",
fontSize: "text-base",
fontWeight: "font-medium",
backgroundColor: "bg-blue-700",
})
const InlineAndCSSInJs = () => {
return (
<div className="flex flex-row gap-2 items-center justify-between">
<button className={button.class}>
<p className="text-yellow-300 text-2xl">Button 1</p>
</button>
<button className={button.class}>Button 2</button>
</div>
)
}
Great DX
Get the power of type-safety without installation. Hover the highlighted blocks.
tw.ts
import { createTools, type Tailwindest } from "tailwindest"
type MyTailwind = Tailwindest<{
screens: "my"
color: "primary" | "secondary"
}>
export const tw = createTools<MyTailwind>()
button.ts
import { tw } from "~/tw"
const button = tw.variants({
base: {
display: "flex",
},
variants: {
shape: {
outline: {
"@dark": {
backgroundColor: "re",
},
},
solid: {
"@dark": {
":hover": {
borderColor: "am1",
},
},
},
ghost: {
color: "se",
"@my": {
color: "pr",
},
},
},
size: {
sm: {},
md: {},
lg: {},
},
light: {
true: {},
false: {},
},
},
})
const outlineWithSmLight = button.class({
shape: "outline",
size: "sm",
light: true,
})
const solidWithMdDarkStyle = button.style({
shape: "solid",
size: "md",
light: false,
})