Last updated: April 24, 2026

> A complete reference for formatting Backtestfx blog posts. Every section has copy-paste examples you can drop straight into a post. Skim the Table of Contents, jump to what you need, copy it, edit the copy.

Table of Contents

• Quick Start
• Markdown Basics
• Headings
• Text formatting
• Links & images
• Lists
• Blockquotes
• Code
• Tables
• Horizontal rules
• Colors
• Text colors
• Background colors
• Border colors
• Opacity on colors
• Gradients
• Typography with Tailwind
• Spacing
• Sizing
• Display & Position
• Flexbox
• Grid
• Borders & Radius
• Shadows
• Rings & Outlines
• Opacity & Filters
• Transforms
• Transitions & Hover
• Callout Patterns
• Layout Recipes
• Responsive Design
• Dark Mode
• Tables & Lists (advanced)
• Common Gotchas

Quick Start

Minimal anatomy of a rich blog section:

Source:

``html

Rules of thumb:

1. Wrap HTML blocks in a
   with background + padding + rounded + border + dark mode pairs.
2. Always pair text-slate- with dark:text-slate- so both themes look intentional.
3. Use my-* (margin-y) on block elements to give breathing room between sections.
4. Prefer markdown where markdown suffices — only reach for HTML when you need a visual box or custom layout.

Markdown Basics

Headings

```markdown

H1 — article title (use once, at the top)

H2 — major sections

H3 — subsections

H4 — often used for dates or minor labels

H5 — rarely needed

H6 — rarely needed

```

Text formatting

``markdown bold text italic text bold italic ~~strikethrough~~ inline code ``

Links & images

```markdown link text link with title

```

Image with caption + rounded corners:

```html

Figure 1 — Equity curve of a EUR/USD breakout strategy, 2022–2025.

```

Lists

```markdown Unordered:

• Item one
• Item two
• Nested item
• Another nested
• Item three

Ordered:

1. First
2. Second
3. Third

Task list:

• [x] Done
• [ ] Not yet

```

Blockquotes

```markdown > Simple quote on one line.

> Multi-line quote. > Each line starts with >. > > Blank quoted line makes a paragraph break. ```

> Use blockquotes for pull quotes, citations, or emphasized one-liners. For boxed callouts (info, warning, etc.), use HTML — see Callout Patterns.

Code

Inline: ` like this `

Block:

```markdown `typescript const greeting = 'hello' function greet(name: string) { return ${greeting}, ${name} } ` ```

Syntax highlighting is handled by PrismJS. Supported language tags include typescript, javascript, python, json, bash, html, css, sql, yaml, markdown, diff.

Tables

```markdown | Column A | Column B | Column C | |---|---|---| | Row 1A | Row 1B | Row 1C | | Row 2A | Row 2B | Row 2C |

Align columns:

| Left | Center | Right | |:---|:---:|---:| | a | b | c | ```

Horizontal rules

Three or more dashes on their own line:

```markdown

```

Colors

All color classes accept a palette × shade × optional opacity × optional dark: variant. Palettes include: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone. Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950. Also: black, white, transparent, current, inherit.

Text colors

``html

Primary body text

Secondary body text

Link color

Error color

Success color

Common safe pairings (light / dark):

| Use | Light mode | Dark mode | |---|---|---| | Heading | text-slate-900 | dark:text-white | | Body | text-slate-700 | dark:text-slate-300 | | Muted | text-slate-600 | dark:text-slate-400 | | Link / accent | text-purple-600 | dark:text-purple-400 | | Success | text-green-600 | dark:text-green-400 | | Warning | text-orange-600 | dark:text-orange-400 | | Danger | text-red-600 | dark:text-red-400 |

Background colors

``html

Border colors

``html

Opacity on colors

Append /NN to any color:

``html

75% opacity text

Supported opacity values: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100.

Gradients

Direction (required):

• bg-gradient-to-t — top
• bg-gradient-to-tr — top-right
• bg-gradient-to-r — right
• bg-gradient-to-br — bottom-right (most visually pleasing for hero sections)
• bg-gradient-to-b / -bl / -l / -tl — the rest

Color stops (from-, optional via-, to-*):

Source:

```html

Gradient text (using bg-clip-text):

Gradient headline

Source:

``html

Gradient headline

Typography with Tailwind

Size

text-xs · text-sm · text-base · text-lg · text-xl · text-2xl · text-3xl · text-4xl · text-5xl · text-6xl · text-7xl · text-8xl · text-9xl

Weight

font-thin · font-extralight · font-light · font-normal · font-medium · font-semibold · font-bold · font-extrabold · font-black

Alignment

text-left · text-center · text-right · text-justify · text-start · text-end

Transform

uppercase · lowercase · capitalize · normal-case

Decoration

underline · line-through · no-underline · overline

Style: decoration-solid · decoration-double · decoration-dotted · decoration-dashed · decoration-wavy

Thickness: decoration-0 · decoration-1 · decoration-2 · decoration-4 · decoration-8

Offset: underline-offset-0 through underline-offset-8

Spacing around text

Letter spacing: tracking-tighter · tracking-tight · tracking-normal · tracking-wide · tracking-wider · tracking-widest

Line height: leading-3 through leading-10, plus leading-none · leading-tight · leading-snug · leading-normal · leading-relaxed · leading-loose

Font family

font-sans · font-serif · font-mono

Lists

list-disc · list-decimal · list-none — with list-inside or list-outside for bullet position.

Example

``html

Readable headline

Body copy that breathes. Use leading-relaxed or leading-loose for long-form prose.

Spacing

Padding: p-, plus pt/pr/pb/pl/px/py/ps/pe for individual sides. Margin: m-, plus mt/mr/mb/ml/mx/my/ms/me. Negative margins with -m-.

Scale: 0, 0.5, 1, 1.5, 2, 2.5, 3, 3.5, 4, 5, 6, 7, 8, 9, 10, 11, 12, 14, 16, 20, 24, 28, 32, 36, 40, 44, 48, 52, 56, 60, 64, 72, 80, 96 (1 = 0.25rem = 4px).

auto, px (1 pixel) also available.

``html

Space between children (better than manual margins on each):

``html

Sizing

Width / height: w-, h- with the same scale as spacing, plus:

• Fractions: w-1/2, w-1/3, w-2/3, w-1/4 ... w-11/12
• Special: w-auto, w-full, w-screen, w-min, w-max, w-fit
• Viewport units: w-svw, w-lvw, w-dvw (and h-svh, etc.)

Max-width scale (common for readable content):

`` max-w-xs (20rem) · max-w-sm · max-w-md · max-w-lg · max-w-xl max-w-2xl · max-w-3xl · max-w-4xl · max-w-5xl · max-w-6xl · max-w-7xl max-w-prose · max-w-full · max-w-screen-md · max-w-screen-lg ``

Example:

``html ``

Single-side size: size-* sets width AND height simultaneously (good for square icons/avatars).

``html

Display & Position

Display: block · inline-block · inline · flex · inline-flex · grid · inline-grid · hidden · table · flow-root · contents

Position: static · relative · absolute · fixed · sticky

Offsets: top-, right-, bottom-, left-, inset- (all sides), inset-x-, inset-y-* — using the spacing scale plus auto, full, and fractions (1/2, 1/3, etc.).

Z-index: z-0, z-10, z-20, z-30, z-40, z-50, z-auto.

```html

NEW

Flexbox

``html

Direction: flex-row · flex-row-reverse · flex-col · flex-col-reverse Wrap: flex-wrap · flex-nowrap · flex-wrap-reverse Align items (cross-axis): items-start · items-end · items-center · items-baseline · items-stretch Justify content (main-axis): justify-start · justify-end · justify-center · justify-between · justify-around · justify-evenly Child sizing: flex-1 · flex-auto · flex-initial · flex-none · grow · grow-0 · shrink · shrink-0 Gap: gap-, gap-x-, gap-y-* Order: order-1 through order-12, order-first, order-last, order-none

Grid

``html

Columns / rows: grid-cols-1 through grid-cols-12, grid-cols-none, grid-cols-subgrid Span: col-span-1 through col-span-12, col-span-full Start/end: col-start-1 through col-start-13, col-end-, same for rows Auto-flow: grid-flow-row · grid-flow-col · grid-flow-dense Gap: gap-, gap-x-, gap-y-

Place content inside a cell:

place-items-center centers content on both axes. place-content-center centers the grid itself.

Borders & Radius

Width: border, border-0, border-2, border-4, border-8 Per-side: border-t, border-r, border-b, border-l, border-x, border-y (same widths) Style: border-solid · border-dashed · border-dotted · border-double · border-hidden · border-none Color: any color palette/shade/opacity, including dark variants

Radius: rounded-none · rounded-sm · rounded · rounded-md · rounded-lg · rounded-xl · rounded-2xl · rounded-3xl · rounded-full Per-corner: rounded-t-, rounded-tl-, rounded-tr-*, etc.

Divider lines (between children): divide-x, divide-y, plus divide-*-color.

``html

• First
• Second
• Third

Shadows

shadow-none · shadow-sm · shadow · shadow-md · shadow-lg · shadow-xl · shadow-2xl · shadow-inner

Colored shadow: shadow-purple-500/30 etc. — glow-like when saturated.

Source:

``html

Rings & Outlines

Rings are Tailwind's version of box-shadow rings — good for focus states or decorative glows.

ring · ring-0 · ring-1 · ring-2 · ring-4 · ring-8 · ring-inset ring-offset-0 through ring-offset-8 Ring color: same palette syntax as other colors.

```html

Button with ring

```

Outlines (CSS outline property): outline-none, outline-0/1/2/4/8, outline-dashed, etc.

Opacity & Filters

Opacity: opacity-0 · opacity-25 · opacity-50 · opacity-75 · opacity-100 (and many in between: 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100)

Filters:

• blur-none · blur-sm · blur · blur-md · blur-lg · blur-xl · blur-2xl · blur-3xl
• brightness-50 · brightness-100 · brightness-150 · brightness-200 (plus more)
• contrast-, grayscale, invert, saturate-, sepia, hue-rotate-*

Backdrop filters (applied through the element to what's behind):

• backdrop-blur-sm, backdrop-blur-md, backdrop-blur-lg
• backdrop-brightness-, backdrop-contrast-, backdrop-opacity-*, etc.

``html

Glass overlay

Blend modes: mix-blend-multiply, mix-blend-screen, mix-blend-overlay, etc. Useful for stylized image treatments.

Transforms

• Rotate: rotate-0 · rotate-1 · rotate-2 · rotate-3 · rotate-6 · rotate-12 · rotate-45 · rotate-90 · rotate-180. Prefix with - for counter-clockwise (-rotate-12).
• Scale: scale-0 · scale-50 · scale-75 · scale-90 · scale-95 · scale-100 · scale-105 · scale-110 · scale-125 · scale-150. Directional: scale-x-, scale-y-.
• Translate: translate-x-, translate-y- using spacing scale + fractions + full.
• Skew: skew-x-, skew-y- with values 0, 1, 2, 3, 6, 12.
• Origin: origin-center, origin-top, origin-top-right, origin-right, origin-bottom-right, origin-bottom, origin-bottom-left, origin-left, origin-top-left.

Combine with transitions for hover effects:

Source:

``html

Transitions & Hover

Transition property: transition (all), transition-colors, transition-opacity, transition-shadow, transition-transform, transition-none Duration: duration-75, duration-100, duration-150, duration-200, duration-300, duration-500, duration-700, duration-1000 Easing: ease-linear, ease-in, ease-out, ease-in-out Delay: delay-* (same values as duration)

Hover patterns available in blog posts:

Underline-on-hover link: Hover me

Lift-on-hover card:

Image zoom + caption reveal (hover the image below):

Revealed caption

Source:

```html

Link

Revealed caption

> Note on hover colors: The safelist intentionally excludes hover variants on text/bg/border colors to keep the CSS bundle reasonable. Use hover:underline, hover:shadow-, hover:-translate-, and hover:scale- / group-hover:scale- / group-hover:opacity-* — those cover most card and image-hover recipes. If you need a color-change hover pattern for a specific post, ping dev to add a narrow safelist entry.

Built-in animations: animate-spin, animate-ping, animate-pulse, animate-bounce, animate-none.

Callout Patterns

Copy-paste these. Swap the color palette to match the callout's purpose. Each pattern shows the rendered result followed by the source.

Info / Note

Source:

``html

Success / Tip

Source:

``html

Warning

Source:

``html

Danger / Critical

Source:

``html

Neutral box

Source:

``html

Gradient highlight

Source:

``html

Checklist / feature list

Source:

``html

Layout Recipes

Each recipe shows the rendered result first, then the source. On narrow screens many of these stack (mobile-first); widen the window or drag the preview to see the multi-column layout.

Two-column block

Source:

``html

On narrow screens, the columns stack. On md: (768px+) and wider, they sit side-by-side.

Feature card grid

Source:

``html

Hero section inside a post

Big idea headline

Supporting copy that expands on the headline.

Source:

```html

Big idea headline

Supporting copy that expands on the headline.

```

Pull quote

"Trading without backtesting is gambling with extra steps."

— Anonymous trader

Source:

``html

"Trading without backtesting is gambling with extra steps."

— Anonymous trader

Step list with numbered badges

1. 1

   Step title

   Step body copy.

2. 2

   Next step

   Another step's body copy.

Source:

``html

1. 1

   Step title

   Step body copy.

2. 2

   Next step

   Another step's body copy.

Stat highlight row

Source:

``html

Responsive Design

Prefix any class with a breakpoint to apply it only at that width and above:

| Prefix | Kicks in at | Typical device | |---|---|---| | (none) | 0px | phones (portrait) | | sm: | 640px | phones (landscape) | | md: | 768px | tablets | | lg: | 1024px | small laptops | | xl: | 1280px | desktops | | 2xl: | 1536px | large screens |

```html

...

... ```

Mobile-first is the rule: write the mobile styles without a prefix, then use prefixes to override for larger screens.

Dark Mode

The site uses Tailwind's class-based dark mode — every dark variant needs an explicit dark: class.

Always pair color classes:

```html

When a custom background is dark in both modes (e.g., a gradient CTA), use white text without a dark variant:

``html

Tables & Lists (advanced)

Styled table:

Source:

``html

Use overflow-x-auto on the wrapper so wide tables scroll horizontally on mobile instead of blowing up the layout. For visual separation between rows, alternate a subtle background on every other `` (as shown above) rather than relying on hover — hover bg-colors aren't in the safelist for bundle-size reasons.

Common Gotchas

1. Text disappears inside custom callouts

You set bg-slate-800 for dark mode but forgot to set text color. Default body color doesn't inherit into custom