A simple Django app to integrate Tailwind CSS v4.
Project description
Django Tailwind CSS v4
A simple, beginner-friendly Django app to integrate Tailwind CSS v4 into your project.
This package automates the setup process by providing management commands to initialize your project with the necessary Tailwind configuration and install its dependencies, without requiring complex bundlers like Webpack or Vite.
Key Features
- Simple Setup: A single command to get you started.
- Automated Dependency Installation: Automatically creates a
package.jsonand runsnpm install. - Django Integration: Works seamlessly with
manage.pycommands. - Official CLI: Uses the official
@tailwindcss/clifor fast and reliable builds. - Development Ready: Includes a
--watchmode for automatic rebuilding. - Production Ready: Supports CSS minification with a
--minifyflag.
Requirements
- Python 3.8+
- Django 4.2+
- Node.js and npm
Installation
-
Install the package from PyPI:
pip install django-tailwind-v4
-
Add it to your
INSTALLED_APPSinsettings.py:# settings.py INSTALLED_APPS = [ # ... other apps 'django_tailwind_v4', ]
Usage
1. Initialize Your Project
Run the tailwind_init command. This single command handles the entire setup process for you.
python manage.py tailwind_init
This will:
- Create a
package.jsonwith the required Tailwind dependencies. - Create a
tailwind.config.jsfile pre-configured for Django templates. - Create a
static/src/input.cssfile with the correct v4@importdirective. - Automatically run
npm installto download the Tailwind CLI.
2. Build Your CSS
Run the tailwind_build command to compile your CSS. For development, it's highly recommended to use the --watch flag in a separate terminal.
# For development (watches for changes and rebuilds automatically)
python manage.py tailwind_build --watch
# For a single production build (minified)
python manage.py tailwind_build --minify
### 3. Include the CSS in Your Template
Finally, link the compiled stylesheet in your base HTML template.
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Awesome Site</title>
<link href="{% static 'dist/output.css' %}" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold text-blue-600">
Hello, Tailwind!
</h1>
</body>
</html>
Configuration
While the package works out of the box, you have full control to customize its behavior.
Customizing Paths
You can change the default input and output CSS paths by adding the following variables to your settings.py file. This is useful if you are integrating with an existing theme structure.
# settings.py
# Path to your source CSS file (default is 'static/src/input.css')
TAILWIND_INPUT_CSS = 'themes/mytheme/css/styles.css'
# Path where the compiled CSS will be saved (default is 'static/dist/output.css')
TAILWIND_OUTPUT_CSS = 'themes/mytheme/static/css/styles.css'
Customizing Tailwind CSS
The tailwind.config.js file created by the init command is a standard Tailwind configuration file. You can edit it to customize your design system.
For example, to add custom colors:
// tailwind.config.js
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
'./**/templates/**/*.html',
],
theme: {
extend: {
colors: {
'brand-blue': '#1992d4',
},
},
},
plugins: [],
}
You can also install and add Tailwind plugins. For example, to add the official forms plugin:
- Install the plugin via npm:
npm install -D @tailwindcss/forms
- Add it to your
tailwind.config.js:// tailwind.config.js module.exports = { // ... plugins: [ require('@tailwindcss/forms'), ], }
License
This project is licensed under the MIT License. See the LICENSE file for details.
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 django_tailwind_v4-0.2.0.tar.gz.
File metadata
- Download URL: django_tailwind_v4-0.2.0.tar.gz
- Upload date:
- Size: 4.6 kB
- Tags: Source
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.10.12
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
93dac0cbfa7cc79d1f526418810681aa8e17587f6467b9a0cf7dc6fc1637e276
|
|
| MD5 |
594421eb69fddbcaa0c46bbc9af559d0
|
|
| BLAKE2b-256 |
57227016c9a355aa0548d7173ee61952e0b2de63e090f16916648bc3b45a17bd
|
File details
Details for the file django_tailwind_v4-0.2.0-py3-none-any.whl.
File metadata
- Download URL: django_tailwind_v4-0.2.0-py3-none-any.whl
- Upload date:
- Size: 5.3 kB
- Tags: Python 3
- Uploaded using Trusted Publishing? No
- Uploaded via: twine/6.1.0 CPython/3.10.12
File hashes
| Algorithm | Hash digest | |
|---|---|---|
| SHA256 |
fd8c55c31f6767e29acc6740c83445fdd87eb334f980cfad17298bda341a5cd5
|
|
| MD5 |
934f6ceb113fd727cefbdfa41e3eaf0e
|
|
| BLAKE2b-256 |
8845c0041ec683c2a6b526962174c56ba67cda255461e1fe9a4fbfa2669ba6b5
|
