Taildown - Write markdown. Get magic.

The markup language that transforms plain English into stunning, interactive web pages - zero configuration required.

What Is Taildown?

Taildown is a superset of Markdown that adds powerful features while maintaining full backwards compatibility. Write natural English styling instead of CSS classes, create interactive components with simple syntax, and compile to beautiful HTML + CSS + JavaScript.

Zero Config

Beautiful, professional styling out of the box. No setup, no configuration files, no webpack. Just write and compile.

What you get:

Modern glassmorphism effects
Automatic dark mode
Responsive design
Smooth animations

Plain English

Use natural language for styling - {large-bold primary center} instead of cryptic CSS classes.

Natural syntax:

{huge-bold} not {.text-4xl .font-bold}
{light-glass} not {.bg-white/75 .backdrop-blur}
{hover-lift} not {.hover:translate-y-1}

Dark Mode Built-in

Every Taildown document includes automatic dark mode with system detection, localStorage persistence, and smooth transitions.

Features:

Auto-toggle button
System preference detection
300ms smooth transitions
Zero JavaScript required

See It In Action

Example: Create a Beautiful Card

Write this:

:::card {light-glass padded-lg hover-lift}
## Welcome! {large-bold primary}

This card has glassmorphism, padding, and hover effects with **zero CSS**.

[Click Me](#){button primary hover-lift}
:::

Natural English. Readable. Powerful.

Would require:

<div class="backdrop-blur-md bg-white/75 border border-white/50 
     rounded-xl shadow-lg p-8 transition-transform 
     hover:-translate-y-1">
  <h2 class="text-2xl font-bold text-blue-600">Welcome!</h2>
  <p>This card has glassmorphism, padding, and hover effects 
     with <strong>zero CSS</strong>.</p>
  <a href="#" class="inline-block px-6 py-3 bg-blue-600 
     text-white rounded-lg hover:-translate-y-0.5">
    Click Me
  </a>
</div>

Plus custom CSS for dark mode, animations, etc.

Core Features

Natural language replaces cryptic CSS classes

Instead of This	Write This
`.text-4xl .font-bold`	`{huge-bold}`
`.bg-blue-600 .text-white`	`{primary-bg}`
`.rounded-lg .shadow-xl`	`{rounded-lg elevated}`
`.hover:translate-y-1`	`{hover-lift}`

Everything reads like English. Everything makes sense.

18+ built-in components with zero configuration

:::card {light-glass}
Card with glassmorphism
:::

:::tabs
## Tab One
Content for tab one
## Tab Two  
Content for tab two
:::

:::alert {success}
Operation completed successfully!
:::

Tabs, accordions, carousels, modals, tooltips, and more.

1000+ Lucide icons with simple syntax

:icon[check]{success} Task complete
:icon[heart]{error large} Love it
:icon[zap]{warning huge} Fast

Icons adapt to dark mode, resize naturally, and integrate perfectly.

Frosted glass effects in four variants

:::card {subtle-glass}
90% transparency - very subtle
:::

:::card {light-glass}
75% transparency - light frosted
:::

:::card {glass}
60% transparency - standard
:::

:::card {heavy-glass}
40% transparency - heavy frosted
:::

All with backdrop blur, gradient borders, and smooth transitions.

Scroll-triggered and hover animations

:::card {fade-in hover-lift}
Fades in on scroll, lifts on hover
:::

:::grid {3}
:::card {slide-up}
Slides up when scrolled into view
:::
:::card {zoom-in}
Zooms in from center
:::
:::card {slide-left}
Slides from the right
:::
:::

Smooth, performant, GPU-accelerated.

Interactive Components

Tabs

Headings become tabs automatically:

:::tabs
## First Tab
Content for first tab
## Second Tab
Content for second tab
:::

Features:

Click or keyboard navigation
ARIA accessible
Smooth transitions
Centered, responsive layout

Accordion

Bold text becomes triggers:

:::accordion
**First Section**
Content for first section
**Second Section**
Content for second section
:::

Features:

Click to expand/collapse
First item open by default
Smooth animations
Full ARIA support

Carousel

Horizontal rules divide slides:

:::carousel
First slide

---

Second slide

---

Third slide
:::

Features:

3D card effects
Swipe support
Navigation buttons
Indicator dots

Modals & Tooltips

Attach to ANY element:

[Click Me](#){button modal="Hello!"}

[Help](#){tooltip="Helpful tip"}

Features:

One-line syntax
Full markdown support
ID references for reuse
Backdrop blur effects

Why Taildown?

For You

Zero learning curve - If you know Markdown, you know Taildown
Beautiful by default - Professional styling without design skills
Plain English - Natural language instead of cryptic classes
Fast development - Build in minutes, not hours
No build tools - Single command compilation
Dark mode free- Automatic, everywhere

For Your Projects

Self-contained output - Single HTML file with embedded styles
Mobile optimized - Responsive by default
Accessible - ARIA attributes, keyboard navigation
Performant - GPU-accelerated, optimized CSS
SEO friendly - Semantic HTML5
Framework free- Vanilla JavaScript, no dependencies

Perfect For

Documentation

Technical docs, API references, user guides

Landing Pages

Product pages, portfolios, SaaS sites

Blog Posts

Articles, tutorials, long-form content

Prototyping

Rapid mockups, design exploration

Quick Start

Step 1: Install

# Via npm (coming soon)
npm install -g taildown

# Or clone repository
git clone https://github.com/vincitamore/taildown.git
cd taildown && pnpm install && pnpm build

Step 2: Create Document

Create hello.td:

# Hello World {huge-bold center primary}

Welcome to Taildown! {large center muted}

:::card {light-glass hover-lift}
## Your First Card {medium-bold}

Beautiful by default with zero configuration.

[Get Started](#){button primary hover-lift}
:::