@plumeria/wind

@plumeria/wind provides Tailwind CSS design values as static tokens. The values are compiled into your styles at build time, so the package adds nothing to your bundle.

Installation

Terminal

pnpm i -D @plumeria/wind

Usage

Button.tsx

import * as css from '@plumeria/core';
import * as t from '@plumeria/wind';

const styles = css.create({
  button: {
    paddingInline: t.spacing[4],
    fontSize: t.text.sm,
    color: t.slate[50],
    backgroundColor: t.blue[600],
    borderRadius: t.radius.md,
  },
});

The namespace name is up to you, and named imports work the same way.

Animations pair a keyframes export with its timing.

Spinner.tsx

import * as css from '@plumeria/core';
import * as t from '@plumeria/wind';

const styles = css.create({
  spinner: {
    animation: `${t.spin} ${t.animate.spin}`,
  },
});

Colors

50100200300400500600700800900950redorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkroseslategrayzincneutralstonemauveolivemisttaupe

Typography

font

`t.font.sans`	`-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'Noto Sans', Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`
`t.font.serif`	`ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`
`t.font.mono`	`ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace`

text

`t.text.xs`	`0.75rem`
`t.text.sm`	`0.875rem`
`t.text.base`	`1rem`
`t.text.lg`	`1.125rem`
`t.text.xl`	`1.25rem`
`t.text['2xl']`	`1.5rem`
`t.text['3xl']`	`1.875rem`
`t.text['4xl']`	`2.25rem`
`t.text['5xl']`	`3rem`
`t.text['6xl']`	`3.75rem`
`t.text['7xl']`	`4.5rem`
`t.text['8xl']`	`6rem`
`t.text['9xl']`	`8rem`

textLineHeight

`t.textLineHeight.xs`	`calc(1 / 0.75)`
`t.textLineHeight.sm`	`calc(1.25 / 0.875)`
`t.textLineHeight.base`	`calc(1.5 / 1)`
`t.textLineHeight.lg`	`calc(1.75 / 1.125)`
`t.textLineHeight.xl`	`calc(1.75 / 1.25)`
`t.textLineHeight['2xl']`	`calc(2 / 1.5)`
`t.textLineHeight['3xl']`	`calc(2.25 / 1.875)`
`t.textLineHeight['4xl']`	`calc(2.5 / 2.25)`
`t.textLineHeight['5xl']`	`1`
`t.textLineHeight['6xl']`	`1`
`t.textLineHeight['7xl']`	`1`
`t.textLineHeight['8xl']`	`1`
`t.textLineHeight['9xl']`	`1`

fontWeight

`t.fontWeight.thin`	`100`
`t.fontWeight.extralight`	`200`
`t.fontWeight.light`	`300`
`t.fontWeight.normal`	`400`
`t.fontWeight.medium`	`500`
`t.fontWeight.semibold`	`600`
`t.fontWeight.bold`	`700`
`t.fontWeight.extrabold`	`800`
`t.fontWeight.black`	`900`

tracking

`t.tracking.tighter`	`-0.05em`
`t.tracking.tight`	`-0.025em`
`t.tracking.normal`	`0em`
`t.tracking.wide`	`0.025em`
`t.tracking.wider`	`0.05em`
`t.tracking.widest`	`0.1em`

leading

`t.leading.tight`	`1.25`
`t.leading.snug`	`1.375`
`t.leading.normal`	`1.5`
`t.leading.relaxed`	`1.625`
`t.leading.loose`	`2`

Spacing

`t.spacing[0]`	`0`
`t.spacing[1]`	`0.25rem`
`t.spacing[2]`	`0.5rem`
`t.spacing[3]`	`0.75rem`
`t.spacing[4]`	`1rem`
`t.spacing[5]`	`1.25rem`
`t.spacing[6]`	`1.5rem`
`t.spacing[7]`	`1.75rem`
`t.spacing[8]`	`2rem`
`t.spacing[9]`	`2.25rem`
`t.spacing[10]`	`2.5rem`
`t.spacing[11]`	`2.75rem`
`t.spacing[12]`	`3rem`
`t.spacing[14]`	`3.5rem`
`t.spacing[16]`	`4rem`
`t.spacing[20]`	`5rem`
`t.spacing[24]`	`6rem`
`t.spacing[28]`	`7rem`
`t.spacing[32]`	`8rem`
`t.spacing[36]`	`9rem`
`t.spacing[40]`	`10rem`
`t.spacing[44]`	`11rem`
`t.spacing[48]`	`12rem`
`t.spacing[52]`	`13rem`
`t.spacing[56]`	`14rem`
`t.spacing[60]`	`15rem`
`t.spacing[64]`	`16rem`
`t.spacing[72]`	`18rem`
`t.spacing[80]`	`20rem`
`t.spacing[96]`	`24rem`
`t.spacing.px`	`1px`
`t.spacing['0.5']`	`0.125rem`
`t.spacing['1.5']`	`0.375rem`
`t.spacing['2.5']`	`0.625rem`
`t.spacing['3.5']`	`0.875rem`

Borders and Effects

radius

`t.radius.xs`	`0.125rem`
`t.radius.sm`	`0.25rem`
`t.radius.md`	`0.375rem`
`t.radius.lg`	`0.5rem`
`t.radius.xl`	`0.75rem`
`t.radius['2xl']`	`1rem`
`t.radius['3xl']`	`1.5rem`
`t.radius['4xl']`	`2rem`

shadow

`t.shadow['2xs']`	`0 1px rgb(0 0 0 / 0.05)`
`t.shadow.xs`	`0 1px 2px 0 rgb(0 0 0 / 0.05)`
`t.shadow.sm`	`0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)`
`t.shadow.md`	`0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)`
`t.shadow.lg`	`0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)`
`t.shadow.xl`	`0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)`
`t.shadow['2xl']`	`0 25px 50px -12px rgb(0 0 0 / 0.25)`

insetShadow

`t.insetShadow['2xs']`	`inset 0 1px rgb(0 0 0 / 0.05)`
`t.insetShadow.xs`	`inset 0 1px 1px rgb(0 0 0 / 0.05)`
`t.insetShadow.sm`	`inset 0 2px 4px rgb(0 0 0 / 0.05)`

dropShadow

`t.dropShadow.xs`	`0 1px 1px rgb(0 0 0 / 0.05)`
`t.dropShadow.sm`	`0 1px 2px rgb(0 0 0 / 0.15)`
`t.dropShadow.md`	`0 3px 3px rgb(0 0 0 / 0.12)`
`t.dropShadow.lg`	`0 4px 4px rgb(0 0 0 / 0.15)`
`t.dropShadow.xl`	`0 9px 7px rgb(0 0 0 / 0.1)`
`t.dropShadow['2xl']`	`0 25px 25px rgb(0 0 0 / 0.15)`

textShadow

`t.textShadow['2xs']`	`0px 1px 0px rgb(0 0 0 / 0.15)`
`t.textShadow.xs`	`0px 1px 1px rgb(0 0 0 / 0.2)`
`t.textShadow.sm`	`0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)`
`t.textShadow.md`	`0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)`
`t.textShadow.lg`	`0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)`

blur

`t.blur.xs`	`4px`
`t.blur.sm`	`8px`
`t.blur.md`	`12px`
`t.blur.lg`	`16px`
`t.blur.xl`	`24px`
`t.blur['2xl']`	`40px`
`t.blur['3xl']`	`64px`

Layout

breakpoint

`t.breakpoint.sm`	`40rem`
`t.breakpoint.md`	`48rem`
`t.breakpoint.lg`	`64rem`
`t.breakpoint.xl`	`80rem`
`t.breakpoint['2xl']`	`96rem`

container

`t.container['3xs']`	`16rem`
`t.container['2xs']`	`18rem`
`t.container.xs`	`20rem`
`t.container.sm`	`24rem`
`t.container.md`	`28rem`
`t.container.lg`	`32rem`
`t.container.xl`	`36rem`
`t.container['2xl']`	`42rem`
`t.container['3xl']`	`48rem`
`t.container['4xl']`	`56rem`
`t.container['5xl']`	`64rem`
`t.container['6xl']`	`72rem`
`t.container['7xl']`	`80rem`

aspect

t.aspect.video 16 / 9

perspective

`t.perspective.dramatic`	`100px`
`t.perspective.near`	`300px`
`t.perspective.normal`	`500px`
`t.perspective.midrange`	`800px`
`t.perspective.distant`	`1200px`

Motion

ease

`t.ease.in`	`cubic-bezier(0.4, 0, 1, 1)`
`t.ease.out`	`cubic-bezier(0, 0, 0.2, 1)`
`t.ease['in-out']`	`cubic-bezier(0.4, 0, 0.2, 1)`

transition

`t.transition.duration`	`150ms`
`t.transition.timingFunction`	`cubic-bezier(0.4, 0, 0.2, 1)`

animate

`t.animate.spin`	`1s linear infinite`
`t.animate.ping`	`1s cubic-bezier(0, 0, 0.2, 1) infinite`
`t.animate.pulse`	`2s cubic-bezier(0.4, 0, 0.6, 1) infinite`
`t.animate.bounce`	`1s infinite`

Keyframes: spin, ping, pulse, bounce.

Base Colors

`t.color.black`	`#000`
`t.color.white`	`#fff`

The theme values are taken from Tailwind CSS v4.3.3 and distributed under its MIT license.

On this page