Skip to content
Recipes
Customize

Customize

Tailwindest

tailwind docs, tailwind.config.js (opens in a new tab)

Tailwindest is a tailwind type definition to apply the customized values in tailwind.config.js.

Global style

api reference, screens

Tailwind has three global custom properties.

  1. screens: Defines the break condition.
  2. color: Defines a new color palette.
  3. opacity: Defines a new color opacity.
  4. spacing: Defines a new spacing. (ex: margin, padding, ...)

You can define customized global values via Tailwindest's first generic type.

type TailwindCustom = Tailwindest<{
    screens: "iphone" | "mac14" | "mac16"
    opacity: "12.5" | "17.5"
    sizing: "5" | "7.5"
    color: "my1" | "my2"
}>

Screens

tailwind docs, screens (opens in a new tab)

Define and access custom break conditions via three types of identifier.

  1. pseudo classes
  2. pseudo elements
  3. media and feature queries

You can define custom accessor keyword via Tailwindest's third generic type.

If your custom value is like this,

tailwind.config.js
module.exports = {
    theme: {
        extend: {
            screens: {
                my1: "600px",
                my2: "1000px",
                my3: "1400px",
            },
        },
    },
}

then you can define like this.

tw.ts
type TailwindCustom = Tailwindest<{
    screens: "my1" | "my2" | "my3"
}>
 
const customBreakCondition: TailwindCustom = {
    "@my1": {
        backgroundColor: "my1:bg-amber-300",
    },
    "@my2": {
        backgroundColor: "my2:bg-amber-300",
    },
    "@my3": {
        "@my2": {
            backgroundColor: "my3:my2:bg-amber-300",
            "@my1": {
                backgroundColor: "my3:my2:my1:bg-amber-300",
            },
        },
    },
}

Colors

tailwind docs, colors (opens in a new tab)

tailwind.config.js
module.exports = {
    theme: {
        extend: {
            colors: {
                primary: "#371A1A",
                secondary: "#682F2F",
            },
        },
    },
}
tw.ts
type TailwindCustom = Tailwindest<{
    color: "primary" | "secondary"
}>
 
const customColor: TailwindCustom = {
    color: "text-primary",
    backgroundColor: "bg-secondary",
    borderColor: "border-primary",
    "@dark": {
        borderColor: "dark:border-secondary",
    },
}

Opacity

tailwind docs, opacity (opens in a new tab)

tailwind.config.js
module.exports = {
    theme: {
        extend: {
            opacity: {
                11: "0.11",
                12: "0.12",
                13: "0.13",
            },
        },
    },
}
tw.ts
type TailwindCustom = Tailwindest<{
    opacity: "11" | "12" | "13"
}>
 
const customOpacity: TailwindCustom = {
    color: "text-gray-900/11",
    backgroundColor: "bg-gray-100/12",
    "@dark": {
        backgroundColor: "dark:bg-[#000]/13",
    },
}

Spacing

tailwind docs, spacing (opens in a new tab)

tailwind.config.js
module.exports = {
    theme: {
        extend: {
            spacing: {
                0.25: "0.25rem",
                0.75: "0.75rem",
                1.25: "1.25rem",
            },
        },
    },
}
tw.ts
type TailwindCustom = Tailwindest<{
    spacing: "0.25" | "0.75" | "1.25"
}>
 
const customSpacing: TailwindCustom = {
    padding: "p-0.25",
    marginX: "mx-0.75",
    borderXWidth: "border-x-1.25",
    "@md": {
        height: "md:h-1.25",
    },
}

Normal styles

tailwind docs, supported custom value list (opens in a new tab)

api reference, screens

For example, if you wanted to add a new property type for fontFamily, you could do something like this.

tailwind.config.js
module.exports = {
    theme: {
        extend: {
            fontFamily: {
                display: ["Oswald", ...],
                body: ['"Open Sans"', ...],
            },
        },
    },
}
tw.ts
type TailwindCustom = Tailwindest<
    {},
    {
        fontFamily: "display" | "body"
    }
>
 
const customFontfamily: TailwindCustom = {
    fontFamily: "font-display",
    "@md": {
        fontFamily: "md:font-body",
    },
}

Javascript type support

You can define your custom type definition in javascript via jsdoc.

wind.js
import { createWind } from "tailwindest"
 
/** @typedef {import("tailwindest").Tailwindest<{color: "my-color" | "my-test-color", screens: "my"}, {}>} CustomTailwind */
/** @typedef {ReturnType<typeof createWind<CustomTailwind>>} CreateWind */
/** @typedef {Required<CustomTailwind>} Tailwind */
 
/** @type {CreateWind} */
export const tw = createWind()

Access custom type at javascript files.

box.js
const box = tw.style({
    color: "text-my-color",
    "@my": {
        color: "my:text-my-test-color",
    },
})
Conditional stylingUtility