Skip to content
API References
Tailwindest

Tailwindest

Briefly

  1. Use to create a type with a custom value defined in tailwind.config.js.
  2. Use to pick the tailwind property type for typing.

1. Type definition

type Tailwindest<
    TailwindGlobal extends
        TailwindGlobalPlugOption = TailwindDefaultGlobalPlugOption,
    TailwindStyle extends TailwindStylePlugOption = TailwindDefaultStylePlug,
    TailwindNestConditionPrefix extends
        TailwindNestConditionIdentifierOption = {
        breakIdentifier: "@"
        pseudoClassIdentifier: ":"
        pseudoElementIdentifier: "::"
    },
> = TailwindestTypeSet<
    TailwindestNestKeys<
        TailwindNestConditionPrefix,
        { screens: TailwindGlobal["screens"]; aria: TailwindStyle["aria"] }
    >,
    TailwindPlugin<TailwindGlobal, TailwindStyle>,
    | TailwindNestConditionPrefix["breakIdentifier"]
    | TailwindNestConditionPrefix["pseudoClassIdentifier"]
    | TailwindNestConditionPrefix["pseudoElementIdentifier"]
>

2. Spec

Usage

  1. basic tailwind type
type Basic = Tailwindest
  1. customized tailwind type
Add custom properties at tailwind.config.js
type CustomizedStyle = Tailwindest<TailwindGlobal, TailwindStyle>
  1. customize break condition identifier prefix
type CustomizedIdentifier = Tailwindest<
    TailwindGlobal,
    TailwindStyle,
    CustomizedBreakIdentifier
>

Generic Parameter: TailwindGlobal

type

All property is [optional]

type Custom = string literal union
type Custom = "write string literal union"
 
type TailwindGlobal = {
    color?: Custom
    opacity?: Custom
    sizing?: Custom
    screens?: Custom
}

Usage

add global property

  • color: font color, background color, border color, ring color, ...etc

  • opacity: opacity of all color. (bg-gray-100/15 ...etc)

  • sizing: padding, margin, ...etc,

  • screens: break condition like md, lg, ...etc,

Example

Define all the global values via string literal union types.

type MyCustom = Tailwindest<{
    color: "my-color-1" | "my-color-2" | "my-color-3"
    opacity: "15" | "25" | "35" | "45" | "55"
    sizing: "0.1" | "0.2" | "0.3" | "0.4" | "0.5"
    screens: "iphone7" | "ipad" | "mac13" | "mac14" | "mac16" | "imac"
}>

Generic Parameter: TailwindStyle

Usage

Add specific style's custom property, like borderRadius, aria, ...etc

Example

Define custom tailwind type

Define specific style property's custom value via string literal union types.

type MyCustom = Tailwindest<
    {},
    {
        accentColor: "my-accent-1" | "my-accent-2"
        borderRadius: "my-rad-1" | "my-rad-2"
        aria: "my-aria1" | "my-aria2" | "my-aria3"
    }
>

Generic Parameter: CustomizedBreakIdentifier

Usage

Customize break condition identifier prefix.

Three types of break condition identifier prefix are available.

  1. breakIdentifier: md, lg, aria-*, ...etc
  2. pseudoClassIdentifier: hover, focus, ...etc
  3. pseudoElementIdentifier: before, after, ...etc

Default value is like this.

{
    breakIdentifier: "@"
    pseudoClassIdentifier: ":"
    pseudoElementIdentifier: "::"
}

Example

Define custom break identifier prefix

Define identifier prefix via string literal union types.

⚠️

All the identifier should be only one string literal

type MyCustom = Tailwindest<
    {},
    {},
    {
        breakIdentifier: "@"
        pseudoClassIdentifier: "$"
        pseudoElementIdentifier: "::"
    }
>

Then you can access break conditions like this.

const tw = createTools<MyCustom>()
 
const box = tw.style({
    "@md": {
        $hover: {
            "::before": {
                //...
            },
        },
    },
    $hover: {},
    "::before": {},
})

Pick specific tailwind value

If you want to extract type of tailwindcss, wrap up Tailwindest type with Required and export it.

export type Tailwind = Required<Tailwindest>
export type CustomizedTailwind = Required<Tailwindest<{}, {}>>
  • basic type
type BgColor = Tailwind["backgroundColor"]
  • custom type
type BgColor = CustomizedTailwind["backgroundColor"]
  • use picked type for typing of props
interface BoxProps {
    //...
    bg?: CustomizedTailwind["backgroundColor"]
    //...
}
 
const Box = (props: BoxProps) => <div bg={props.bg}>{...}</div>
createToolsShortTailwindest