Integrate Tailwind CSS without JavaScript or npm.
Project description
plain.tailwind
Integrate Tailwind CSS without JavaScript or npm.
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.csssource 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.cssto your.gitignore - Run
plain tailwind build --minifyas 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.build.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
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
Built Distribution
Filter files by name, interpreter, ABI, and platform.
If you're not sure about the file name format, learn more about wheel file names.
Copy a direct link to the current filters
File details
Details for the file plain_tailwind-0.22.0.tar.gz.
File metadata
- Download URL: plain_tailwind-0.22.0.tar.gz
- Upload date:
- Size: 9.9 kB
- Tags: Source
- Uploaded using Trusted Publishing? Yes
- Uploaded via: uv/0.11.14 {"installer":{"name":"uv","version":"0.11.14","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}
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
b0edf49603d83fd2c5f2bbc5be09c82b9863f9a3d7649aa6cab8014a85f531ff
|
|
| MD5 |
906a0b1121a427d8ea822b7cdcd1a96f
|
|
| BLAKE2b-256 |
e7c68cb0b83af63164ab53ef417f507355aa9f5d9ffe60ec0ad0cb2328cc61f3
|
File details
Details for the file plain_tailwind-0.22.0-py3-none-any.whl.
File metadata
- Download URL: plain_tailwind-0.22.0-py3-none-any.whl
- Upload date:
- Size: 16.0 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? Yes
- Uploaded via: uv/0.11.14 {"installer":{"name":"uv","version":"0.11.14","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}
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
7f94116c552d3fcbdfa281895cb46c650232beacbbd9c52d3f4a0ab500cabffe
|
|
| MD5 |
76b6e76e9944e35fe32ed98a80f7e68a
|
|
| BLAKE2b-256 |
b6ba31e3e0dba66c86771a0d71370c409576a336b6657744befcfc506e55adb7
|
