My Article Title
This content will have beautiful typography applied automatically.
```
--------------------------------
### Build Documentation
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Generate the project's documentation using the make command.
```bash
make docs
```
--------------------------------
### Build Package with UV
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Create a distributable package for the project using uv.
```bash
uv build
```
--------------------------------
### Initialize Tailwind CSS app
Source: https://github.com/timonweb/django-tailwind/blob/master/README.md
Run the 'tailwind init' management command to create the necessary Tailwind CSS files and configurations for your project.
```bash
python manage.py tailwind init
```
--------------------------------
### Add Theme App to INSTALLED_APPS
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
After initializing your theme app (e.g., 'theme'), add it to the INSTALLED_APPS in settings.py.
```python
INSTALLED_APPS = [
# other Django apps
"tailwind",
"theme",
]
```
--------------------------------
### Run Pre-commit Hooks
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Execute all pre-commit hooks on all files in the repository.
```bash
pre-commit run --all-files
```
--------------------------------
### Update Dependencies with UV
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Lock and upgrade project dependencies using uv.
```bash
uv lock --upgrade
```
--------------------------------
### Run All Tests with Tox
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Execute all defined test suites using Tox and uvx for dependency management.
```bash
uvx --with-tox-uv tox
```
--------------------------------
### Configure npm Executable Path (Linux/Mac)
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Manually set the path to the npm executable in `settings.py` if Python cannot find it. Use `which npm` to find the path.
```python
NPM_BIN_PATH = "/usr/local/bin/npm"
```
--------------------------------
### Format Code with Ruff
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Apply code formatting rules using Ruff.
```bash
uv run ruff format
```
--------------------------------
### Configure generated app and TAILWIND_APP_NAME
Source: https://github.com/timonweb/django-tailwind/blob/master/README.md
Add the generated Tailwind app (e.g., 'theme') to INSTALLED_APPS and set the TAILWIND_APP_NAME variable in settings.py.
```python
INSTALLED_APPS = [
# ...
"tailwind",
"theme", # your generated app name
]
TAILWIND_APP_NAME = "theme"
```
--------------------------------
### Enable Standalone Binary Mode
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/settings.md
Explicitly set `TAILWIND_USE_STANDALONE_BINARY` to True in `settings.py` to enforce the use of the standalone Tailwind CSS binary.
```python
# settings.py
TAILWIND_USE_STANDALONE_BINARY = True
```
--------------------------------
### Configure npm Executable Path (Windows - npm.cmd)
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Override the default `NPM_BIN_PATH` to `npm.cmd` in `settings.py` if using npm on Windows and it's available as `npm.cmd`.
```python
NPM_BIN_PATH = "npm.cmd"
```
--------------------------------
### Custom TAILWIND_STANDALONE_BUILD_COMMAND_ARGS
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/settings.md
Customize the Tailwind CSS standalone binary build arguments to use different input/output paths or additional build options like optimization. Ensure output paths align with your project structure.
```python
# settings.py
TAILWIND_STANDALONE_BUILD_COMMAND_ARGS = (
"-i theme/static_src/input.css -o theme/static/output.css --minify --optimize"
)
```
--------------------------------
### Default TAILWIND_STANDALONE_BUILD_COMMAND_ARGS
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/settings.md
This is the default setting for command-line arguments passed to the Tailwind CSS standalone binary for production builds. It specifies input and output CSS files and enables minification.
```python
TAILWIND_STANDALONE_BUILD_COMMAND_ARGS = (
"-i static_src/src/styles.css -o static/css/dist/styles.css --minify"
)
```
--------------------------------
### Add django-tailwind to INSTALLED_APPS
Source: https://github.com/timonweb/django-tailwind/blob/master/README.md
Add the 'tailwind' app to your Django project's INSTALLED_APPS setting in settings.py.
```python
INSTALLED_APPS = [
# ...
"tailwind",
]
```
--------------------------------
### Add 'tailwind' to INSTALLED_APPS
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Configure your Django project's settings.py to include 'tailwind' in the INSTALLED_APPS list.
```python
INSTALLED_APPS = [
# other Django apps
"tailwind",
]
```
--------------------------------
### Run Tests with Pytest
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Execute tests directly using Pytest, managed by uv.
```bash
uv run pytest
```
--------------------------------
### Configure TAILWIND_APP_NAME
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Set the TAILWIND_APP_NAME variable in settings.py to specify your generated theme app.
```python
TAILWIND_APP_NAME = "theme"
```
--------------------------------
### Add django_browser_reload to INSTALLED_APPS
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Conditionally add 'django_browser_reload' to INSTALLED_APPS in settings.py, only when DEBUG is True.
```python
INSTALLED_APPS = [
# other Django apps
"tailwind",
"theme",
]
if DEBUG:
# Add django_browser_reload only in DEBUG mode
INSTALLED_APPS += ["django_browser_reload"]
```
--------------------------------
### Explicitly Define Source Paths
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/existing-project.md
Use multiple `@source` directives in your CSS to explicitly include templates and Python files from different directories. This is useful when apps are nested in subdirectories.
```css
@import "tailwindcss";
/* Theme app templates */
@source "../../templates/**/*.html";
/* All other app templates */
@source "../../../apps/**/*.html";
/* Python files (class names rendered dynamically) */
@source "../../../apps/**/*.py";
```
--------------------------------
### Check and Fix Code Issues with Ruff
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Identify and automatically fix code quality issues using Ruff.
```bash
uv run ruff check --fix
```
--------------------------------
### Run Specific Test File with Pytest
Source: https://github.com/timonweb/django-tailwind/blob/master/CLAUDE.md
Execute tests from a particular file using Pytest.
```bash
uv run pytest tests/test_cli.py
```
--------------------------------
### Centralized Stylesheet with Tailwind
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/existing-project.md
Define all custom styles, component classes, and theme extensions in a single `styles.css` file within your theme app. This file serves as the entry point for all Tailwind CSS customization.
```css
/* theme/static_src/src/styles.css */
@import "tailwindcss";
@source "../../../**/*.{html,py,js}";
/* Custom CSS variables / design tokens */
@layer base {
:root {
--color-brand: oklch(55% 0.2 250);
}
}
/* Reusable component classes used across apps */
@layer components {
.btn-primary {
@apply bg-blue-600 text-white px-4 py-2 rounded hover:bg-blue-700;
}
}
```
--------------------------------
### Add django_browser_reload Middleware
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Conditionally add the BrowserReloadMiddleware to your MIDDLEWARE list in settings.py, only when DEBUG is True. Ensure it's placed after response encoding middleware.
```python
if DEBUG:
# Add django_browser_reload middleware only in DEBUG mode
MIDDLEWARE += [
"django_browser_reload.middleware.BrowserReloadMiddleware",
]
```
--------------------------------
### Tailwind CSS v3 Content Rules Configuration
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Configure paths to templates and source files containing Tailwind CSS class names in `tailwind.config.js`. Ensure all HTML files are covered.
```javascript
module.exports = {
content: [
// Templates within theme app (e.g. base.html)
'../templates/**/*.html',
// Templates in other apps
'../../templates/**/*.html',
// Ignore files in node_modules
'!../../**/node_modules',
// Include JavaScript files that might contain Tailwind CSS classes
'../../**/*.js',
// Include Python files that might contain Tailwind CSS classes
'../../**/*.py'
],
...
}
```
--------------------------------
### Tailwind CSS v4 @source Directive Configuration
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Specify source files for Tailwind CSS v4 scanning. Adjust the path to match your project structure.
```css
@source "../../**/*.{html,py,js}";
```
--------------------------------
### Set Tailwind CSS Standalone Binary Version
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/settings.md
Specify the Tailwind CSS standalone binary version to use. This setting applies only when using standalone binary mode. The default is 'v4.3.0'.
```python
TAILWIND_STANDALONE_BINARY_VERSION = "v4.3.0"
```
```python
# settings.py
TAILWIND_STANDALONE_BINARY_VERSION = "v4.2.0"
```
--------------------------------
### Theme App Stylesheet Configuration
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/existing-project.md
This CSS snippet configures Tailwind CSS to scan for class names in HTML, Python, and JavaScript files across the entire Django project. It serves as the central entry point for styles in a multi-app project.
```css
@import "tailwindcss";
@source "../../../**/*.{html,py,js}";
```
--------------------------------
### Default TAILWIND_CSS_PATH
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/settings.md
The default path to the generated Tailwind CSS stylesheet. This setting is typically not needed if using the `tailwind init` command, but can be changed for custom integrations or CDN usage.
```python
TAILWIND_CSS_PATH = "css/dist/styles.css"
```
--------------------------------
### Include django_browser_reload URLs in Root URLs
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Conditionally include django_browser_reload URLs in your project's root urls.py, only when DEBUG is True.
```python
from django.urls import include, path
from django.conf import settings
urlpatterns = [
# other URL patterns
]
if settings.DEBUG:
# Include django_browser_reload URLs only in DEBUG mode
urlpatterns += [
path("__reload__/", include("django_browser_reload.urls")),
]
```
--------------------------------
### Include Tailwind CSS Tag in Base Template
Source: https://github.com/timonweb/django-tailwind/blob/master/docs/installation.md
Load the tailwind_tags and include the {% tailwind_css %} tag in your base HTML template to render Tailwind's stylesheet.
```html
{% load static tailwind_tags %}
...
...
{% tailwind_css %}
...
```
--------------------------------
### Use Tailwind CSS in Django templates
Source: https://github.com/timonweb/django-tailwind/blob/master/README.md
Load Tailwind CSS tags and apply Tailwind classes to HTML elements within your Django templates.
```html
{% load tailwind_tags %}
{% tailwind_css %}