PostWind - Real-time CSS Generator

PostWind Features Overview

✨ Auto-Loaded & Ready to Use!

100+ CSS Properties

p-4, m-8, w-full, h-screen, text-lg, etc.

200+ Keyword Classes

flex, grid, rounded, shadow-lg, animate-spin

Complete Responsive

m:, d:, hover:, focus:, first:, last:


                        import PostWind from 'https://cdn.jsdelivr.net/npm/postwind@latest/dist/lib.min.js';

                        // Everything auto-loads → PostWind.init();

Welcome to PostWind! This demo showcases real-time Tailwind-like CSS generation with advanced features like shortcuts, pipe notation, and responsive design.

Use the navigation above to explore different feature categories. Each section demonstrates input classes and their generated CSS output.

Drop-in Ready

100% Tailwind compatible

Ship the same class names you already know—utilities, pseudo selectors, and responsive prefixes behave exactly like Tailwind.

Precision Extras

Inline container queries

Use `min-` / `max-` breakpoints per component—no media file hopping, powered by ResizeObserver cleanup.

Expressive Syntax

Packed rules & visibility

Mix `p-10|20`, property-first `text-lg@m`, and `visible:` scroll effects for faster authoring than stock Tailwind.

Button Shortcuts Demo

Shortcuts are generated as new classes
You can use nested shortcuts, notice btn inside btn-primary
Use PostWind.define() for shortcuts OR raw CSS keywords (with : and ;)
PostWind.shortcut() is also available for shortcut-only definitions

Base

Neutral palette + soft shadow baked into btn.

Primary

Adds brand color, hover/active states, and focus ring.

Outline

Transparent background with subtle border accents.

Contextual Buttons

Every variant reuses the `btn` shortcut for spacing, radius, and transitions.

btn-success → btn + emerald colors
btn-danger → btn + rose colors

Badges & Chips

Shortcuts can describe non-buttons too—wrap text, icons, or counters.

Launched Beta AI Playground Access ✓ Autosave Enabled

chip = pill layout
chip-check adds a blue outline + icon slot

Dark Mode Toggle

Click the moon/sun icon in the navigation bar to toggle dark mode. All button variants support dark mode automatically.

Badges & Chips (Dark)

UI components automatically adapt to dark theme.

Launched Beta AI Playground Access ✓ Autosave Enabled

Shortcut Definitions:

btn: px-4 py-2 rounded font-medium transition-all duration-200 cursor-pointer border
btn-primary: btn bg-blue-500 text-white border-blue-500 hover:bg-blue-600 hover:border-blue-600 active:bg-blue-700
btn-outline: btn bg-transparent text-blue-500 border-blue-500 hover:bg-blue-50 active:bg-blue-100
btn-success: btn bg-emerald-500 text-white border-emerald-500 hover:bg-emerald-400 active:bg-emerald-600
btn-danger: btn bg-rose-500 text-white border-rose-500 hover:bg-rose-400 active:bg-rose-600
btn-soft: btn bg-blue-50 text-blue-700 border-blue-100 hover:bg-blue-100
btn-ghost: btn bg-transparent border-transparent text-gray-700 hover:bg-gray-100
badge: inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold uppercase
badge-success: badge bg-emerald-100 text-emerald-700
badge-warning: badge bg-amber-100 text-amber-700
chip: inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-gray-100 text-gray-700 text-sm
chip-check: chip bg-blue-50 text-blue-700 border border-blue-200
text-glow: color: #0ea5e9; text-shadow: 0 0 20px rgba(14,165,233,0.6);
h1: font-bold m:text-24px d:text-36px leading-tight
h2: font-semibold m:text-20px d:text-24px leading-tight

Note: text-glow is a keyword utility (CSS declaration) - detected by : and ;.

Flexbox System

Flex Direction

flex-row - Horizontal layout (default)

1

2

3

flex-col - Vertical layout

1

2

3

flex-row-reverse - Reversed horizontal

1

2

3

flex-col-reverse - Reversed vertical

1

2

3

Justify Content (Main Axis)

justify-start - Items at start

A

B

C

justify-center - Items centered

A

B

C

justify-end - Items at end

A

B

C

justify-between - Space between items

A

B

C

justify-around - Space around items

A

B

C

justify-evenly - Equal space between

A

B

C

Align Items (Cross Axis)

items-start - Items at cross-start

Short

Tiny

Tall Item

items-center - Items centered on cross-axis

Short

Tiny

Tall Item

items-end - Items at cross-end

Short

Tiny

Tall Item

items-stretch - Items stretch to fill

Stretched

All Same

Height

Flex Wrap

flex-nowrap - No wrapping (default)

Item 1

Item 2

Item 3

Item 4

Item 5

flex-wrap - Allow wrapping

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

Item 7

Flex Grow & Shrink

Flex grow example

Fixed

flex-1 (grows)

Fixed

Multiple flex items

flex-1

flex-2 (twice as wide)

flex-1

Flex none - doesn't grow or shrink

Flexible

flex-none (fixed width)

Flexible

Vertical Layouts

Vertical centering

Perfectly Centered

Vertical space between

Top

Middle

Bottom

Real-World Examples

Navigation bar layout

Logo

Card with header/footer layout

Card Header

This content area grows to fill available space using flex-1.

Footer info

Responsive flex direction

Responsive Item 1

Stacks vertically on mobile, horizontally on desktop.

Responsive Item 2

Same responsive behavior with flex-1 for equal width.

CSS Grid System

Grid Columns

grid-cols-1 - Single column

Item 1

Item 2

Item 3

grid-cols-3 - Three columns

Item 1

Item 2

Item 3

Item 4

Item 5

Item 6

grid-cols-6 - Six columns

1

2

3

4

5

6

Column Spanning

Basic spanning in 4-column grid

Normal

col-span-2

Normal

col-span-3

Normal

col-span-full

Mixed spanning patterns

span-2

span-4

span-3

span-2

1

Full Width

Row Spanning

Grid with row spans and explicit row definitions

Normal

row-span-2

Normal

row-span-3

Normal

row-span-2

Normal

Grid Positioning

Explicit column positioning

col-start-2 col-end-4

col-start-1

col-start-5

Row and column positioning

Positioned

Span & Position

Corner

Responsive Card Grid (8 Items)

Uses m:grid-cols-1 t:grid-cols-2 d:grid-cols-4 so cards flow naturally with a roomy 20px gap.

Card 1

Realtime build

Updates instantly with zero tooling.

Card 2

Inline queries

Use min/max classes per container.

Card 3

Shortcuts

Compose reusable class bundles.

Card 4

Pipe notation

Compact responsive syntax.

Card 5

@ notation

Property-first responsive format.

Card 6

Animations

Built-in visible: scroll effects.

Card 7

Docs

Generate docs straight in the app.

Card 8

Playground

Experiment with any class instantly.

Auto-Sizing Grids

auto-cols-max - Columns size to content

Short

Much Longer Content

Tiny

auto-rows-min - Rows size to minimum content

Normal height

Taller content with more text that wraps

Normal

Grid Flow

grid-flow-row - Fill rows first (default)

1

2

3

4

5

grid-flow-col - Fill columns first

1

2

3

4

5

Gap Spacing

gap-1 - Small gap

A

B

C

D

gap-4 - Medium gap

A

B

C

D

gap-8 - Large gap

A

B

C

D

Independent gap control: gap-x-8 gap-y-2

1

2

3

4

5

6

7

8

Responsive Grid Layouts

Responsive columns: grid-cols-1 d:grid-cols-3

Stacks on mobile

3-column on desktop

Responsive layout

Responsive gaps: gap-2 d:gap-6

Small gap mobile

Large gap desktop

Responsive

Grid system

Real-World Grid Examples

Blog post layout

Main Content Area

This takes 3/4 of the desktop width but full width on mobile.

Sidebar

Dashboard layout

Stats Card

$12,345

Revenue

Stats Card

1,234

Users

Stats Card

98%

Uptime

Interactive States Demo

Hover Effects

Hover me for background change

Hover for padding change

hover:bg-blue-200 hover:p-8 transition-all

Focus & Active States

hover:bg-blue-600 active:bg-blue-700 focus:ring-2 focus:border-blue-500

Onload Filter

Use onload: to push a class into the next animation frame—perfect for entry motions without extra scripts.

Slide-in Dialog

Starts resting low and fades into place once the frame is ready.

opacity-0 translate-y-6 onload:opacity-100 onload:translate-y-0 duration-500

Special group

Badges drift in together

Beta access Priority support Launch ready

scale-95 opacity-0 onload:scale-100 onload:opacity-100 duration-500

Progressive CTA

Lifts gently and gains depth after load for a smoother paint.

translate-y-2 onload:translate-y-0 onload:shadow-xl onload:scale-105

Pseudo Classes Demo

Child Selectors

First item (green background, bold)
Second item (blue background - even)
Third item (yellow background - odd)
Fourth item (blue background - even)
Last item (red background, bold)

first:bg-green-100 even:bg-blue-100 odd:bg-yellow-100 last:bg-red-100

Form States

Required field with validation states

Checkbox (green when checked) Radio 1 Radio 2

required:border-red-500 invalid:bg-red-50 checked:bg-green-500

Table with Row Styling

Name	Role	Status
John Doe	Developer	Active
Jane Smith	Designer	Active
Bob Johnson	Manager	Away

odd:bg-gray-50 even:bg-white first:font-semibold last:text-right

Empty State Demo

The box above is empty and styled with: empty:bg-yellow-100 empty:p-4 empty:text-center

This div has content, so no empty: styles apply

Responsive Demo

Pipe Notation

Responsive Padding: 16px on mobile, 48px on desktop
class="p-4|12"

@ Notation

@ Notation: 32px on mobile, 64px on desktop
class="p-8@m p-16@d"

Breakpoint Prefixes

Red on mobile, Blue on desktop

m:bg-red-100 d:bg-blue-100

Relative Offset Utilities

Offset helpers automatically inject position: relative whenever you use top/right/bottom/left so badges, avatars, and labels can nudge into place without extra CSS. Mix them with responsive prefixes or arbitrary values for pixel-perfect tweaks.

Chips & Pills

A quick sampler of offsets on inline tags.

Baseline chip top-3 → down 12px right-4 → 16px inset

left-[10px] → custom m:bottom-2 d:top-0

top-3 right-4 left-[10px] m:bottom-2 d:top-0

Layered Avatar Badges

Stack small indicators inside cards without absolute positioning.

Product Design

Offset badges with top-2 right-2.

+5

Ops & Uptime

`bottom-3 left-3` tucks alerts at the base.

● Stable

Finance

Arbitrary offsets for badge stacks.

%

absolute top-2 right-2 bottom-3 left-3 top-[18px] left-[52px]

Timeline with Responsive Nudges

Use offsets alongside breakpoint prefixes for clever label positioning.

Kickoff

`-left-3` pins the marker; m:top-4 shifts it only on phones.

Beta Access

Combine top-6 with d:left-2 for desktop spacing.

Launch

Arbitrary values like top-[22px] refine timeline alignment.

-left-3 top-6 m:top-4 d:left-2 top-[22px]

Inline Container Queries

Toggle real utility classes based on an element's own width using `min-` / `max-` syntax. Resize the panel below to watch `max-640:flex-col` and `min-900:flex-row` swap layouts with a generous buffer between breakpoints.

Container width 900px

Primary Card

Stacks vertically below 640px, flips to a row once the container hits 900px.

Secondary Card

max-640:flex-col
flex-row
Resize to see it swap

Tertiary Card

Add as many cards as you like—layout keeps adapting.

Insights

Shows the same inline container query behavior.

Activity

Perfect for dashboards or widget stacks.

Usage

Keeps the row layout whenever there’s room.

Status

Gracefully collapses into a column on narrow widths.

max-640:flex-col flex-row

Showcase Gallery

`max-480:flex-col` collapses the media cards while `min-481:flex-row` keeps them aligned.

Live Metrics

max-480:flex-col min-481:flex-row

Deploys

Stacks when container shrinks.

Shortcuts

Inline queries = instant container logic.

Themes

Swap layout without media queries.

max-480:flex-col min-481:flex-row

Stats Stack

`grid-cols-2 max-420:grid-cols-1` gives responsive cards inside their own container.

Build Time

420ms

min-421:grid-cols-2

Bundles

0

max-420:grid-cols-1

Components

248

Layout adapts per card.

Downtime

0.1%

Pure container rules.

grid-cols-2 max-420:grid-cols-1

API & Special Features

Core API Methods

PostWind exposes these methods for runtime control:

PostWind.init(options)

Initialize with debug, reset, breakpoints, define, preload

PostWind.define(name, style)

Define shortcuts or raw CSS keywords

PostWind.shortcut(name, classes)

Register shortcut (use define() for full flexibility)

PostWind.preload(classes)

Warm up CSS before first render

PostWind.loadClass(className)

Generate CSS for a single class

PostWind.generateDoc()

Generate documentation from current config

Arbitrary Values

Custom sizing & color

w-[250px] h-[100px] bg-[#ff6b6b]

Opacity Utilities

opacity-25

opacity-50

opacity-75

Animations

Spacing & Sizing System

Padding & Margin (1 unit = 4px)

p-4 - Padding 16px all sides

px-6 py-3 - Horizontal 24px, Vertical 12px

pt-2 pr-4 pb-6 pl-8 - Individual sides

m-4 - Margin 16px all sides

-mt-2 - Negative top margin -8px

mx-auto - Auto horizontal centering

Width & Height

w-full

w-1/2

w-32

size-16

h-8

h-16

h-24

Responsive Spacing

p-4|8 - Padding 16px mobile, 32px desktop

Typography System

Font Sizes

text-xs - Extra small (12px)

text-sm - Small (14px)

text-base - Base (16px)

text-lg - Large (18px)

text-xl - Extra large (20px)

text-2xl - 2X large (24px)

text-4xl - 4X large (36px)

Font Weights

font-thin (100)

font-light (300)

font-normal (400)

font-medium (500)

font-semibold (600)

font-bold (700)

font-black (900)

Font Families & Styling

font-sans - Default sans-serif

font-serif - Serif typeface

font-mono - Monospace font

italic - Italicized text

underline - Underlined text

uppercase tracking-wider

leading-tight - Tight line height

leading-relaxed tracking-wide - Relaxed with wide letter spacing

Responsive Typography

Responsive heading: large mobile | 2XL desktop

Alternative syntax: small mobile, base desktop

Color System

PostWind supports 32 color families with 11 shades each (50-950), plus special values and arbitrary colors.

Text Colors

text-gray-900 - Very dark gray

text-gray-700 - Dark gray

text-gray-500 - Medium gray

text-red-600 - Red text

text-blue-600 - Blue text

text-green-600 - Green text

text-purple-600 - Purple text

text-yellow-600 - Yellow text

text-rose-600 - Rose text

Arbitrary Color Values

bg-[#ff6b6b]

bg-[rgb(107,255,107)]

bg-[hsl(240,100%,80%)]

Gradients

bg-gradient-to-r from-blue-400 to-purple-500

bg-gradient-to-br from-pink-400 via-red-500 to-yellow-500

bg-gradient-to-t from-green-400 to-cyan-500

bg-gradient-to-bl from-orange-400 to-pink-500

bg-gradient-to-l from-indigo-400 to-purple-500

bg-gradient-to-b from-sky-400 to-blue-500

bg-gradient-to-tl from-teal-400 to-green-500

bg-gradient-to-tr from-rose-400 to-orange-500

Tailwind 4 style gradients with from-, via-, to- utilities in all 8 directions (t, tr, r, br, b, bl, l, tl).

Borders & Effects

Border Width & Style

Every Tailwind border width & style keyword is available, including dashed/dotted/double helpers.

border (1px solid)

border-2 border-dashed

border-4 border-double

border-y-4

border-l-8 border-r-8

Border Colors & Partial Edges

Color keywords mirror the palette map, so border-pink-500, border-slate-200, and even logical helpers like border-s all work.

border-blue-500

border-l-emerald-500

border-pink-500/60 (alpha)

border-x-4 border-emerald-500

border-t-4 border-b-4

Tip: Combine with border-transparent when building gradient borders.

Shadows & Elevation

shadow-sm

shadow-lg + color tint

shadow-[custom]

Use arbitrary shadow values for art-directed cards or soft UI blurs.

Ring Effects

ring-2 ring-blue-500

ring-offset + color

ring-inset

Rings stack with borders, so focus states stay crisp even on thick outlines.

Outlines & Divide Helpers

outline-2 outline-sky-500 outline-offset-4

Perfect for keyboard focus styles that sit outside the element.

divide-y divide-gray-200

Row two picks up the divider automatically.

Row three as well.

A

B

C

Rounded Corners Playground

PostWind ships every Tailwind-style border-radius keyword, including directional (`rounded-t-*`), corner (`rounded-tl-*`), and logical (`rounded-s*`) variants. Explore the complete map below.

1. Base Radius Scale

Nine tokens cover everything from perfectly sharp corners to pills.

rounded-none 0px

rounded-none

class="rounded-none"

rounded-sm 0.125rem

rounded-sm

class="rounded-sm"

rounded 0.25rem

rounded

class="rounded"

rounded-md 0.375rem

rounded-md

class="rounded-md"

rounded-lg 0.5rem

rounded-lg

class="rounded-lg"

rounded-xl 0.75rem

rounded-xl

class="rounded-xl"

rounded-2xl 1rem

rounded-2xl

class="rounded-2xl"

rounded-3xl 1.5rem

rounded-3xl

class="rounded-3xl"

rounded-full 9999px

rounded-full

class="rounded-full"

2. Directional Edges (`rounded-{t|r|b|l}`)

Apply radii to paired edges and scale them with any token.

Top Edges

rounded-t

rounded-t

rounded-t-3xl

rounded-t-3xl

Right Edges

rounded-r

rounded-r

rounded-r-full

rounded-r-full

Bottom Edges

rounded-b

rounded-b

rounded-b-3xl

rounded-b-3xl

Left Edges

rounded-l

rounded-l

rounded-l-full

rounded-l-full

3. Individual Corners (`rounded-{tl|tr|br|bl}`)

Mix tokens per corner for custom shapes.

Top Left

rounded-tl

rounded-tl

rounded-tl-3xl

rounded-tl-3xl

Top Right

rounded-tr

rounded-tr

rounded-tr-full

rounded-tr-full

Bottom Right

rounded-br

rounded-br

rounded-br-3xl

rounded-br-3xl

Bottom Left

rounded-bl

rounded-bl

rounded-bl-full

rounded-bl-full

4. Logical Helpers (`rounded-s`, `rounded-e`)

Writing-mode aware classes follow start/end semantics, perfect for RTL.

Inline Edges

rounded-s

rounded-s

rounded-e-3xl

rounded-e-3xl

Switches automatically for RTL/vertical writing modes.

Start Corners

rounded-ss-full

rounded-ss-full

rounded-se-2xl

rounded-se-2xl

Start corners = top-left in LTR, top-right in RTL.

End Corners

rounded-es-full

rounded-es-full

rounded-ee-3xl

rounded-ee-3xl

End corners mirror start corners (bottom / right in LTR).

Transforms

Transform examples using arbitrary values:

scale-[1.1]

rotate-[45deg]

translate-x-[16px]

skew-x-[12deg]

Hover Transforms (Fixed)

Now using proper bracket notation for transforms:

Other Hover Effects:

Auto-Convert Rule: p-12px → p-[12px], w-50vh → w-[50vh], text-16rem → text-[16rem]
Manual Brackets: scale-[1.05], bg-[#ff0000], rotate-[45deg]

Animations & Transitions

Built-in Animations

PostWind includes 4 built-in animations with keyframes automatically loaded:

animate-spin

Continuous rotation

animate-pulse

Opacity fade in/out

animate-bounce

Vertical bouncing

animate-ping

Scale and fade

Note: If animations aren't working, make sure PostWind is initialized: PostWind.init()

Transition Examples

Transition Timing

Hover over each box to see different timing functions. All transitions go from blue to red in 1 second.

Timing Functions

ease-linear

Constant speed

ease-in

Slow start

ease-out

Slow end

ease-in-out

Slow start/end

Duration Examples

duration-75

75ms - Very fast

duration-300

300ms - Standard

duration-700

700ms - Slow

duration-[2s]

2s - Very slow

Interactive Timing Functions

Tip:

Use ease-in-out for most UI interactions as it feels most natural. Use ease-out for elements entering the screen, and ease-in for elements leaving.

Infinite Horizontal Scroll (scroll-x)

Add scroll-x:<seconds> to any inline track to auto-generate a looping marquee. PostWind duplicates the children three extra times and injects the correct animation speed for you—no manual CSS needed.

Ticker in 12 Seconds

Great for compact status pills or announcement badges.

Launch AI Copilot Realtime CSS Shortcuts Container Queries

scroll-x:12

Feature Parade in 24 Seconds

Longer timelines stay smooth thanks to automatic child cloning.

Realtime

Hot Reloaded Utilities

Automation

Class Shortcuts

Responsive

Container Queries

Visibility

visible: Animations

Tooling

Docs Generator

scroll-x:24

Visible Pseudo-class (Scroll Animations)

The visible: pseudo-class triggers animations when elements come into view. Scroll down to see elements animate!

Basic Scroll Animations

Simple Fade In

I fade in when you scroll to me!

visible:opacity-100 opacity-0 transition-all duration-700

Slide Up & Fade

I slide up and fade in simultaneously!

visible:translate-y-0 visible:opacity-100 translate-y-8 opacity-0

Scale Effect

I grow from a smaller size!

visible:scale-100 visible:opacity-100 scale-90 opacity-0

Rotation Effect

I rotate into position!

visible:rotate-0 visible:opacity-100 -rotate-12 opacity-0

Directional Slide Animations

Slide From Left

I slide in from the left side!

visible:translate-x-0 visible:opacity-100 -translate-x-full opacity-0

Slide From Right

I slide in from the right side!

visible:translate-x-0 visible:opacity-100 translate-x-full opacity-0

Slide From Bottom

I slide up from below!

visible:translate-y-0 visible:opacity-100 translate-y-16 opacity-0

Combined Effects

Scale + Rotate + Fade

Multiple transformations at once!

visible:scale-100 visible:rotate-0 visible:opacity-100 scale-50 rotate-180 opacity-0

Bounce Animation

Custom easing for a bouncy effect!

visible:translate-y-0 visible:scale-100 visible:opacity-100 translate-y-8 scale-110 opacity-0 transition-all duration-700 ease-[cubic-bezier(0.68,-0.55,0.265,1.55)]

Staggered Grid Animation

Using transition delays for staggered effects

1

2

3

4

5

6

7

8

visible:opacity-100 visible:translate-y-0 opacity-0 translate-y-8 transition-all duration-500 delay-[100-800]

Practical Use Cases

✓

Feature Highlight

Great for highlighting features as users scroll through your page.

visible:translate-x-0 visible:opacity-100 -translate-x-8 opacity-0 transition-all duration-700 visible:scale-100 scale-0 transition-all duration-700 delay-300

1000+

Happy Customers

visible:opacity-100 opacity-0 transition-all duration-700 + visible:scale-100 scale-0 transition-all duration-1000 delay-300

Ready to Get Started?

Join thousands of developers using PostWind!

visible:translate-y-0 visible:opacity-100 translate-y-8 opacity-0 transition-all duration-700 visible:scale-100 scale-0 transition-all duration-500 delay-500

Tips for Using visible:

• Elements trigger when 70% becomes visible in viewport
• Animations reverse when scrolling back up
• Combine with transition utilities for smooth effects
• Use delays for staggered animations
• Works with all transform, opacity, and position utilities

Real-World Components

Responsive Navigation

DW

PostWind

Utility-first in any context

Features Pricing Docs Playground

Product Card

Product Image

Amazing Product

This is a beautiful product card showcasing various PostWind utilities combined together.

$29.99

Pricing Plans

Starter

Free

Perfect for tinkering and small demos.

• 80+ core utilities
• 1 custom shortcut
• CDN hosted script

Pro

$12/mo

Everything you need for production-ready apps.

• Unlimited shortcuts
• Inline container queries
• Component presets
• Priority support

Teams

Custom

Custom integrations, training, and support.

• Dedicated success engineer
• On-prem options
• Design system reviews

Stats Overview

Active Projects

128

▲ 12% vs last week

Avg Build Time

0.4s

Real-time updates

Shortcuts Added

642

+58 today

Deploy Success

99.2%

Last 30 days

Alert Components

✓

Success!

Your action was completed successfully.

!

Warning

Please check your input before proceeding.

×

Error

Something went wrong. Please try again.

Form Elements

Name

Email

Message

Navigation Example

Documentation

Auto-generated from current PostWind config using PostWind.generateDoc(). Click "Docs" button to generate.