Steady Wind

A static, utility-first CSS framework inspired by Tailwind CSS

Get Started API Docs

About Steady Wind

Steady Wind is a static, utility-first CSS framework inspired by Tailwind CSS. It provides a comprehensive set of utility classes that can be used to build modern websites without writing custom CSS.

Unlike Tailwind CSS, Steady Wind is designed to be used as a static framework, with no runtime CSS generation. This makes it ideal for projects where you need a Bootstrap-like approach but with the utility-first methodology of Tailwind.

Key Features

Static Framework

No runtime CSS generation needed - just include the CSS file and start building.

Utility-First

Compose complex designs directly in your markup with functional utility classes.

Responsive Design

Built-in responsive variants for all utilities using the double underscore syntax.

Comprehensive

Includes utilities for layout, typography, colors, spacing, flexbox, grid, and more.

Optimizable

Use our Prune API to generate optimized CSS builds with only the classes you need.

Customizable

Easily extend or modify the framework to suit your project's needs.

Getting Started

Installation

Include the Steady Wind CSS file in your HTML:

<link rel="stylesheet" href="https://steady-wind.example.com/cdn/steady-wind.min.css">

Usage

Start using the utility classes in your HTML:

<div class="flex justify-between items-center p-4 bg-blue-500 text-white">
  <h1 class="text-xl font-bold">Hello, Steady Wind!</h1>
  <button class="bg-white text-blue-500 px-4 py-2 rounded">Click Me</button>
</div>

Responsive Design

Use the double underscore syntax for responsive variants:

<div class="block md__flex lg__grid">
  <!-- Content here -->
</div>

Tailwind CSS Inspired

Steady Wind created based on Tailwind V3, all usage docs are available on the Tailwind CSS website.

Ready to Get Started?

Start building beautiful, responsive websites with Steady Wind today.

Download Steady Wind