v2.0.0-rc.1 🔮

[danpacho]

Version 2 RC is here! 🥳

Let's see what's changed for the better :)
Give it a try and let me know what you think, I'll do my best to incorporate it! Thanks for all of your open-source supports! 🙂

pnpm i tailwindest@rc

---

Simple and concise conditional styling API

All style tools have same function interface ✅

1. class: get class name (string)
2. style: get style sheet (input object)
3. compose: compose style sheets into base style sheet

Three types of conditional styling ✅

1. toggle: boolean condition
2. rotary: specific conditions
3. variants: combination of specific conditions

Note

The variants API now uses the same core design parts of stitches

const button = tw.variants({
    variants: {
         size: {
               sm: {},
               md: {},
               lg: {},
          },
         type: {
              success: {},
              warning: {},
              pending: {}
          }
   },
   base: {} // optional base styleSheet
})

const successWithMd = button.class({
   type: 'success',
   size: 'md'
})

---

BREAKING API Changes

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 ⚡️

Before

After

Run benchmark script in your machine

pnpm bench

---

This discussion was created from the release v2.0.0-rc.1 🔮.