Tailwind CSS¶

Keywords: tailwind config, tailwind theme, customizing css, tailwind import

Asok ships with optional, opt-in Tailwind CSS v4 support. The Tailwind standalone binary is downloaded into your project (no Node.js, no npm) and runs automatically during dev and build.

Quick start¶

Scaffold a new project with Tailwind enabled:

asok create myapp --tailwind
cd myapp
asok dev

This downloads the Tailwind v4 standalone binary (~30 MB) into .asok/bin/, generates src/partials/css/base.css with @import "tailwindcss";, and starts a watcher alongside the dev server.

How it works¶

Phase	What happens
`asok create --tailwind`	Downloads the binary, creates `base.css`, builds `base.build.css`
`asok dev`	Auto-detects Tailwind, starts a watcher subprocess that rebuilds on changes
`asok build` (production)	Runs a one-shot minified build
Templates	Reference `css/base.build.css` (the compiled output)

The watcher and one-shot builder are detected automatically by checking for @import "tailwindcss" in src/partials/css/base.css. There is no config flag — if it’s there, Tailwind runs.

Commands¶

`asok tailwind --install`¶

(Re-)download the pinned Tailwind binary:

asok tailwind --install
#   Downloading Tailwind v4.3.0 (macos-arm64)...
#   Tailwind v4.3.0 installed

The binary is pinned to a specific version and stored in .asok/bin/tailwindcss. Re-running this only downloads if the version is missing or outdated.

`asok tailwind --build`¶

One-shot build (development mode):

asok tailwind --build

`asok tailwind --build --minify`¶

Production build:

asok tailwind --build --minify

Adding Tailwind to an existing project¶

If you decided to add Tailwind CSS after your project was created, just run:

asok tailwind --enable

This command will:

Download the required binary.
Setup src/partials/css/base.css with the Tailwind import.
Update your layout to reference the compiled CSS file.
Perform an initial build.

Supported platforms¶

The binary is downloaded from the official tailwindlabs/tailwindcss GitHub releases. Supported: macOS (x64/arm64), Linux (x64/arm64), Windows (x64). On unsupported platforms, install Tailwind manually and place the binary at .asok/bin/tailwindcss.

Nested UI Customization¶

Asok v0.1.6 introduces a nested attribute targeting system designed specifically for Tailwind CSS users. Complex components can be styled at every level using the __ separator:

<!-- Style a dropdown with Tailwind -->
{{ form.dropdown("Filter", items,
    trigger__class="bg-white border rounded px-4 py-2 flex items-center gap-2",
    menu__class="absolute mt-1 w-64 bg-white shadow-xl rounded-lg border",
    item__class="px-4 py-2 hover:bg-indigo-50 cursor-pointer transition-colors"
) }}

See Forms for more details.

Notes¶

The pinned version lives in asok/cli.py as TAILWIND_VERSION (currently 4.3.0).
The binary is not committed to git — .asok/ should be in your .gitignore (the scaffold does this automatically).
The watcher logs are prefixed with [tailwind] so you can tell them apart from server logs.
The admin module does not use Tailwind — it ships with self-contained CSS so it works regardless of whether your project uses Tailwind.