The full reference.

Three ways to install.

Global install

Once per machine. The tomato command is then available everywhere.

$ npm install -g @srivtx/tomato-css
$ tomato app.tom -o styles.css

Project install

Local to one repo. Add a build step to package.json.

$ npm install --save-dev @srivtx/tomato-css
$ npx tomato src/app.tom -o dist/styles.css

{
  "scripts": {
    "build": "tomato src/app.tom -o dist/styles.css",
    "watch": "tomato --watch src/app.tom -o dist/styles.css"
  }
}

No install

Try it on a single file without touching node_modules.

$ npx @srivtx/tomato-css app.tom

Write, compile, ship.

Create a file called styles.tom:

button:
  bg blue-500
  color white
  pad 2 4
  round lg
  pointer
  smooth

Compile it. Output is plain CSS you can ship to a browser or a CDN.

$ tomato styles.tom -o styles.css

button {
  background: #3b82f6;
  color: #ffffff;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

From the command line.

$ tomato <input.tom> [-o output.css]
$ tomato --watch <input.tom> [-o output.css]

Any selector you'd write in CSS.

The compiler is permissive. Elements, classes, IDs, and compound selectors all work.

HTML elements

button:
  bg blue-500

nav:
  row spread

input:
  pad 2 4

Classes

.btn-primary:
  bg blue-500
  color white

.card:
  bg white
  round xl
  shadow lg

IDs

#header:
  bg slate-900
  pad 4 6

#main-content:
  pad 8

Auto-class conversion

Names that aren't HTML elements become classes automatically. Use the dot prefix when you want to be explicit.

# these compile to the same rule
card:            # → .card { }
.card:           # → .card { }

# these stay as element selectors
button:         # → button { }
nav:            # → nav { }

Define once, use everywhere.

Define a reusable style block with component name: and pull it into any selector with use name. Properties are expanded inline, so you can override them by adding your own after the use statement.

Basic components

component btn:
  pad 2 4
  round lg
  bold
  pointer
  smooth
  no border

button:
  use btn
  bg blue-500
  color white

.btn-secondary:
  use btn
  bg violet-500

Nested components

Components can use other components, including their nested pseudo states.

component base-input:
  pad 3 4
  round md
  border 1px solid slate-300
  smooth

component focus-ring:
  use base-input

  focus:
    ring 2px solid blue-400
    border-color blue-500

input:
  use focus-ring
  w-full

Form input components

component input-base:
  w-full
  pad 3 4
  round lg
  border 1px solid slate-200
  bg white
  smooth

  focus:
    border-color blue-500
    no outline

textarea:
  use input-base
  min-height 120px
  resize vertical

Layout components

component container:
  max-width 1200px
  margin 0 auto
  pad 4 6

component stack:
  column
  gap 4

.page:
  use container
  use stack
  gap 8

One indent level.

Four supported pseudos: hover, focus, active, disabled. Indent one level inside the block.

button:
  bg blue-500
  color white
  smooth

  hover:
    bg blue-600
    shadow lg

  focus:
    ring 2px solid blue-400
    no outline

  active:
    bg blue-700

  disabled:
    opacity 0.5
    cursor not-allowed

Match Tailwind's widths.

Five breakpoints, plus dark/light mode. Indent one level inside the breakpoint block.

hero:
  pad 16
  grid 3
  gap 6

  @mobile:
    pad 4
    grid 1

  @tablet:
    grid 2

Name it once, use it everywhere.

Define a token once at the top of a file, use it as a value anywhere. Tokens are local to the file.

colors:
  primary blue-500
  secondary violet-500
  dark slate-900
  light slate-50
  muted slate-400
  danger red-500
  success green-500

button:
  bg primary
  color light

.alert-danger:
  bg danger
  color white

Sharing tokens across files

Use @import at the top of a file. The compiler exits 1 if the file is missing.

@import "./tokens.tom"

.button-primary:
  bg primary

22 scales, plus raw CSS.

Every Tailwind color scale, from 50 to 950. Or pass raw CSS colors when you need something off the palette.

# 22 color scales built in
slate, gray, zinc, neutral, stone
red, orange, amber, yellow, lime
green, emerald, teal, cyan, sky
blue, indigo, violet, purple
fuchsia, pink, rose

# usage
bg rose-500
color slate-900
border 1px solid blue-300

# raw CSS colors pass through unchanged
bg #f43f5e
bg rgb(244 63 94 / 0.5)
bg transparent
bg currentColor

Every shortcut, every output.

The complete shortcut list. Anything Tomato doesn't recognise is passed through unchanged — grid-template-areas, CSS variables, the lot.

• bg blue-500
  background: #3b82f6;
• color white
  color: #ffffff;
• pad 2 4
  padding: 0.5rem 1rem;
• margin 4
  margin: 1rem;
• round lg
  border-radius: 0.5rem;
• round full
  border-radius: 9999px;
• shadow md
  box-shadow: …;
• bold
  font-weight: bold;
• semibold
  font-weight: 600;
• italic
  font-style: italic;
• uppercase
  text-transform: uppercase;
• underline
  text-decoration: underline;
• pointer
  cursor: pointer;
• smooth
  transition: all 0.2s ease;
• no border
  border: none;
• no outline
  outline: none;
• row
  display: flex; flex-direction: row;
• row spread
  …; justify-content: space-between;
• row center
  …; justify-content: center;
• column
  display: flex; flex-direction: column;
• center all
  …; justify-content: center; align-items: center;
• grid 3
  display: grid; grid-template-columns: repeat(3, 1fr);
• gap 4
  gap: 1rem;
• w-full
  width: 100%;
• h-screen
  height: 100vh;
• relative
  position: relative;
• absolute
  position: absolute;
• fixed
  position: fixed;
• sticky
  position: sticky;
• hidden
  display: none;
• block
  display: block;
• flex
  display: flex;
• opacity 0.5
  opacity: 0.5;
• z 10
  z-index: 10;
• overflow hidden
  overflow: hidden;