ts-django-tailwind

ts-django-tailwind is an open-source boilerplate that demonstrates how to integrate Tailwind CSS 3.4.14 with Django 5, providing developers with a working setup for building responsive, modern web applications.

What is ts-django-tailwind?

ts-django-tailwind is an example project and guide for combining Django with Tailwind CSS. It pairs Django 5, the Python web framework, with Tailwind CSS version 3.4.14, the utility-first styling library, and adds Prettier for automatic formatting of utility classes on save. The repository holds the configuration and commands needed to run both a Tailwind watcher and Django's development server.

Key Features

• Django 5 backend — The project is built on Django 5, the latest major release at the time of writing, giving it modern ORM and template features.
• Tailwind CSS 3.4.14 — Styles are compiled using Tailwind version 3.4.14, which includes the current utility syntax and configuration options.
• Prettier formatting — Prettier is included to automatically sort and format Tailwind class names when files are saved, if the editor extension is installed.
• NPM-based workflow — All front-end tooling is managed through npm, with npm run watch:css responsible for compiling Tailwind styles in watch mode.
• Straightforward setup — Setup requires four terminal commands: clone, npm install, npm run watch:css, then python manage.py runserver.

Who is it for?

• Django developers — Developers who want to adopt Tailwind can clone this repo to see a minimal, working integration and reuse the setup in their own projects.
• Full-stack prototypes — Teams building quick internal tools or MVPs on Django can use this as a base for a modern front-end without introducing a full JavaScript framework.
• Developers who like automated code style — The Prettier integration keeps utility class ordering consistent across templates without manual effort.

What can you do with ts-django-tailwind?

• Start a Tailwind-enabled Django project: clone the repo and run the two watcher and server commands to get a working development environment with compiled CSS.
• Study the integration pattern: inspect how Tailwind's configuration and the npm scripts connect to Django's static file handling.
• Build responsive pages directly: write Django templates with Tailwind utility classes and have them compile into a static stylesheet served by Django.

How does ts-django-tailwind work?

The repository defines a simple two-process workflow. First, npm install pulls the npm dependencies listed in the project. Then npm run watch:css starts Tailwind's watcher, which compiles the Tailwind input into a CSS file and rebuilds it as templates change. In parallel, python manage.py runserver launches Django so templates render with the freshly generated styles. Prettier is activated in the editor to format class lists on save.

Alternatives

• django-tailwind — a third-party Django package that integrates Tailwind via a management command, which handles installation and compilation through Django itself rather than npm.

FAQ

Do I need Node.js to run this project?

Yes. The front-end build uses npm, so Node.js and npm must be installed on your system before running the Tailwind watcher.

Does this project use the django-tailwind package?

No. The project wires Tailwind directly using npm scripts and a Tailwind config file, rather than relying on the django-tailwind package's management commands.

What Django version is this built with?

The description states Django 5, so the project is aligned with that major version's APIs and improvements.

How do I automatically format Tailwind classes?

Install the Prettier extension in your code editor. When you save a file containing Tailwind classes, Prettier will reorder them according to its rules.

What does the watch:css script do?

It runs Tailwind's watch mode, which monitors your template files and configuration. Any change triggers a rebuild of the CSS, so your compiled styles always match your latest edits.