Django and Tailwind integration based on the prebuilt Tailwind CSS CLI.
Project description
django-tailwind-cli
This project provides an integration of Tailwind CSS for Django that is based on the precompiled versions of the Tailwind CSS CLI.
It is inspired by the implementation of the Tailwind integration for Phoenix which completely skips the neccesity of a node installation. So it is a perfect match, if you are a user of htmx or any other framework that tries to avoid JavaScript coding in your web app. My personal motivation was, that I discovered that I never needed any other plugin besides the official plugins, which are already included in the CLI.
If you want to use node or you have to use it because of other dependencies, then the package django-tailwind by Tim Kamamin might be a better solution for you.
Features
- Management Commands...
- ...to install the the CLI for your operating system and machine architecture.
- ...to start the CLI in watch mode to incrementally compile your style sheet.
- ...to create a theme app which includes a basic stylesheet and a tailwind configuration which you can extend.
- ...to build the production ready CSS file.
- A template tag to include the CSS file in your base template.
- All the official plugins (typography, form, line-clamp, and aspect-ratio) integrated in the CLI are activated in the default configuration.
Requirements
Python 3.8 or newer with Django >= 3.2.
Installation
-
Install the package inside your Django project.
python -m pip install django-tailwind-cli
-
Add
django_tailwind_clitoINSTALLED_APPSinsettings.py.INSTALLED_APPS = [ # other Django apps "django_tailwind_cli", ]
-
Run the management command to install the cli and initialize the theme app.
python manage.py tailwind installcli python manage.py tailwind init
This installs the CLI to
$HOME/.local/bin/and creates a new app in your project with the nametheme. -
Add the new theme app to
INSTALLED_APPSinsettings.py.INSTALLED_APPS = [ # other Django apps "django_tailwind_cli", "theme", ]
-
Edit your base template to include Tailwind's stylesheet.
{% load tailwind_cli %} ... <head> ... {% tailwind_css %} ... </head> -
Start the Tailwind CLI in watch mode.
python manage.py tailwind watch
-
(Optional) Add django-browser-reload if you enjoy automatic reloading during development.
Configuration
The default configuration for this package is.
{
"TAILWIND_VERSION": "3.1.8",
"TAILWIND_CLI_PATH": "~/.local/bin/",
"TAILWIND_THEME_APP": "theme",
"TAILWIND_SRC_CSS": "src/styles.css",
"TAILWIND_DIST_CSS": "css/styles.css",
}
- Set
TAILWIND_VERSIONto the version of Tailwind you want to use. TAILWIND_CLI_PATHdefines where the CLI is installed. The default makes sense on macOS or Linux. On Windows it might helpful to pick a different path.TAILWIND_THEME_APPdefines the name of the theme application created by the management commandtailwind init.TAILWIND_SRC_CSSandTAILWIND_DIST_CSSdefines the internal structure of the theme app.TAILWIND_DIST_CSSis a path always relative to thestaticfolder of the theme app.
Management Commands
| Command | Description |
|---|---|
tailwind installcli |
Download the CLI version TAILWIND_VERSION to TAILWIND_CLI_PATH. |
tailwind init |
Create a new theme app with the name TAILWIND_THEME_APP inside the settings.BASE_DIR of your project. |
tailwind watch |
Start the CLI in watch and incremental compilation mode. |
tailwind build |
Create a production ready build of the Tailwind stylesheet. You have to run this before calling the collectstatic command. |
Template Tags
This package provides a single template tag to include the Tailwind CSS. Depending on the value of settings.DEBUG it activates preload or not.
{% load tailwind_cli %}
...
<head>
...
{% tailwind_css %}
...
</head>
DEBUG == False creates the following output:
<link rel="preload" href="/static/css/styles.css" as="style">
<link rel="stylesheet" href="/static/css/styles.css">
DEBUG == True creates this output:
<link rel="stylesheet" href="/static/css/styles.css">
License
This software is licensed under MIT license. Copyright (c) 2022 Oliver Andrich.
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
File details
Details for the file django-tailwind-cli-1.3.0.tar.gz.
File metadata
- Download URL: django-tailwind-cli-1.3.0.tar.gz
- Upload date:
- Size: 11.3 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: pdm/2.4.9 CPython/3.11.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | e6eee643b48ab6782e65a889567219d09300237dfd237fab776085eb06747423 |
|
| MD5 | b91de9a48982a8097cd3c11223f191ab |
|
| BLAKE2b-256 | 05adef011d7d1414a40aa39e8c5b0ee19913521e49053852081908fc2c9078cf |
File details
Details for the file django_tailwind_cli-1.3.0-py3-none-any.whl.
File metadata
- Download URL: django_tailwind_cli-1.3.0-py3-none-any.whl
- Upload date:
- Size: 9.0 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: pdm/2.4.9 CPython/3.11.2
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 | 437e09bc7c6b40e868a336fcb644af5197d02be307f539d16806c28bcea7eea4 |
|
| MD5 | fc935504641830288e9e416e9067287a |
|
| BLAKE2b-256 | bd6f28108cc1d595becbb080c7e24eb5f9bbdf3003c255fbf06ed496bd30893a |
