Module: twind/style

DocumentationGithubModule SizeTypescript

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

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


MaybeThunk

Re-exports: MaybeThunk


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


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:

Name
Variants

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:

Name
T

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:

Name
T

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


StyleProps

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

Type parameters:

Name
Variants

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:

Name
Variants

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:

Name
T

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:

Name
Variants

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

Functions

style

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

Type parameters:

Name
Variants

Parameters:

NameType
config?StyleConfig<Variants, {}>

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:

Name
Variants
BaseVariants

Parameters:

NameType
baseStyle<BaseVariants>
config?StyleConfig<Variants, BaseVariants>

Returns: Style<BaseVariants & Variants> & string

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