tailwind-styled v1.0.1

Tailwind Styled

Installation

npm install tailwind-styled

Usage

import { styled } from 'tailwind-styled'

const Button = styled('button', {
  base: 'rounded',
  variants: {
    size: {
      sm: 'p-2 text-sm',
      md: 'p-3 text-base',
      lg: 'p-4 text-lg',
    },
    color: {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-gray-500 text-white',
    },
  },
  compoundVariants: [
    {
      size: 'sm',
      color: 'primary',
      css: 'font-bold',
    },
    {
      size: 'lg',
      color: 'secondary',
      css: 'font-semibold',
    },
  ],
  defaultVariants: {
    size: 'md',
    color: 'primary',
  },
})

<Button>Primary button</Button>

Framework agnostic

import { variants } from 'tailwind-styled'

const button = variants({
  base: 'rounded',
  variants: {
    size: {
      sm: 'p-2 text-sm',
      md: 'p-3 text-base',
      lg: 'p-4 text-lg',
    },
    color: {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-gray-500 text-white',
    },
  },
  compoundVariants: [
    {
      size: 'sm',
      color: 'primary',
      css: 'font-bold',
    },
    {
      size: 'lg',
      color: 'secondary',
      css: 'font-semibold',
    },
  ],
  defaultVariants: {
    size: 'md',
    color: 'primary',
  },
})

<button className={button()}>Primary button</button>

Composition

import { styled } from 'tailwind-styled'

const BaseButton = styled('button', {
	base: 'rounded px-2 py-1',
})

const PrimaryButton = styled(BaseButton, {
	base: 'bg-blue-500 text-white',
})

TypeScript

import { styled, type VariantProps } from 'tailwind-styled'

type ButtonProps = VariantProps<typeof Button>
//   ˆ? ButtonProps: { size?: 'sm' | 'md' | 'lg', color?: 'primary' | 'secondary', className?: string }

const Button = styled('button', {
  base: 'rounded',
  variants: {
    size: {
      sm: 'p-2 text-sm',
      md: 'p-3 text-base',
      lg: 'p-4 text-lg',
    },
    color: {
      primary: 'bg-blue-500 text-white',
      secondary: 'bg-gray-500 text-white',
    },
  },
  compoundVariants: [
    {
      size: 'sm',
      color: 'primary',
      css: 'font-bold',
    },
    {
      size: 'lg',
      color: 'secondary',
      css: 'font-semibold',
    },
  ],
  defaultVariants: {
    size: 'md',
    color: 'primary',
  },
})

<Button>Primary button</Button>