PACKAGES
@plumeria/wind
Tailwind CSS theme values as static tokens for Plumeria.
The values are compiled into your styles at build time, so the package adds nothing to your bundle.
Installation
pnpm i -D @plumeria/windUsage
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.
A token passed as an argument to a function key is not compiled, so read it inside css.create instead.
Colors
50100200300400500600700800900950redorangeamberyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose
50100200300400500600700800900950slategrayzincneutralstonemauveolivemisttaupe
color
t.color.black#000
t.color.white#fff
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.serifui-serif, Georgia, Cambria, 'Times New Roman', Times, serif
t.font.monoui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace
text
t.text.xs0.75rem
t.text.sm0.875rem
t.text.base1rem
t.text.lg1.125rem
t.text.xl1.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.xscalc(1 / 0.75)
t.textLineHeight.smcalc(1.25 / 0.875)
t.textLineHeight.basecalc(1.5 / 1)
t.textLineHeight.lgcalc(1.75 / 1.125)
t.textLineHeight.xlcalc(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.thin100
t.fontWeight.extralight200
t.fontWeight.light300
t.fontWeight.normal400
t.fontWeight.medium500
t.fontWeight.semibold600
t.fontWeight.bold700
t.fontWeight.extrabold800
t.fontWeight.black900
tracking
t.tracking.tighter-0.05em
t.tracking.tight-0.025em
t.tracking.normal0em
t.tracking.wide0.025em
t.tracking.wider0.05em
t.tracking.widest0.1em
leading
t.leading.tight1.25
t.leading.snug1.375
t.leading.normal1.5
t.leading.relaxed1.625
t.leading.loose2
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.px1px
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.xs0.125rem
t.radius.sm0.25rem
t.radius.md0.375rem
t.radius.lg0.5rem
t.radius.xl0.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.xs0 1px 2px 0 rgb(0 0 0 / 0.05)
t.shadow.sm0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)
t.shadow.md0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)
t.shadow.lg0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)
t.shadow.xl0 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.xsinset 0 1px 1px rgb(0 0 0 / 0.05)
t.insetShadow.sminset 0 2px 4px rgb(0 0 0 / 0.05)
dropShadow
t.dropShadow.xs0 1px 1px rgb(0 0 0 / 0.05)
t.dropShadow.sm0 1px 2px rgb(0 0 0 / 0.15)
t.dropShadow.md0 3px 3px rgb(0 0 0 / 0.12)
t.dropShadow.lg0 4px 4px rgb(0 0 0 / 0.15)
t.dropShadow.xl0 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.xs0px 1px 1px rgb(0 0 0 / 0.2)
t.textShadow.sm0px 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.md0px 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.lg0px 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.xs4px
t.blur.sm8px
t.blur.md12px
t.blur.lg16px
t.blur.xl24px
t.blur['2xl']40px
t.blur['3xl']64px
Layout
breakpoint
t.breakpoint.sm40rem
t.breakpoint.md48rem
t.breakpoint.lg64rem
t.breakpoint.xl80rem
t.breakpoint['2xl']96rem
A breakpoint is a length, so write the query around it:
const styles = css.create({
grid: {
gap: t.spacing[2],
[`@media (width >= ${t.breakpoint.md})`]: {
gap: t.spacing[4],
},
},
});container
t.container['3xs']16rem
t.container['2xs']18rem
t.container.xs20rem
t.container.sm24rem
t.container.md28rem
t.container.lg32rem
t.container.xl36rem
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.video16 / 9
perspective
t.perspective.dramatic100px
t.perspective.near300px
t.perspective.normal500px
t.perspective.midrange800px
t.perspective.distant1200px
Motion
ease
t.ease.incubic-bezier(0.4, 0, 1, 1)
t.ease.outcubic-bezier(0, 0, 0.2, 1)
t.ease['in-out']cubic-bezier(0.4, 0, 0.2, 1)
transition
t.transition.duration150ms
t.transition.timingFunctioncubic-bezier(0.4, 0, 0.2, 1)
animate
t.animate.spin1s linear infinite
t.animate.ping1s cubic-bezier(0, 0, 0.2, 1) infinite
t.animate.pulse2s cubic-bezier(0.4, 0, 0.6, 1) infinite
t.animate.bounce1s infinite
Animations pair a keyframes export (t.spin, t.ping, t.pulse, t.bounce) with its timing.
import * as css from '@plumeria/core';
import * as t from '@plumeria/wind';
const styles = css.create({
spinner: {
animation: `${t.spin} ${t.animate.spin}`,
},
});The values are taken from Tailwind CSS V4 under the MIT License.