# Module: twind/css

twind/css provides a set of utilities that allow you to write arbitrary CSS within Twind with support for global styles, animations, and more.

📚 Please see the CSS in Twind for detailed usage instructions an examples.

# Exports

# The css function

This function allows you to write CSS within Twind and provides support for global styling.

📚 View Handbook Guide

📓 View API Reference

# The theme function

This function can be used to access theme values inside of a css function call.

📚 View Handbook Guide

📓 View API Reference

# The apply function

This function allows you to provide Twind rules inside of a css function call.

📚 View Handbook Guide

📓 View API Reference

# The screen function

This function allows you to create media queries that reference your Twind breakpoints by name (sm,md, etc.).

📚 View Handbook Guide

📓 View API Reference

# The animation function

This function provides a simplified abstraction for creating custom animations within a css function call.

📚 View Handbook Guide

📓 View API Reference

# The keyframes function

This function provides a simple way to define keyframes for use within an animation function call.

📚 View Handbook Guide

📓 View API Reference

# Table of contents

# Interfaces

• Animation
• CSSFactory
• Screen

# References

# 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

# 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

# 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

# apply

Re-exports: apply

# autoprefix

Re-exports: autoprefix

# create

Re-exports: create

# cssomSheet

Re-exports: cssomSheet

# directive

Re-exports: directive

# expandGroups

Re-exports: expandGroups

# hash

Re-exports: hash

# mode

Re-exports: mode

# noprefix

Re-exports: noprefix

# 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

# Functions

# animation

▸ Constanimation(value: string | CSSRules | (context: Context) => string): CSSFactory<Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSProperties | Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSRules>

# Parameters:

Returns: CSSFactory<Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSProperties | Record<string, CSSProperties | (context: Context) => CSSProperties>, CSSRules>

Defined in: src/css/index.ts:223

▸ Constanimation(value: string | CSSRules | (context: Context) => string, waypoints: Record<string, CSSProperties | (context: Context) => CSSProperties> | Directive<string>): Directive<CSSRules>

# Parameters:

Returns: Directive<CSSRules>

Defined in: src/css/index.ts:223

# css

▸ Constcss(strings: TemplateStringsArray, ...interpolations: readonly MaybeThunk<MaybeArray<undefined | null | string | number | false | void | CSSRules>>[]): Directive<CSSRules>

# Parameters:

Returns: Directive<CSSRules>

Defined in: src/css/index.ts:147

▸ Constcss(tokens: MaybeThunk<MaybeArray<undefined | null | false | void | ** | 0 | CSSRules>>): Directive<CSSRules>

# Parameters:

Returns: Directive<CSSRules>

Defined in: src/css/index.ts:147

▸ Constcss(...tokens: readonly MaybeThunk<undefined | null | false | void | ** | 0 | CSSRules>[]): Directive<CSSRules>

# Parameters:

Returns: Directive<CSSRules>

Defined in: src/css/index.ts:147

# keyframes

▸ Constkeyframes(strings: TemplateStringsArray, ...interpolations: readonly MaybeThunk<MaybeArray<undefined | null | string | number | false | void | CSSProperties | Record<string, CSSProperties | (context: Context) => CSSProperties>>>[]): Directive<string>

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)',
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)',
  }
})

css({
  animation: `${bounce} 1s ease infinite`,
})

# Parameters:

Returns: Directive<string>

Defined in: src/css/index.ts:187

▸ Constkeyframes(tokens: MaybeThunk<MaybeArray<undefined | null | false | void | ** | 0 | Record<string, CSSProperties | (context: Context) => CSSProperties>>>): Directive<string>

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)',
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)',
  }
})

css({
  animation: `${bounce} 1s ease infinite`,
})

# Parameters:

Returns: Directive<string>

Defined in: src/css/index.ts:187

▸ Constkeyframes(...tokens: readonly MaybeThunk<undefined | null | false | void | ** | 0 | Record<string, CSSProperties | (context: Context) => CSSProperties>>[]): Directive<string>

const bounce = keyframes({
  'from, 20%, 53%, 80%, to': {
    transform: 'translate3d(0,0,0)',
  },
  '40%, 43%': {
    transform: 'translate3d(0, -30px, 0)',
  },
  '70%': {
    transform: 'translate3d(0, -15px, 0)',
  },
  '90%': {
    transform: 'translate3d(0, -4px, 0)',
  }
})

css({
  animation: `${bounce} 1s ease infinite`,
})

# Parameters:

Returns: Directive<string>

Defined in: src/css/index.ts:187

# screen

▸ Constscreen(size: string): Directive<string>

# Parameters:

Returns: Directive<string>

Defined in: src/css/index.ts:259

▸ Constscreen(size: string, css: undefined | null | false | void | ** | 0 | CSSRules | Directive<CSSRules> | readonly (undefined | null | false | void | ** | 0 | CSSRules)[]): Directive<CSSRules>

# Parameters:

Returns: Directive<CSSRules>

Defined in: src/css/index.ts:259