Module: twind/css

DocumentationGithubModule SizeTypescript

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

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


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


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


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:

NameType
valuestring | CSSRules | (context: Context) => string

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:

NameType
valuestring | CSSRules | (context: Context) => string
waypointsRecord<string, CSSProperties | (context: Context) => CSSProperties> | Directive<string>

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:

NameType
stringsTemplateStringsArray
...interpolationsreadonly MaybeThunk<MaybeArray<undefined | null | string | number | false | void | CSSRules>>[]

Returns: Directive<CSSRules>

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

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

Parameters:

NameType
tokensMaybeThunk<MaybeArray<undefined | null | false | void | ** | 0 | CSSRules>>

Returns: Directive<CSSRules>

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

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

Parameters:

NameType
...tokensreadonly MaybeThunk<undefined | null | false | void | ** | 0 | CSSRules>[]

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:

NameType
stringsTemplateStringsArray
...interpolationsreadonly MaybeThunk<MaybeArray<undefined | null | string | number | false | void | CSSProperties | Record<string, CSSProperties | (context: Context) => CSSProperties>>>[]

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:

NameType
tokensMaybeThunk<MaybeArray<undefined | null | false | void | ** | 0 | Record<string, CSSProperties | (context: Context) => CSSProperties>>>

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:

NameType
...tokensreadonly MaybeThunk<undefined | null | false | void | ** | 0 | Record<string, CSSProperties | (context: Context) => CSSProperties>>[]

Returns: Directive<string>

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


screen

Constscreen(size: string): Directive<string>

Parameters:

NameType
sizestring

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:

NameType
sizestring
cssundefined | null | false | void | ** | 0 | CSSRules | Directive<CSSRules> | readonly (undefined | null | false | void | ** | 0 | CSSRules)[]

Returns: Directive<CSSRules>

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