Tachyons is a functional CSS framework that provides a set of utility classes for designing interfaces with a low level of specificity. Here’s a cheat sheet for Tachyons:
Typography
- Font Size:
f1tof7(largest to smallest)
- Font Weight:
fw1tofw9(lightest to boldest)
- Text Alignment:
tl(left),tc(center),tr(right),justify
Colors
- Background Color:
bg-{color}(e.g.,bg-blue,bg-light-gray)
- Text Color:
white,black,gray, etc.
- Border Color:
ba(border all),bt(border top),br(border right),bb(border bottom),bl(border left)
Layout
- Width and Height:
w-{size}(e.g.,w-100,w-50),h-{size}
- Margin and Padding:
ma(margin all),mt(margin top),mr(margin right),mb(margin bottom),ml(margin left)pa(padding all),pt(padding top),pr(padding right),pb(padding bottom),pl(padding left)
- Flexbox:
flex,inline-flex,flex-wrap,items-{alignment},justify-{alignment}
Display
- Display Property:
dib(display inline-block),dn(display none),flex,inline-flex
Borders
- Border Radius:
br1tobr4(small to large)
Shadows
- Box Shadow:
shadow-{size}(e.g.,shadow-1,shadow-2)
Responsive Design
- Responsive Width:
w-{size}-ns(not-small),w-{size}-m(medium),w-{size}-l(large)
- Responsive Display:
dn-m(display none on medium screens),flex-l(flex on large screens)
Miscellaneous
- Cursor:
pointer,not-allowed
- Opacity:
o-{opacity}(e.g.,o-70for 0.7 opacity)
- Overflow:
overflow-hidden,overflow-auto
- Position:
relative,absolute,fixed
- Text Transform:
ttu(uppercase),ttl(lowercase),tc(capitalize)
Responsive Typography
- Responsive Font Size:
f-{size}-ns(not-small),f-{size}-m(medium),f-{size}-l(large)
Forms
- Input Field:
input-reset,ba,b--black-20,pa2,mb2
- Button:
f6,link,dim,br1,ph3,pv2,mb2,dib
This cheat sheet covers some commonly used Tachyons classes. For more detailed information and a full list of available classes, refer to the Tachyons documentation.