Skip to main content

Integrate Tailwind CSS without JavaScript or npm.

Project description

plain.tailwind

Integrate Tailwind CSS without JavaScript or npm.

Overview

This package allows you to use Tailwind CSS in your Plain project without requiring Node.js or npm. It uses the Tailwind standalone CLI, which is automatically downloaded and managed for you.

First, initialize Tailwind in your project:

plain tailwind init

This creates a tailwind.config.js file in your project root and a source CSS file.

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:

{% tailwind_css %}

Basic Usage

Commands

The plain tailwind command provides several subcommands:

$ plain tailwind
Usage: plain tailwind [OPTIONS] COMMAND [ARGS]...

  Tailwind CSS

Options:
  --help  Show this message and exit.

Commands:
  build    Compile a Tailwind CSS file
  init     Install Tailwind and create tailwind.css
  install  Install the Tailwind standalone CLI
  update   Update the Tailwind CSS version
  • init - Sets up Tailwind in your project, creating necessary config files
  • build - Compiles your Tailwind CSS (use --watch for auto-compilation, --minify for production)
  • update - Updates to the latest version of Tailwind CSS
  • install - Manually install the Tailwind CLI (usually automatic)

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>
    <!-- Your content -->
</body>
</html>

Configuration

Updating Tailwind

The package tracks the Tailwind version in your pyproject.toml:

# pyproject.toml
[tool.plain.tailwind]
version = "3.4.1"

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

To update to the latest version:

plain tailwind update

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

Adding Custom CSS

Custom CSS should be added to your source CSS file (by default at the root of your project as tailwind.css):

@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 →

Deployment

For production deployments:

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

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

Installation

Install the plain.tailwind package from PyPI:

uv add plain.tailwind

Then add to your INSTALLED_PACKAGES:

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

The package stores the Tailwind CLI binary and version information in a .plain directory. Add this to your .gitignore:

.plain/

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

plain_tailwind-0.18.0.tar.gz (7.8 kB view details)

Uploaded Source

Built Distribution

If you're not sure about the file name format, learn more about wheel file names.

plain_tailwind-0.18.0-py3-none-any.whl (12.5 kB view details)

Uploaded Python 3

File details

Details for the file plain_tailwind-0.18.0.tar.gz.

File metadata

  • Download URL: plain_tailwind-0.18.0.tar.gz
  • Upload date:
  • Size: 7.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: uv/0.9.24 {"installer":{"name":"uv","version":"0.9.24","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

Hashes for plain_tailwind-0.18.0.tar.gz
Algorithm Hash digest
SHA256 bac12d28ba22851079fc7dbde6aa9db06cc7448038bbf3f0df193853c8f1f2e2
MD5 e5c411c8697403f897465a1e69da7cef
BLAKE2b-256 98a0eb3b4c352f7bdd9a0feb3d35fdfd49ff41952f5af19b52b55b072ac5f0f5

See more details on using hashes here.

File details

Details for the file plain_tailwind-0.18.0-py3-none-any.whl.

File metadata

  • Download URL: plain_tailwind-0.18.0-py3-none-any.whl
  • Upload date:
  • Size: 12.5 kB
  • Tags: Python 3
  • Uploaded using Trusted Publishing? Yes
  • Uploaded via: uv/0.9.24 {"installer":{"name":"uv","version":"0.9.24","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

Hashes for plain_tailwind-0.18.0-py3-none-any.whl
Algorithm Hash digest
SHA256 af9e186be6ec7f66ed0e830985d980aca5c9eaef740a6eb3d9262763bad63610
MD5 905d11e478d4120113bf66f19d480742
BLAKE2b-256 11fa120977b93c89fd5c82b457c96edf91da0c6141aa9222a790920b934d205b

See more details on using hashes here.

Supported by

AWS Cloud computing and Security Sponsor Datadog Monitoring Depot Continuous Integration Fastly CDN Google Download Analytics Pingdom Monitoring Sentry Error logging StatusPage Status page