Techical Virtual Assistant / Web Developer

Directory Setup

First, create the necessary file structure in your Django project:

In your static folder, create an output.css file
Create a src folder with an input.css file

Your structure should look like this:

static/
├── css/
│   └── output.css
└── src/
    └── input.css

Configure Input CSS

Add the following to your input.css file:

@import "tailwindcss";

That's it! No additional configuration required for Tailwind 4.

Update Your Base Template

In your base.html file, add these lines to the <head> section:

{% load static %}
<!-- CSS style links -->
<link href="{% static 'css/style.css' %}" rel="stylesheet">
<link href="{% static 'css/output.css' %}" rel="stylesheet">

Important: Include {% load static %} at the very top of your base.html file and all template files that use CSS or images. Any file using static files needs this tag at the top, after any {% extends 'base.html' %} tag.

Install Tailwind CSS 4

Install Tailwind CSS according to the official instructions:

npm install tailwindcss @tailwindcss/cli

Build Process

For Development (Local)

During development, use the watch command to automatically rebuild CSS when changes are made:

npx @tailwindcss/cli -i static/src/input.css -o static/css/output.css --watch

For Production (Deployment)

Before deploying to production, build the optimised version:

npm run build

Note: You only need to upload the output.css file to production. Other generated files like package.json do not need to be uploaded to your hosting/production site.

Package.json Configuration

Create a package.json file in your project root with the following content (update as needed for your project):

{
  "dependencies": {
    "@tailwindcss/cli": "^4.0.12",
    "tailwindcss": "^4.0.12"
  },
  "scripts": {
    "build": "tailwindcss -i static/src/input.css -o static/css/output.css",
    "watch": "tailwindcss -i static/src/input.css -o static/css/output.css --watch"
  },
  "keywords": [
    "django",
    "tailwindcss",
    "web development"
  ],
  "author": "YOUR NAME",
  "license": "ISC",
  "description": "A Django project using Tailwind CSS 4"
}

Note about package.json fields:

keywords: Only relevant if publishing to npm. Optional for private projects.
author: Documents who created the project. Helpful but not required.
license: Specifies sharing terms. Not necessary for non-distributed projects.
description: Summarises your project. Optional for private use.

Collecting Static Files

This step is crucial! After building your CSS, always run Django's collectstatic command:

python3 manage.py collectstatic

You always get asked if you are sure - to avoid that question (if you really are sure) add --noinput on the end.

Common Issue: Missing CSS

If your site appears unstyled (with no CSS applied), it's often because the collectstatic command wasn't run. This is a frequent oversight even for experienced developers.

Troubleshooting Tips

CSS not appearing? Check that you've run collectstatic.
Changes not reflecting? Ensure the watch command is running during development.
Deployment issues? Verify you've uploaded the built output.css file.
Browser caching problems? Try a hard refresh (Ctrl+F5 or Cmd+Shift+R).

You Are All Done! Congrats

Tailwind CSS 4 is now successfully installed in your Django project. This streamlined process eliminates the need for a configuration file, making it faster to implement than previous versions.

If you need help with Django MVP development or technical assistance setting up your project, I'm here to help! As a Tech VA specialising in MVP development and technical marketing systems, I can guide you through the entire process from concept to launch.

This guide was created by Diane Corriette
Need help with your MVP or technical marketing? Get in touch.

Installing Tailwind CSS 4 on Django