Styling

Everything is Imba CSS, compiled at build time into one stylesheet linked from every page. No JavaScript is involved. There are three places to write it.

Inline: square brackets on the tag

The closest thing to Tailwind classes. Styles sit right on the element:

<div[d:flex ai:center g:4 p:6 @md:10 rd:lg bg:white shadow:md]>
	<h2[fs:2xl fw:700 c:gray9]> "Inline styles"
	<a[c:blue6 @hover:blue8 td:none] href='/'> "A link"
	<div[w:{percent}% h:2 bg:emerald5]>

• Numbers without units step by 0.25rem, like Tailwind: p:6 is 1.5rem, g:4 is 1rem.
• @hover, @focus, @md (768px and up), @lt-md (below 768px) and friends work inline.
• {expressions} work too; they become a CSS variable set on the element.
• Add styles only when something is true: <a [c:blue8 fw:700]=isCurrent>.
• They work on your own components: <Card[mt:8]>.

This docs site is styled entirely this way (site/ in the repo).

Scoped: a css block in the tag

For styles that are longer, or that target several elements of a component:

export tag ServiceCard
	<self>
		<h3> title
		<p> summary

	css d:block p:6 rd:xl bd:1px solid gray2
		h3 fs:xl
		p c:gray6 mt:2

These only apply inside this tag: p here won't touch any other paragraph on the page.

Global: global css

For element defaults and classes used everywhere. Usually in src/site.imba:

global css
	* box-sizing:border-box
	body m:0 ff:'Inter', system-ui c:gray8
	.button d:inline-block px:5 py:3 rd:full bg:indigo6 c:white

Two cases need it:

• Shared classes like .button: scoped blocks don't reach into other tags.
• Markdown output: rendered Markdown has none of Imba's scope classes, so style it with .prose … rules. See Markdown.

Colour variables and dark mode

Define colours once, with a dark-mode value, and use them anywhere:

global css
	html $bg:white @dark:#0c0c0e
	html $fg:#18181b @dark:#ececef
	body bg:$bg c:$fg

<p[c:$fg bd:1px solid $line]> "Follows light and dark mode"

This site works that way.

Gotchas

• Colour shades are 0–9, not Tailwind's 50–900: gray0, indigo1, indigo8. A name like indigo100 quietly does nothing.
• A modifier changes the property just before it. d:flex @lt-md:none g:4 hides the element on phones; d:flex g:4 @lt-md:none sets the gap to none.
• When two properties clash, the later one wins: m:0 mt:4 keeps the top margin, mt:4 m:0 doesn't.
• s: (width and height) needs a unit: s:40px works, s:2 gives nothing. Use w:2 h:2.
• No !important, and :root can't start a rule in global css (use html).
• Method names can't end in ? (only getters can): isActive, not active?.
• Custom hyphenated attributes are dropped unless they start with data- or aria-. Set others from code, e.g. in the tag's rendered method.