Quick start

Unwind aims to be framework-agnostic. You can use React, Vue, Solid, Svelte or whatever you like, however…

• In this guide, we will cover how to unwind the className prop of a typical Button component built with React.
• Our goal is to enhance the className prop with @unwind/class-name so that it changes color when active state is set to true.

Prerequisites

1. Combining class selectors
We will use Array.join() to get resulting className as string. You could be also using clsx, classname, template literals... you name it.

2. Example component
We will use a Button component bellow styled with Tailwind classes. Tailwind is already running in your browser to play with and provides style on demand while you edit the live previews. CSS stylesheet in your case might be coming from elsewhere but it should not matter for the sake of this guide.

tip

Go ahead, play with the code. Unless you remove the App declaration, the live preview should work.

Button.tsx

Live Editor

import React, { PropsWithChildren } from 'react' const buttonClassName = [ 'bg-gray-50 hover:bg-white active:bg-gray-200', 'border border-gray-300 rounded', 'text-black font-bold', 'py-2 px-4', ] type ButtonProps = PropsWithChildren<{ className?: string }> const Button = ({ children, className }: ButtonProps) => ( <button className={[ ...buttonClassName, className, ].join(' ')} > {children} </button> ) // App.tsx function App() { return ( <Button className="w-full" // 👈 try to remove `w-full` class > Click me! </Button> ) }

import React, { PropsWithChildren } from 'react'

const buttonClassName = [
  'bg-gray-50 hover:bg-white active:bg-gray-200',
  'border border-gray-300 rounded',
  'text-black font-bold',
  'py-2 px-4',
]

type ButtonProps = PropsWithChildren<{
  className?: string
}>

const Button = ({ children, className }: ButtonProps) => (
  <button
    className={[
      ...buttonClassName,
      className,
    ].join(' ')}
  >
    {children}
  </button>
)

// App.tsx
function App() {
  return (
    <Button
      className="w-full" // 👈 try to remove `w-full` class
    >
      Click me!
    </Button>
  )
}

Result

Loading...

---

1. Installation

Add package to package.json

pnpm

pnpm add @unwind/class-name

yarn

yarn add @unwind/class-name

npm

npm install @unwind/class-name

---

2. Rewriting the className prop

1. Import from @unwind/class-name
2. Replace base component styles with defineClassName()
3. Replace className prop type with ClassNameProp<...>
4. Replace Array.join() with resolveClassName()

Button.tsx (before)

import React, { PropsWithChildren } from 'react'const buttonClassName = [  'bg-gray-50 hover:bg-white active:bg-gray-200',  'border border-gray-300 rounded',  'text-black font-bold',  'py-2 px-4',]type ButtonProps = PropsWithChildren<{  className?: string}>const Button = ({ children, className }: ButtonProps) => (  <button    className={[      ...buttonClassName,      className,    ].join(' ')}  >    {children}  </button>)

Button.tsx (after)

import type { ClassNameProp } from '@unwind/class-name'import { defineClassName, resolveClassName } from '@unwind/class-name'import React, { PropsWithChildren } from 'react'const buttonClassName = defineClassName([  'bg-gray-50 hover:bg-white active:bg-gray-200',  'border border-gray-300 rounded',  'text-black font-bold',  'py-2 px-4',])type ButtonProps = PropsWithChildren<{  className?: ClassNameProp<typeof buttonClassName>}>const Button = ({ children, className }: ButtonProps) => (  <button    className={resolveClassName(      {},      buttonClassName,      className,    )}  >    {children}  </button>)

---

3. Add the active state

Unwind lets you define how components should render className according to state with a callback. Lets add toggle state change to the Button.

Button.tsx (before)

import type { ClassNameProp } from '@unwind/class-name'import { defineClassName, resolveClassName } from '@unwind/class-name'import React, { PropsWithChildren } from 'react'const buttonClassName = defineClassName([  'bg-gray-50 hover:bg-white active:bg-gray-200',  'border border-gray-300 rounded',  'text-black font-bold',  'py-2 px-4',])type ButtonProps = PropsWithChildren<{  className?: ClassNameProp<typeof buttonClassName>}>const Button = ({ children, className }: ButtonProps) => {  return (    <button      className={resolveClassName(        {},        buttonClassName,        className,      )}    >      {children}    </button>  )}

Button.tsx (after)

import type { ClassNameProp } from '@unwind/class-name'import { defineClassName, resolveClassName } from '@unwind/class-name'import React, { PropsWithChildren, useCallback, useState } from 'react'const buttonClassName = defineClassName(({ active }: { active: boolean }, previous) => [  ...previous,  active    ? 'bg-green-500 shadow-inner active:bg-green-600'    : 'bg-gray-50 hover:bg-white active:bg-gray-200',  active ? 'border-green-600' : 'border-gray-300', 'border rounded',  active ? 'text-white' : 'text-black', 'font-bold',  'py-2 px-4',])type ButtonProps = PropsWithChildren<{  className?: ClassNameProp<typeof buttonClassName>}>const Button = ({ children, className }: ButtonProps) => {  const [active, setActive] = useState(false)  return (    <button      className={resolveClassName(        { active },        buttonClassName,        className,      )}      onClick={useCallback(() => { setActive(state => !state) }, [])}    >      {children}    </button>  )}

---

4. The final code

We updated className prop to accept various types of values:

Append class

Live Editor

import type { ClassNameProp } from '@unwind/class-name' import { defineClassName, resolveClassName } from '@unwind/class-name' import React, { PropsWithChildren, useCallback, useState } from 'react' const buttonClassName = defineClassName(({ active }: { active: boolean }, previous) => [ ...previous, active ? 'bg-green-500 shadow-inner active:bg-green-600' : 'bg-gray-50 hover:bg-white active:bg-gray-200', active ? 'border-green-600' : 'border-gray-300', 'border rounded', active ? 'text-white' : 'text-black', 'font-bold', 'py-2 px-4', ]) type ButtonProps = PropsWithChildren<{ className?: ClassNameProp<typeof buttonClassName> }> const Button = ({ children, className }: ButtonProps) => { const [active, setActive] = useState(false) return ( <button className={resolveClassName( { active }, buttonClassName, className, )} onClick={useCallback(() => { setActive(state => !state) }, [])} > {children} </button> ) } // App.tsx function App() { return ( <Button className="w-full" > Click me! </Button> ) }

import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import React, { PropsWithChildren, useCallback, useState } from 'react'

const buttonClassName = defineClassName(({ active }: { active: boolean }, previous) => [
  ...previous,
  active
    ? 'bg-green-500 shadow-inner active:bg-green-600'
    : 'bg-gray-50 hover:bg-white active:bg-gray-200',
  active ? 'border-green-600' : 'border-gray-300', 'border rounded',
  active ? 'text-white' : 'text-black', 'font-bold',
  'py-2 px-4',
])

type ButtonProps = PropsWithChildren<{
  className?: ClassNameProp<typeof buttonClassName>
}>

const Button = ({ children, className }: ButtonProps) => {
  const [active, setActive] = useState(false)

  return (
    <button
      className={resolveClassName(
        { active },
        buttonClassName,
        className,
      )}
      onClick={useCallback(() => { setActive(state => !state) }, [])}
    >
      {children}
    </button>
  )
}

// App.tsx
function App() {
  return (
    <Button
      className="w-full"
    >
      Click me!
    </Button>
  )
}

Result

Loading...

Append string[]

Live Editor

import type { ClassNameProp } from '@unwind/class-name' import { defineClassName, resolveClassName } from '@unwind/class-name' import React, { PropsWithChildren, useCallback, useState } from 'react' const buttonClassName = defineClassName(({ active }: { active: boolean }, previous) => [ ...previous, active ? 'bg-green-500 shadow-inner active:bg-green-600' : 'bg-gray-50 hover:bg-white active:bg-gray-200', active ? 'border-green-600' : 'border-gray-300', 'border rounded', active ? 'text-white' : 'text-black', 'font-bold', 'py-2 px-4', ]) type ButtonProps = PropsWithChildren<{ className?: ClassNameProp<typeof buttonClassName> }> const Button = ({ children, className }: ButtonProps) => { const [active, setActive] = useState(false) return ( <button className={resolveClassName( { active }, buttonClassName, className, )} onClick={useCallback(() => { setActive(state => !state) }, [])} > {children} </button> ) } // App.tsx function App() { return ( <Button className={['w-full', 'rounded-full']} > Click me! </Button> ) }

import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import React, { PropsWithChildren, useCallback, useState } from 'react'

const buttonClassName = defineClassName(({ active }: { active: boolean }, previous) => [
  ...previous,
  active
    ? 'bg-green-500 shadow-inner active:bg-green-600'
    : 'bg-gray-50 hover:bg-white active:bg-gray-200',
  active ? 'border-green-600' : 'border-gray-300', 'border rounded',
  active ? 'text-white' : 'text-black', 'font-bold',
  'py-2 px-4',
])

type ButtonProps = PropsWithChildren<{
  className?: ClassNameProp<typeof buttonClassName>
}>

const Button = ({ children, className }: ButtonProps) => {
  const [active, setActive] = useState(false)

  return (
    <button
      className={resolveClassName(
        { active },
        buttonClassName,
        className,
      )}
      onClick={useCallback(() => { setActive(state => !state) }, [])}
    >
      {children}
    </button>
  )
}

// App.tsx
function App() {
  return (
    <Button
      className={['w-full', 'rounded-full']}
    >
      Click me!
    </Button>
  )
}

Result

Loading...

Redefine colors altogether

Live Editor

import type { ClassNameProp } from '@unwind/class-name' import { defineClassName, resolveClassName } from '@unwind/class-name' import React, { PropsWithChildren, useCallback, useState } from 'react' const buttonClassName = defineClassName(({ active }: { active: boolean }, previous) => [ ...previous, active ? 'bg-green-500 shadow-inner active:bg-green-600' : 'bg-gray-50 hover:bg-white active:bg-gray-200', active ? 'border-green-600' : 'border-gray-300', 'border rounded', active ? 'text-white' : 'text-black', 'font-bold', 'py-2 px-4', ]) type ButtonProps = PropsWithChildren<{ className?: ClassNameProp<typeof buttonClassName> }> const Button = ({ children, className }: ButtonProps) => { const [active, setActive] = useState(false) return ( <button className={resolveClassName( { active }, buttonClassName, className, )} onClick={useCallback(() => { setActive(state => !state) }, [])} > {children} </button> ) } // App.tsx function App() { return ( <Button className={useCallback(({ active }, previous) => [ // 👇 you can filter previously generated classes (or remove altogether)... ...previous.filter(selector => selector.indexOf('bg-') < 0 && selector.indexOf('text-') && selector.indexOf('border-') ), // 👇 ... and add new classes active ? 'bg-orange-500 shadow-inner active:bg-orange-600' : 'bg-indigo-500 hover:bg-indigo-400 active:bg-indigo-600', active ? 'border-orange-600' : 'border-indigo-600', 'text-white', 'w-full', ], [])} > Click me! </Button> ) }

import type { ClassNameProp } from '@unwind/class-name'
import { defineClassName, resolveClassName } from '@unwind/class-name'
import React, { PropsWithChildren, useCallback, useState } from 'react'

const buttonClassName = defineClassName(({ active }: { active: boolean }, previous) => [
  ...previous,
  active
    ? 'bg-green-500 shadow-inner active:bg-green-600'
    : 'bg-gray-50 hover:bg-white active:bg-gray-200',
  active ? 'border-green-600' : 'border-gray-300', 'border rounded',
  active ? 'text-white' : 'text-black', 'font-bold',
  'py-2 px-4',
])

type ButtonProps = PropsWithChildren<{
  className?: ClassNameProp<typeof buttonClassName>
}>

const Button = ({ children, className }: ButtonProps) => {
  const [active, setActive] = useState(false)

  return (
    <button
      className={resolveClassName(
        { active },
        buttonClassName,
        className,
      )}
      onClick={useCallback(() => { setActive(state => !state) }, [])}
    >
      {children}
    </button>
  )
}

// App.tsx
function App() {
  return (
    <Button
      className={useCallback(({ active }, previous) => [
        // 👇 you can filter previously generated classes (or remove altogether)...
        ...previous.filter(selector => selector.indexOf('bg-') < 0
          && selector.indexOf('text-')
          && selector.indexOf('border-')
        ),
        // 👇 ... and add new classes
        active
          ? 'bg-orange-500 shadow-inner active:bg-orange-600'
          : 'bg-indigo-500 hover:bg-indigo-400 active:bg-indigo-600',
        active ? 'border-orange-600' : 'border-indigo-600',
        'text-white',
        'w-full',
      ], [])}
    >
      Click me!
    </Button>
  )
}

Result

Loading...