v2.0.0 🔮

[danpacho]

tailwindest V2 🎉

Visit the newly updated 🔮 official documentation to find out more things!

pnpm i tailwindest@latest

Now let's see what's changed for the better :)

---

1. Create own styling tools with createTools

After version 2, it is highly recommended that you name the function whatever you want and export it.
It's easier to remember and more usable.

import { createTools, type Tailwindest } from "tailwindest"

export const tw = createTools<Tailwindest>()

There are five tools in total.

1. style: defining basic styles
2. toggle: conditional styling
3. rotary: conditional styling
4. variants: conditional styling
5. mergeProps: merging style sheets

2. Define style sheet with style

import { tw } from "@/tw"

const box = tw.style({
    display: 'flex',
    flexDirection: 'flex-row',
    alignItems: 'items-center',
    justifyContents: 'justify-center',
    gap: 'gap-1.5',
        
    padding: 'p-2',
    margin: 'm-1.5',
    // box styles...
})

 // Use it in component
const Box = ({ children }) => {
     return <div className={box.class}>{children}</div>
}

• get class name, string

const boxClassName = box.class

• get style sheet, input object

const boxStyleSheet = box.style

Note

Remove function notation to improve DX

Before 😟

const boxClassName = box.class()
const boxStyleSheet = box.style()

After 💡

const boxClassName = box.class
const boxStyleSheet = box.style

3. Conditional styling - toggle

If you want to change the style based on a single boolean condition, use toggle.

// Define toggle style
const themeBtn = tw.toggle({
      truthy: {}, // 🌝 light mode
      falsy: {}, // 🌚 dark mode
      base: {}, // [optional] base style
 })

// Use it in component
 const ThemeBtn = ({
      children,
 }) => {
      const [isLight, setIsLight] = useState(false)
      return (
          <button
              className={themeBtn.class(isLight)}
          >
              {children}
          </button>
      )
 }

3. Conditional styling - rotary

If you need to change styles based on three or more conditions within a single category, use rotary.

// Define rotary style
const btnType = tw.rotary({
        default: {},
        success: {},
        warning: {},
        base: {}, // [optional] base style
})

// Get rotary type with GetVariants
interface BtnProps {
        onClick: () => void
        children: ReactNode
        type?: GetVariants<typeof btnType>
}

// Use it in component
const Btn = ({
        onClick,
        children,
        type = "default",
}: BtnProps) => (
        <button
            className={btn.class(type)}
            onClick={onClick}
        >
            {children}
        </button>
)

3. Conditional styling - variants

Use variants for combinations of rotary, where each condition is defined within several categories.

// Define variants style
const btn = tw.variants({
        variants: {
            type: {
                default: {},
                success: {},
                warning: {},
            },
            size: {
                sm: {},
                md: {},
                lg: {},
            },
        },
        base: {}, // [optional] base style
})

// Get variants type with GetVariants
interface BtnProps extends GetVariants<typeof btn> {
        onClick: () => void
        children: ReactNode
}

// Use it in component
const Btn = ({
        children,
        size = "md",
        type = "default",
        onClick,
}: BtnProps) => (
        <button
            className={btn.class({ size, type })}
            onClick={onClick}
        >
            {children}
        </button>
)

4. Change variants type extractor name to GetVariants

1. rotary

const hiRotary = tw.rotary({
       hi: {},
       halo: {},
       ciao: {},
})

// Get variants type with GetVariants
type HiRotary = GetVariants<typeof hiVariants>

⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ 

type HiRotary = 'hi' | 'halo' | 'ciao'

2. variants

const hiVariants = tw.variants({
        variants: {
            say: {
                hi: {},
                halo: {},
                ciao: {},
            },
           it: {
                is: {},
                nice: {},
            },
        },
})
// Get variants type with GetVariants
type HiVariants = GetVariants<typeof hiVariants>

⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ ⬇️ 

type HiVariants = {
    say?: 'hi' | 'halo' | 'ciao'
    it?: 'is' | 'nice'
}

---

Performance improvements

1. wind ➡️ style: 5 to 13x speedup ⚡️
2. wind$ ➡️ rotary and toggle: 1.1 to 4.5x speedup ⚡️
3. createVariants ➡️ variants: about 1.25x speedup ⚡️

Run benchmark script in your machine

pnpm bench

Full Changelog: v1.2.1...v2.0.0

---

This discussion was created from the release v2.0.0 🔮.