Bosswind
Bosswind is a Tailwind-style compatibility layer for Boss CSS. It keeps Boss's prop:value syntax, but adds
Tailwind-like aliases and boolean keywords.
In className strings, Bosswind props can be written in dash-case (for example inline-flex, gap-x, flex-row). In
JSX, use camelCase (inlineFlex, gapX, flexRow).
Bosswind preserves the alias token in emitted class selectors. For example p={6} emits .p:6, and min-h:100vh
emits .min-h:100vh.
Setup
Bosswind needs to run before the token plugin so it can add Tailwind defaults and rewrite props.
import * as bosswind from 'boss-css/prop/bosswind/server'
import * as fontsource from 'boss-css/fontsource/server'
import * as reset from 'boss-css/reset/server'
import * as token from 'boss-css/use/token/server'
import * as at from 'boss-css/prop/at/server'
import * as child from 'boss-css/prop/child/server'
import * as css from 'boss-css/prop/css/server'
import * as pseudo from 'boss-css/prop/pseudo/server'
import * as classname from 'boss-css/parser/classname/server'
import * as jsx from 'boss-css/parser/jsx/server'
import * as inlineFirst from 'boss-css/strategy/inline-first/server'
export default {
plugins: [fontsource, reset, bosswind, token, at, child, css, pseudo, classname, jsx, inlineFirst],
}
What Bosswind adds
Boolean keywords
These are single keywords (no value) that map to CSS props. Value forms like block:1 are invalid (use display:block
or the real CSS prop instead).
- className
- JSX
<div className="block" />
<div className="inline-flex" />
<div className="absolute" />
<div className="flow-root" />
<$$ block />
<$$ inlineFlex />
<$$ absolute />
<$$ flowRoot />
Aliases
Aliases map short names to CSS props. They work in JSX and className.
- className
- JSX
<div className="p:4 px:6 m:2 w:64 h:12" />
<div className="gap-x:4 gap-y:2" />
<div className="rounded:lg shadow:md" />
<$$ p="4" px="6" m="2" w="64" h="12" />
<$$ gapX="4" gapY="2" />
<$$ rounded="lg" shadow="md" />
flex/grid coexistence
Bosswind keeps the CSS flex and grid props intact, while also supporting boolean keywords:
- className
- JSX
<div className="flex" />
<div className="flex:1" />
<div className="grid" />
<$$ flex />
<$$ flex="1" />
<$$ grid />
Text inference
text resolves to font-size or color (color wins on token collisions):
- Numeric/length values =>
font-size $$.token.fontSize.*=>font-size$$.token.color.*=>colortext:gray.500(matchescolortokens) =>colortext:sm(matchesfontSizetokens) =>font-size- CSS variables (
var(--*)) =>color - Anything else =>
color
- className
- JSX
<div className="text:sm" />
<div className="text:gray.500" />
<div className="text:14" />
<$$ text="sm" />
<$$ text="gray.500" />
<$$ text="14" />
If you need explicit control, use fontSize: or color: directly.
Translate/scale/skew axis helpers
Axis shorthands combine into the CSS translate/scale props, and skewX/skewY build transform when no
transform is set:
- className
- JSX
<div className="translate-x:4 translate-y:6" />
<div className="scale-x:1.1 scale-y:0.9" />
<div className="skew-x:12deg skew-y:0deg" />
<$$ translateX="4" translateY="6" />
<$$ scaleX="1.1" scaleY="0.9" />
<$$ skewX="12deg" skewY="0deg" />
If translate, scale, or transform are set directly, they win (axis shorthands are ignored).
Bosswind props
The table lists JSX prop names. In className strings, use dash-case for camelCase entries (for example inlineFlex →
inline-flex, gapX → gap-x, flexRow → flex-row).
| Bosswind prop | Usage | Maps to |
|---|---|---|
p | p:4 | padding |
px | px:4 | padding-left, padding-right |
py | py:4 | padding-top, padding-bottom |
pt | pt:4 | padding-top |
pr | pr:4 | padding-right |
pb | pb:4 | padding-bottom |
pl | pl:4 | padding-left |
m | m:4 | margin |
mx | mx:4 | margin-left, margin-right |
my | my:4 | margin-top, margin-bottom |
mt | mt:4 | margin-top |
mr | mr:4 | margin-right |
mb | mb:4 | margin-bottom |
ml | ml:4 | margin-left |
gapX | gapX:4 | column-gap |
gapY | gapY:4 | row-gap |
w | w:64 | width |
h | h:12 | height |
minW | minW:32 | min-width |
minH | minH:32 | min-height |
maxW | maxW:2xl | max-width |
maxH | maxH:96 | max-height |
inset | inset:4 | top, right, bottom, left |
insetX | insetX:4 | left, right |
insetY | insetY:4 | top, bottom |
grow | grow / grow:0 | flex-grow |
shrink | shrink / shrink:0 | flex-shrink |
basis | basis:1/2 | flex-basis |
items | items:center | align-items |
justify | justify:between | justify-content |
self | self:end | align-self |
leading | leading:6 | line-height |
tracking | tracking:wide | letter-spacing |
rounded | rounded:lg | border-radius |
shadow | shadow:lg | box-shadow |
z | z:10 | z-index |
aspect | aspect:video | aspect-ratio |
text | text:sm / text:gray.500 | font-size or color |
bg | bg:gray.500 | background-color |
border | border / border:2 / border:gray.500 | border-width or border-color |
flex | flex | display: flex |
grid | grid | display: grid |
block | block | display: block |
inline | inline | display: inline |
inlineBlock | inlineBlock | display: inline-block |
inlineFlex | inlineFlex | display: inline-flex |
inlineGrid | inlineGrid | display: inline-grid |
contents | contents | display: contents |
flowRoot | flowRoot | display: flow-root |
table | table | display: table |
inlineTable | inlineTable | display: inline-table |
tableRow | tableRow | display: table-row |
tableCell | tableCell | display: table-cell |
static | static | position: static |
relative | relative | position: relative |
absolute | absolute | position: absolute |
fixed | fixed | position: fixed |
sticky | sticky | position: sticky |
flexRow | flexRow | flex-direction: row |
flexCol | flexCol | flex-direction: column |
flexWrap | flexWrap | flex-wrap: wrap |
flexNoWrap | flexNoWrap | flex-wrap: nowrap |
translateX | translateX:4 | translate: 4px 0 |
translateY | translateY:4 | translate: 0 4px |
scaleX | scaleX:1.1 | scale: 1.1 1 |
scaleY | scaleY:1.1 | scale: 1 1.1 |
skewX | skewX:12deg | transform: skewX(12deg) |
skewY | skewY:12deg | transform: skewY(12deg) |
Tailwind default tokens
Bosswind ships Tailwind's default theme tokens. Use token values directly via strings (no $$.token needed). The full
theme is merged into your tokens, and your overrides win.
Key token groups and mappings:
color=>color,background,background-color,border-color,accent-color,caret-color,fill,outline-color,stroke,text-decoration-color,text-shadow,box-shadow,background-image,linear-gradient,radial-gradient,conic-gradient,filtersize=> width/height/min/max/inset/top/right/bottom/left, spacing (margin/padding), translate, flex-basis, gap, border-spacing, scroll-margin/padding, text-indent (numeric values assume a 12px base unit)grid=>grid-column,grid-row,grid-template-columns,grid-template-rows,grid-auto-columns,grid-auto-rowsduration=>transition-duration,transition-delay,animation-duration,animation-delaybackgroundPosition=>background-position,object-position,transform-origin
Duplicate scales (opacity and backdrop/filter variants) are collapsed to the base scale, and Tailwind gradient-stop
helpers (--tw-gradient-stops) are omitted. Color tokens also accept an alpha suffix like gray.600/60, which compiles
to color-mix(in oklab, var(--color-gray-600) 60%, transparent) (string tokens only).
Examples:
- className
- JSX
<div className="text:sm" />
<div className="color:gray.500" />
<div className="color:gray.600/60" />
<div className="padding:4" />
<$$ text="sm" />
<$$ color="gray.500" />
<$$ color="gray.600/60" />
<$$ padding="4" />
Visual token showcase
Colors
Breakpoints (@at defaults)
Bosswind uses the core @at breakpoint defaults shown below. Use + for min-width, - for max-width, or combine
ranges.
Font sizes
If you override tokens in your Boss config, your values take precedence.