# Module: twind/style

twind/style is a framework agnostic component API that is heavily inspired by stitches. It allows you to define composable components which are typed automatically.

For a preview of the React integration take a look at @twind/react. Other framework integrations will follow.

import { tw, style } from 'twind/style'

const button = style({
  // Define the base style using tailwindcss class names
  base: `rounded-full px-2.5`,

  // Declare all possible properties
  variants: {
    // button({ size: 'sm' })
    size: {
      sm: `text-sm h-6`,
      md: `text-base h-9`,
    },

    // button({ variant: 'primary' })
    variant: {
      gray: `
        bg-gray-400
        hover:bg-gray-500
      `,
      primary: `
        text-white bg-purple-400
        hover:bg-purple-500
      `,
    },
    // button({ outlined: true })
    outlined: {
      true: `bg-transparent ring-1`,
    },
  },

  // Set defaults for properties
  defaults: {
    variant: 'gray',
    size: 'sm',
  },

  // Apply additional styling based on the compination of properties
  matches: [
    {
      // If props match { variant: 'gray', outlined: true } add ring-gray-400
      variant: 'gray',
      outlined: true,
      use: `ring-gray-400`,
    },
  ],
})

// Use the defaults { variant: 'gray', size: 'sm }
tw(button())
// => rounded-full px-2.5 bg-gray-400 hover:bg-gray-500 text-sm h-6

// Customize the style
tw(button({ variant: 'primary', size: 'md', outlined: true }))
// => rounded-full px-2.5 text-white bg-purple-400 hover:bg-purple-500 text-base h-9 bg-transparent ring-1

// Matches props combination
tw(button({ outlined: true }))
// => rounded-full px-2.5 bg-gray-400 hover:bg-gray-500 text-sm h-6 bg-transparent ring-1 ring-gray-400

// Use the tw property to add special styles
tw(button({ tw: `rounded-sm px-4 mx-auto` }))
// => bg-gray-400 hover:bg-gray-500 text-sm h-6 rounded-sm px-4 mx-auto

// Use the css property to add special styles
tw(button({ css: { scrollSnapType: 'x' } }))
// => rounded-full px-2.5 bg-gray-400 hover:bg-gray-500 text-sm h-6 tw-css

// Add additional classes to the component (className is a convenience for jsx)
tw(button({ class: 'x y', className: 'a b' }))
// => rounded-full px-2.5 bg-gray-400 hover:bg-gray-500 text-sm h-6 x y a b

All configuration properties are optional in which case you have a component (often called box) that only accepts the tw, css, class and className properties.

import { tw, style } from 'twind/style'

const box = style()

tw(box({ tw: `text-center` }))

Instead of using strings, eg tailwind class names, you can use CSS objects or the result of css or apply.

import { tw, style, apply, css, theme } from 'twind/style'
import { lineClamp } from '@twind/line-clamp'

const card = style({
  base: apply`rounded-sm p-4 ${lineClamp(3)}`,

  variants: {
    size: {
      sm: 'text-sm',
      lg: css`
        font-size: 3rem;
        height: ${theme('spacing.12')};
      `,
    },
    variant: {
      gray: {
        backgroundColor: theme('colors.gray.400'),
        '&:hover': {
          backgroundColor: theme('colors.gray.500'),
        },
      },
    },
  },
})

# Responsive variants

You can apply different variants at different breakpoints or even arbitrary at-rule.

import { tw, style } from 'twind/style'

const box = style({
  variants: {
    color: {
      coral: {
        backgroundColor: 'coral',
      },
      purple: {
        backgroundColor: 'purple',
      },
      tomato: {
        backgroundColor: 'tomato',
      },
    },
  },
})

tw(box({
  color: {
    // Optional initial value
    initial: 'coral',
    // Any theme screen value
    md: 'purple',
    // Some at-rule
    '@media (orientation: portrait)': 'tomato',
  },
})

# Composing Components

Components can be composed via the style function.

import { tw, style } from 'twind/style'

const base = style({
  base: `bg-purple-500 text(white md) font-bold`,
  variants: {
    size: {
      small: `text-sm h-5 px-2`,
      large: `text-lg h-7 px-5`,
    },
  },
})

const pill = style(base, {
  base: 'rounded-full',
})

tw(base({ size: 'small' }))
// => bg-purple-500 text-white font-bold text-sm h-5 px-2

tw(pill({ size: 'large' }))
// => bg-purple-500 text-white font-bold text-lg h-7 px-5 rounded-full

# Table of contents

# Interfaces

• BaseStyleProps
• Style
• StyleConfig
• StyleFunction

# References

# Animation

Re-exports: Animation

# Apply

Re-exports: Apply

# BlendMode

Re-exports: BlendMode

# BorderStyle

Re-exports: BorderStyle

# CSSAtKeyframes

Re-exports: CSSAtKeyframes

# CSSAtMedia

Re-exports: CSSAtMedia

# CSSAtSupports

Re-exports: CSSAtSupports

# CSSCustomProperties

Re-exports: CSSCustomProperties

# CSSFactory

Re-exports: CSSFactory

# CSSProperties

Re-exports: CSSProperties

# CSSPseudos

Re-exports: CSSPseudos

# CSSRuleValue

Re-exports: CSSRuleValue

# CSSRules

Re-exports: CSSRules

# CSSRulesThunk

Re-exports: CSSRulesThunk

# CSSSimplePseudos

Re-exports: CSSSimplePseudos

# CompletionTokens

Re-exports: CompletionTokens

# Configuration

Re-exports: Configuration

# Context

Re-exports: Context

# CoreCompletionTokens

Re-exports: CoreCompletionTokens

# CorePlugins

Re-exports: CorePlugins

# CoreVariants

Re-exports: CoreVariants

# Corners

Re-exports: Corners

# CounterStyle

Re-exports: CounterStyle

# DarkMode

Re-exports: DarkMode

# Directive

Re-exports: Directive

# DirectiveHandler

Re-exports: DirectiveHandler

# Edges

Re-exports: Edges

# Empty

Re-exports: Empty

# Falsy

Re-exports: Falsy

# FontFace

Re-exports: FontFace

# FromTheme

Re-exports: FromTheme

# GlobalValue

Re-exports: GlobalValue

# Hasher

Re-exports: Hasher

# InlineDirective

Re-exports: InlineDirective

# Instance

Re-exports: Instance

# Interpolate

Re-exports: Interpolate

# InterpolateKind

Re-exports: InterpolateKind

# Join

Re-exports: Join

# JoinFromObject

Re-exports: JoinFromObject

# MaybeArray

Re-exports: MaybeArray

# MaybeObjInterpolationGeneric

Re-exports: MaybeObjInterpolationGeneric

# MaybeThunk

Re-exports: MaybeThunk

# MaybeTokenInterpolation

Re-exports: MaybeTokenInterpolation

# Mode

Re-exports: Mode

# Negatable

Re-exports: Negatable

# NonEmptyString

Re-exports: NonEmptyString

# Plugin

Re-exports: Plugin

# Plugins

Re-exports: Plugins

# Prefixer

Re-exports: Prefixer

# Preflight

Re-exports: Preflight

# Range

Re-exports: Range

# ReportInfo

Re-exports: ReportInfo

# Rule

Re-exports: Rule

# Screen

Re-exports: Screen

# Sheet

Re-exports: Sheet

# SheetConfig

Re-exports: SheetConfig

# SheetInit

Re-exports: SheetInit

# SheetInitCallback

Re-exports: SheetInitCallback

# SimplePseudoClasses

Re-exports: SimplePseudoClasses

# SimplePseudoElements

Re-exports: SimplePseudoElements

# TW

Re-exports: TW

# TWCallable

Re-exports: TWCallable

# Theme

Re-exports: Theme

# ThemeColor

Re-exports: ThemeColor

# ThemeColorObject

Re-exports: ThemeColorObject

# ThemeConfiguration

Re-exports: ThemeConfiguration

# ThemeContainer

Re-exports: ThemeContainer

# ThemeFontSize

Re-exports: ThemeFontSize

# ThemeHelper

Re-exports: ThemeHelper

# ThemeOutline

Re-exports: ThemeOutline

# ThemeResolver

Re-exports: ThemeResolver

# ThemeScreen

Re-exports: ThemeScreen

# ThemeScreenValue

Re-exports: ThemeScreenValue

# ThemeSection

Re-exports: ThemeSection

# ThemeSectionRecord

Re-exports: ThemeSectionRecord

# ThemeSectionResolver

Re-exports: ThemeSectionResolver

# ThemeSectionResolverContext

Re-exports: ThemeSectionResolverContext

# ThemeSectionType

Re-exports: ThemeSectionType

# ToString

Re-exports: ToString

# Token

Re-exports: Token

# TokenGrouping

Re-exports: TokenGrouping

# TypescriptCompat

Re-exports: TypescriptCompat

# Unwrap

Re-exports: Unwrap

# UserCompletionTokens

Re-exports: UserCompletionTokens

# Variants

Re-exports: Variants

# animation

Re-exports: animation

# apply

Re-exports: apply

# autoprefix

Re-exports: autoprefix

# create

Re-exports: create

# css

Re-exports: css

# cssomSheet

Re-exports: cssomSheet

# directive

Re-exports: directive

# expandGroups

Re-exports: expandGroups

# hash

Re-exports: hash

# keyframes

Re-exports: keyframes

# mode

Re-exports: mode

# noprefix

Re-exports: noprefix

# screen

Re-exports: screen

# setup

Re-exports: setup

# silent

Re-exports: silent

# strict

Re-exports: strict

# theme

Re-exports: theme

# tw

Re-exports: tw

# voidSheet

Re-exports: voidSheet

# warn

Re-exports: warn

# Type aliases

# DefaultVariants

Ƭ DefaultVariants<Variants>: { [key in keyof Variants]?: StrictMorphVariant<keyof Variants[key]> | Record<string, StrictMorphVariant<keyof Variants[key]>> & object}

# Type parameters:

Defined in: src/style/index.ts:44

# MorphVariant

Ƭ MorphVariant<T>: T extends number ? `${T}` | T : T extends true ? boolean | T : T extends false ? boolean | T : T extends `${number}` ? number | T : T

# Type parameters:

Defined in: src/style/index.ts:26

# StrictMorphVariant

Ƭ StrictMorphVariant<T>: T extends number ? `${T}` | T : T extends true ? true | T : T extends false ? false | T : T

# Type parameters:

Defined in: src/style/index.ts:18

# StyleProps

Ƭ StyleProps<Variants>: VariantsProps<Variants> & BaseStyleProps

# Type parameters:

Defined in: src/style/index.ts:90

# StyleToken

Ƭ StyleToken: string | CSSRules | Directive<CSSRules>

Defined in: src/style/index.ts:36

# VariantMatchers

Ƭ VariantMatchers<Variants>: { [key in keyof Variants]?: StrictMorphVariant<keyof Variants[key]>}

# Type parameters:

Defined in: src/style/index.ts:60

# VariantsOf

Ƭ VariantsOf<T>: T extends Style<infer Variants> ? { [key in keyof Variants]: MorphVariant<keyof Variants[key]>} : never

# Type parameters:

Defined in: src/style/index.ts:38

# VariantsProps

Ƭ VariantsProps<Variants>: { [key in keyof Variants]?: MorphVariant<keyof Variants[key]> | Record<string, MorphVariant<keyof Variants[key]>> & object}

# Type parameters:

Defined in: src/style/index.ts:52

# Functions

# style

▸ Conststyle<Variants>(config?: StyleConfig<Variants, {}>): Style<Variants> & string

# Type parameters:

# Parameters:

Returns: Style<Variants> & string

Defined in: src/style/index.ts:282

▸ Conststyle<Variants, BaseVariants>(base: Style<BaseVariants>, config?: StyleConfig<Variants, BaseVariants>): Style<BaseVariants & Variants> & string

# Type parameters:

# Parameters:

Returns: Style<BaseVariants & Variants> & string

Defined in: src/style/index.ts:282