Tailwind CSS

The Tailwind version of the boilerplate includes a ready-to-use CSS pipeline. You can start styling immediately without installing another Django Tailwind package or wiring the CLI yourself.

What is already configured

• Tailwind CSS 4.2.2
• @tailwindcss/cli
• @tailwindcss/forms
• @tailwindcss/typography
• a compiled output.css so the site renders styled immediately

Everyday commands

Install the frontend dependencies:

npm install

Run the watcher while you work:

npm run watch:css

Create a one-time production-style build:

npm run build:css

The included package.json already contains the correct input and output paths for your project slug.

Where the CSS lives

The boilerplate writes CSS from:

<project_slug>/static/css/input.css

to:

<project_slug>/static/css/output.css

Keep editing input.css and your Django templates. Let the watcher rebuild output.css for you.

Recommended workflow

• use utility classes directly in templates for most layout and spacing work
• keep custom CSS in input.css for reusable patterns or project-wide tokens
• use the forms and typography plugins for admin-like forms, long-form content, and docs-style pages

Alpine.js

The Tailwind boilerplate also includes Alpine.js in base.html for lightweight interactivity:

<script
  defer
  src="https://cdn.jsdelivr.net/npm/[email protected]/dist/cdn.min.js"
></script>

That is enough for common UI tasks such as:

• toggling a mobile menu
• closing alerts and dropdowns
• showing and hiding modals

Design resources

• Tailwind CSS docs
• Tailwind UI if you want a paid component library
• DaisyUI if you want a free component layer on top of Tailwind

If you use an LLM to draft Tailwind markup, treat the output as a first pass. Review the generated classes, simplify where needed, and keep the final templates readable.