Plain English Styling

Natural language styling is Taildown's superpower. Write {large-bold primary} instead of cryptic CSS classes.

Philosophy

Natural Grammar First

Taildown follows natural English grammar and word order, not CSS conventions. This makes styling intuitive and self-documenting.

Core Principles:

Adjective-Noun Order - "large text" not "text-large"
Single Descriptive Words - "bold" not "font-bold"
State Modifiers First - "hover-lift" not "lift-hover"
Natural Phrases- Reads like English, compiles to CSS

Typography

Control text size with natural keywords:

Shorthand	Result	CSS Equivalent
`{xs}`	Extra small text	`text-xs`
`{small}`	Small text	`text-sm`
`{base}`	Base size (default)	`text-base`
`{large}`	Large text	`text-lg`
`{xl}`	Extra large text	`text-xl`
`{2xl}`	2X large text	`text-2xl`
`{3xl}`	3X large text	`text-3xl`
`{huge}`	Huge text	`text-4xl`
`{massive}`	Massive text	`text-6xl`

Examples:

# Huge Heading {huge}
Normal paragraph text {base}
Small footnote {small muted}

Control font weight naturally:

Shorthand	Result	CSS Equivalent
`{thin}`	Thin weight	`font-thin`
`{light}`	Light weight	`font-light`
`{normal}`	Normal weight	`font-normal`
`{medium}`	Medium weight	`font-medium`
`{semibold}`	Semi-bold	`font-semibold`
`{bold}`	Bold weight	`font-bold`
`{extra-bold}`	Extra bold	`font-extrabold`
`{black}`	Black weight	`font-black`

Examples:

# Bold Heading {bold}
Semibold emphasis {semibold primary}
Light muted text {light muted}

Combine size and weight naturally:

# Large Bold Title {large-bold primary}
Medium weight subheading {medium}
Small light muted text {small-light muted}

Common combinations:

{large-bold} - Large and bold
{huge-bold} - Huge and bold
{small-light} - Small and light
{xl-semibold} - XL and semi-bold

Control line spacing with natural phrases:

Shorthand	Result
`{tight-lines}`	Tight line spacing
`{normal-lines}`	Normal spacing (default)
`{relaxed-lines}`	Relaxed spacing
`{loose-lines}`	Loose spacing

Example:

Paragraph with tight lines {tight-lines}
Paragraph with relaxed lines {relaxed-lines}

Colors

Semantic Colors

Use semantic color names for consistency:

Color	Usage	Example
`primary`	Primary brand color	Primary
`secondary`	Secondary brand color	Secondary
`accent`	Accent highlights	Accent
`success`	Success states	Success
`warning`	Warning states	Warning
`error`	Error states	Error
`info`	Information	Info
`muted`	Muted/subtle text	Muted

Examples:

# Primary Heading {primary}
Success message {success}
Error alert {error bold}
Muted footer text {muted small}

Background Colors

Add -bg suffix for background colors:

Shorthand	Result
`{primary-bg}`	Primary background + white text
`{success-bg}`	Success background + white text
`{warning-bg}`	Warning background + dark text
`{error-bg}`	Error background + white text
`{muted-bg}`	Muted background + dark text

Examples:

:::card {primary-bg}
Primary colored card
:::

:::alert {success-bg}
Success message with background
:::

Layout

Flexible layout with natural syntax:

Shorthand	Result
`{flex}`	Flex container
`{flex-col}`	Flex column direction
`{flex-row}`	Flex row direction
`{flex-center}`	Flex with centered items
`{flex-wrap}`	Flex with wrapping

Example:

:::card {flex flex-center}
Centered content
:::

Grid layouts made simple:

Shorthand	Result
`{grid}`	Grid container
`{grid-2}`	2-column grid
`{grid-3}`	3-column grid
`{grid-4}`	4-column grid
`{grid-auto}`	Auto-fit grid

Example:

:::grid {3}
Three column grid
:::

Center elements naturally:

Shorthand	Result
`{center}`	Center text
`{center-x}`	Center horizontally
`{center-y}`	Center vertically
`{center-both}`	Center both directions

Example:

# Centered Heading {center}
:::card {center-both}
Fully centered card
:::

Spacing

Padding

Control internal spacing:

Shorthand	Size
`{padded-xs}`	Extra small padding
`{padded-sm}`	Small padding
`{padded}`	Default padding
`{padded-lg}`	Large padding
`{padded-xl}`	Extra large padding

Example:

:::card {padded-lg}
Large padded card
:::

Gap

Control spacing between items:

Shorthand	Size
`{gap-xs}`	Extra small gap
`{gap-sm}`	Small gap
`{gap}`	Default gap
`{gap-lg}`	Large gap
`{gap-xl}`	Extra large gap

Example:

:::grid {3 gap-lg}
Grid with large gaps
:::

Effects

Rounded corners and borders:

Shorthand	Result
`{rounded}`	Default rounded corners
`{rounded-sm}`	Small rounded corners
`{rounded-lg}`	Large rounded corners
`{rounded-xl}`	Extra large rounded
`{rounded-full}`	Fully rounded (circle/pill)

Example:

:::card {rounded-xl}
Extra rounded card
:::

[Pill Button](#){button primary rounded-full}

Add depth with shadows:

Shorthand	Result
`{shadow}`	Default shadow
`{shadow-sm}`	Small shadow
`{shadow-lg}`	Large shadow
`{shadow-xl}`	Extra large shadow
`{elevated}`	Elevated appearance
`{floating}`	Floating effect

Example:

:::card {elevated}
Elevated card
:::

:::card {shadow-xl}
Deep shadow card
:::

Frosted glass effects:

Shorthand	Transparency	Use Case
`{subtle-glass}`	90%	Very subtle
`{light-glass}`	75%	Light frosted
`{glass}`	60%	Standard glass
`{heavy-glass}`	40%	Heavy frosted

Example:

:::card {light-glass}
Light frosted glass card
:::

:::card {heavy-glass padded-xl}
Heavy frosted with padding
:::

Animations

Entrance

Scroll-triggered entrance animations:

{fade-in} - Fade in
{slide-up} - Slide up
{slide-down} - Slide down
{slide-left} - Slide left
{slide-right} - Slide right
{zoom-in} - Zoom in
{zoom-out} - Zoom out

This card has {fade-in} applied!

Hover Effects

Interactive hover animations:

{hover-lift} - Lift on hover
{hover-glow} - Glow on hover
{hover-scale} - Scale up on hover
{hover-rotate} - Rotate on hover
{hover-grow} - Grow on hover

This card has {slide-up} applied!

Speed

Control animation speed:

{fast} - Fast animations (150ms)
{smooth} - Smooth (300ms, default)
{slow} - Slow animations (500ms)

This card has {zoom-in} applied!

Combining Shorthands

The Power of Composition

Taildown shorthands combine naturally to create complex styles with readable syntax.

Simple Example

# Heading {large-bold primary center}

Combines:

large - Large text size
bold - Bold font weight
primary - Primary color
center- Centered alignment

Complex Example

:::card {light-glass padded-xl rounded-xl hover-lift fade-in}
Card content
:::

Combines:

light-glass - Frosted glass effect
padded-xl - Extra large padding
rounded-xl - Extra large corners
hover-lift - Lift on hover
fade-in- Entrance animation

Best Practices

Do

Use natural English word order
Combine shorthands for rich effects
Keep it readable and self-documenting
Use semantic color names
Leverage glassmorphism for modern looks
Add hover effects for interactivity

# Great Title {huge-bold primary center}

:::card {light-glass padded-lg hover-lift}
Beautiful, readable, and powerful!
:::

Don't

Don't use CSS property names
Don't reverse natural word order
Don't overuse effects
Don't hardcode colors
Don't ignore semantic meaning

# Bad Title {.text-4xl .font-bold .text-blue-500}

:::card {.bg-white .p-8}
Falls back to raw CSS classes
:::

Quick Reference Card

Cheat Sheet

Typography: xs small large xl 2xl 3xl huge massive | thin light normal medium semibold bold extra-bold black

Colors: primary secondary accent success warning error info muted

Layout: flex flex-col flex-row flex-center | grid grid-2 grid-3 grid-4 | center center-x center-y

Spacing: padded-xs padded-sm padded padded-lg padded-xl | gap-xs gap-sm gap gap-lg gap-xl

Effects: rounded rounded-sm rounded-lg rounded-xl rounded-full | shadow shadow-sm shadow-lg elevated floating

Glass: subtle-glass light-glass glass heavy-glass

Animations: fade-in slide-up slide-down zoom-in | hover-lift hover-glow hover-scale | fast smooth slow

Plain English Reference

Philosophy

Natural Grammar First

Typography

Colors

Semantic Colors

Background Colors

Layout

Spacing

Padding

Gap

Effects

Animations

Entrance

Hover Effects

Speed

Combining Shorthands

The Power of Composition

Best Practices

Do

Don't

Quick Reference Card

Cheat Sheet