plain.tailwind

Integrate Tailwind CSS without JavaScript or npm.

Overview
CLI commands
Template tag
Settings
Adding custom CSS
Deployment
FAQs
Installation

Overview

You can use Tailwind CSS in your Plain project without Node.js or npm. This package automatically downloads and manages the Tailwind standalone CLI for you.

Initialize Tailwind in your project:

plain tailwind init

This creates a tailwind.css source file in your project root. Then compile your CSS:

plain tailwind build

For development, use watch mode to automatically recompile when files change:

plain tailwind build --watch

Include the compiled CSS in your templates:

<!DOCTYPE html>
<html>
<head>
    {% tailwind_css %}
</head>
<body>
    <h1 class="text-3xl font-bold text-blue-600">Hello, Tailwind!</h1>
</body>
</html>

CLI commands

`plain tailwind init`

Sets up Tailwind in your project. This command:

Downloads the Tailwind standalone CLI (if not already installed)
Creates a tailwind.css source file in your project root

plain tailwind init

`plain tailwind build`

Compiles your Tailwind CSS from the source file to app/assets/tailwind.min.css.

# One-time build
plain tailwind build

# Watch mode for development
plain tailwind build --watch

# Minified build for production
plain tailwind build --minify

The build command automatically installs or updates the Tailwind CLI if needed.

`plain tailwind update`

Updates to the latest version of Tailwind CSS:

plain tailwind update

This downloads the newest version and updates your pyproject.toml.

Template tag

The tailwind_css template tag includes the compiled CSS file in your templates. Place it in your base template's <head>:

<!DOCTYPE html>
<html>
<head>
    {% tailwind_css %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

The tag renders a <link> element pointing to your compiled CSS file.

Settings

Setting	Default	Env var
`TAILWIND_SRC_PATH`	`<project>/tailwind.css`	-
`TAILWIND_DIST_PATH`	`app/assets/tailwind.min.css`	-

See default_settings.py for more details.

The Tailwind version is tracked in your pyproject.toml:

[tool.plain.tailwind]
version = "4.0.0"

When you run plain tailwind build, it automatically checks if your local installation matches this version and updates if needed.

Adding custom CSS

Add custom CSS to your source file (by default tailwind.css at the project root):

@import "tailwindcss";
@import "./.plain/tailwind.css";

/* Add your custom styles here */
.btn-primary {
    @apply bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded;
}

.custom-gradient {
    background: linear-gradient(to right, #4f46e5, #7c3aed);
}

The @import "./.plain/tailwind.css" line includes styles from all your installed Plain packages.

Read the Tailwind docs for more about using custom styles.

Package CSS contributions

Plain packages can contribute CSS to your Tailwind build by shipping a tailwind.css file next to their __init__.py. If the file exists, an @import for it is automatically added to .plain/tailwind.css — no user configuration required.

Use it for design tokens (@theme), component layers (@apply-based rules inside @layer components), @custom-variants, or anything else that needs to be part of the Tailwind compilation rather than a separate <link>.

/* my-package/plain/my_package/tailwind.css */
@theme {
    --color-brand: oklch(0.5 0.15 250);
}

@layer components {
    .my-callout {
        @apply rounded-md border border-brand bg-brand/10 p-4;
    }
}

The file path is relative to the package's Python directory. To split content across multiple files, use @import inside tailwind.css:

@import "./assets/components.css";
@import "./assets/tokens.css";

plain-admin uses this pattern to integrate its vendored Basecoat UI components — see plain.admin's component system.

Deployment

For production deployments:

Add app/assets/tailwind.min.css to your .gitignore
Run plain tailwind build --minify as part of your deployment process

The build command automatically installs the Tailwind CLI if it is not present, making deployments seamless.

You can automate this by adding a build command to your pyproject.toml:

[tool.plain.assets.run]
tailwind = {cmd = "plain tailwind build --minify"}

FAQs

How does this work without Node.js?

Tailwind provides a standalone CLI that bundles everything needed to compile CSS. This package downloads the appropriate binary for your platform (macOS, Linux, or Windows) and manages it for you.

Where is the Tailwind CLI stored?

The Tailwind binary and version information are stored in a .plain directory in your project root. Add this to your .gitignore:

.plain/

How do I use Tailwind classes from other Plain packages?

The @import "./.plain/tailwind.css" line in your source CSS automatically includes @source directives for all installed Plain packages. This ensures Tailwind scans those packages for class usage.

Can I use Tailwind plugins?

The standalone CLI includes all first-party plugins. For third-party plugins that require npm, you would need to use the standard Tailwind installation instead.

Installation

Install the plain.tailwind package from PyPI:

uv add plain.tailwind

Add plain.tailwind to your INSTALLED_PACKAGES:

# app/settings.py
INSTALLED_PACKAGES = [
    # ...
    "plain.tailwind",
]

Add .plain/ to your .gitignore:

.plain/

Initialize Tailwind in your project:

plain tailwind init

Add the tailwind_css template tag to your base template:

<!DOCTYPE html>
<html>
<head>
    {% tailwind_css %}
</head>
<body>
    {% block content %}{% endblock %}
</body>
</html>

Run the build command to compile your CSS:

plain tailwind build --watch

Metadata

Release files for plain.tailwind 0.24.2

For a detailed explanation of source distributions (sdists) and built distributions (wheels), please see the package formats documentation.

Source distribution (sdist)

Source distribution for plain.tailwind 0.24.2
File	Size	Uploaded
plain_tailwind-0.24.2.tar.gz	11.4 kB	Sep 20, 2026	Details

Built distribution (wheel)

Table of built distributions (wheels) for plain.tailwind 0.24.2
File	Interpreter	ABI	Platform	Reset
plain_tailwind-0.24.2-py3-none-any.whl 17.6 kB Sep 20, 2026	Python 3	none	any	Details

Total release size: 29.0 kB

Release files / plain_tailwind-0.24.2.tar.gz

Download URL	plain_tailwind-0.24.2.tar.gz
Size	11.4 kB
Tags	Source
SHA-256 checksum How to use checksums	`6abecb156a5ab3ab8fc7ff1c7b473a552411cfcf23d94bfe3ac403d8c8b8e323`
BLAKE2b-256 checksum How to use checksums	`c6342116e22912b01fc46356d50ef9f364883c10f2007d9544419d8011a52108`
Upload date	Sep 20, 2026
Uploaded using Trusted Publishing? What is trusted publishing?	Yes
Uploaded via	`uv/0.12.17 {"installer":{"name":"uv","version":"0.12.17","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Ubuntu","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}`

Release files / plain_tailwind-0.24.2-py3-none-any.whl

Download URL	plain_tailwind-0.24.2-py3-none-any.whl
Size	17.6 kB
Tags	Python 3
SHA-256 checksum How to use checksums	`5bed6923c30a1f37fe1eaedfc519bd44cd17bc5d2a26b3a641409e560ee81280`
BLAKE2b-256 checksum How to use checksums	`8a696fe3dac8e08c0af6b09054fd5ec89f7ab252e70ba52bec3906ecd154c7e0`
Upload date	Sep 20, 2026
Uploaded using Trusted Publishing? What is trusted publishing?	Yes
Uploaded via	`uv/0.12.17 {"installer":{"name":"uv","version":"0.12.17","subcommand":["publish"]},"python":null,"implementation":{"name":null,"version":null},"distro":{"name":"Ubuntu","version":"24.04","id":"noble","libc":null},"system":{"name":null,"release":null},"cpu":null,"openssl_version":null,"setuptools_version":null,"rustc_version":null,"ci":true}`