atoms

The atoms addon provides shorthand property names for CSS declarations, improving DX and reducing bundle size.


const className = nano.rule({
  bdt: '1px solid red',  // border-top
  col: 'blue',           // color
  ta: 'center',          // text-align
});

Atom List

Atom	CSS Property
`d`	`display`
`mar`	`margin`
`mart`	`margin-top`
`marr`	`margin-right`
`marb`	`margin-bottom`
`marl`	`margin-left`
`pad`	`padding`
`padt`	`padding-top`
`padr`	`padding-right`
`padb`	`padding-bottom`
`padl`	`padding-left`
`bd`	`border`
`bdt`	`border-top`
`bdr`	`border-right`
`bdb`	`border-bottom`
`bdl`	`border-left`
`bdrad`	`border-radius`
`col`	`color`
`op`	`opacity`
`bg`	`background`
`bgc`	`background-color`
`fz`	`font-size`
`fs`	`font-style`
`fw`	`font-weight`
`ff`	`font-family`
`lh`	`line-height`
`bxz`	`box-sizing`
`cur`	`cursor`
`ov`	`overflow`
`pos`	`position`
`ls`	`list-style`
`ta`	`text-align`
`td`	`text-decoration`
`fl`	`float`
`w`	`width`
`h`	`height`
`trs`	`transition`
`out`	`outline`
`vis`	`visibility`
`ww`	`word-wrap`
`con`	`content`
`z`	`z-index`

Installation


import { addon as addonAtoms } from 'nano-css/addon/atoms';
addonAtoms(nano);

Last updated on February 16, 2026