DEV Community

Nandan Ramdani
Nandan Ramdani

Posted on

Setup TailwindCSS v4 di Django

#python #django #programming #tailwindcss

TailwindCSS v4 menghadirkan cara baru yang lebih ringan dan cepat — tanpa file tailwind.config.js, tanpa plugin tambahan, cukup dengan satu baris @import "tailwindcss".
Pada tutorial ini, kita akan membangun blog sederhana Django dengan integrasi TailwindCSS v4.1, mulai dari membuat virtual environment hingga template tampil sempurna.

🧩 1. Buat Virtual Environment

Buka terminal, arahkan ke folder kerja kamu, lalu buat dan aktifkan virtual environment.

# buat environment
python -m venv env

# aktifkan
# Windows
env\Scripts\activate

# macOS / Linux
source env/bin/activate
Enter fullscreen mode Exit fullscreen mode

⚙️ 2. Instal Django 

pip install django
Enter fullscreen mode Exit fullscreen mode

Cek instalasi:

python -m django --version
Enter fullscreen mode Exit fullscreen mode

🏗️ 3. Buat Project dan App 

django-admin startproject blogsite
cd blogsite
python manage.py startapp blog
Enter fullscreen mode Exit fullscreen mode

📁 4. Struktur Folder Akhir

Struktur yang benar akan seperti ini:

blogsite/
 ├─ blog/                     # aplikasi utama
 │   ├─ templates/
 │   │   └─ blog/
 │   │       └─ index.html
 │   ├─ urls.py
 │   ├─ views.py
 │   └─ __init__.py
 ├─ static/                   # folder static global
 │   └─ css/
 │       └─ tailwind.css
 ├─ blogsite/                 # folder konfigurasi utama Django
 │   ├─ settings.py
 │   ├─ urls.py
 │   ├─ __init__.py
 │   └─ asgi.py / wsgi.py
 ├─ manage.py
 ├─ package.json
Enter fullscreen mode Exit fullscreen mode

⚙️ 5. Konfigurasi settings.py

Tambahkan blog ke INSTALLED_APPS dan atur konfigurasi static files dengan benar:

import os
from pathlib import Path

BASE_DIR = Path(__file__).resolve().parent.parent

INSTALLED_APPS = [
    "django.contrib.admin",
    "django.contrib.auth",
    "django.contrib.contenttypes",
    "django.contrib.sessions",
    "django.contrib.messages",
    "django.contrib.staticfiles",
    "blog",
]

STATIC_URL = '/static/'
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

MEDIA_URL = '/media/'
MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
Enter fullscreen mode Exit fullscreen mode

🌍 6. URL Routing di blogsite/urls.py

Kita sertakan URL dari app blog, serta tambahkan konfigurasi static() agar file CSS bisa dilayani selama development:

from django.contrib import admin
from django.urls import path, include
from django.conf import settings
from django.conf.urls.static import static

urlpatterns = [
    path('admin/', admin.site.urls),
    path('blog/', include('blog.urls')),
]

urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
Enter fullscreen mode Exit fullscreen mode

📜 7. Buat URL App Blog (blog/urls.py) 

from django.urls import path
from blog import views

urlpatterns = [
    path('', views.home, name='home'),
]
Enter fullscreen mode Exit fullscreen mode

🧠 8. View Blog (blog/views.py) 

from django.shortcuts import render

def home(request):
    posts = [
        {"title": "Kenalan dengan TailwindCSS v4", "excerpt": "Versi terbaru dengan pendekatan CSS-first yang super ringan."},
        {"title": "Integrasi Tailwind di Django", "excerpt": "Langkah demi langkah setup modern tanpa plugin tambahan."},
        {"title": "Membuat Blog Responsive", "excerpt": "Gunakan grid dan flex Tailwind untuk tampilan profesional."},
    ]
    return render(request, "blog/index.html", {"posts": posts})
Enter fullscreen mode Exit fullscreen mode

🎨 9. Template Blog (blog/templates/blog/index.html) 

{% load static %}
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Django Blog + Tailwind v4</title>
  <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body class="bg-gray-50 text-gray-900 min-h-screen flex flex-col items-center">

  <!-- Navbar -->
  <nav class="w-full bg-white shadow p-4 flex justify-between items-center">
    <h1 class="text-2xl font-bold text-blue-600">TailwindBlog</h1>
    <a href="#" class="text-sm text-gray-500 hover:text-blue-600 transition">Tentang</a>
  </nav>

  <!-- Hero -->
  <section class="mt-12 text-center max-w-2xl">
    <h2 class="text-4xl font-extrabold mb-3">Blog Django + TailwindCSS v4</h2>
    <p class="text-gray-600">Integrasi modern dan ringan tanpa konfigurasi berlebih.</p>
  </section>

  <!-- Posts -->
  <main class="mt-12 grid gap-6 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 px-4 max-w-6xl">
    {% for post in posts %}
      <article class="bg-white shadow rounded-2xl p-6 hover:shadow-lg transition">
        <h3 class="text-xl font-semibold mb-2 text-blue-700">{{ post.title }}</h3>
        <p class="text-gray-600 mb-4">{{ post.excerpt }}</p>
        <a href="#" class="inline-block text-blue-600 text-sm font-medium hover:underline">Baca Selengkapnya →</a>
      </article>
    {% endfor %}
  </main>

  <!-- Footer -->
  <footer class="mt-16 mb-6 text-gray-500 text-sm">
    © 2025 Tailwind Blog. Dibangun dengan Django & TailwindCSS v4.
  </footer>

</body>
</html>
Enter fullscreen mode Exit fullscreen mode

🧱 10. Instal dan Jalankan TailwindCSS v4

Gunakan pnpm agar lebih cepat:

npm install -g pnpm
pnpm init
pnpm add -D @tailwindcss/cli tailwindcss
Enter fullscreen mode Exit fullscreen mode

Tambahkan script build di package.json:

{
  "scripts": {
    "watch": "pnpm dlx @tailwindcss/cli -i static/css/tailwind.css -o static/css/style.css --watch"
  }
}
Enter fullscreen mode Exit fullscreen mode

🪶 11. Buat File Input Tailwind (static/css/tailwind.css) 

@import "tailwindcss";
Enter fullscreen mode Exit fullscreen mode

⚡ 12. Jalankan Tailwind Watcher 

pnpm watch
Enter fullscreen mode Exit fullscreen mode

Hasilnya:

≈ tailwindcss v4.1.14
[@tailwindcss/cli] (initial build)
↳ Build CSS
↳ Optimize CSS
↳ Write output
Enter fullscreen mode Exit fullscreen mode

File baru static/css/style.css akan muncul otomatis.

🚀 13. Jalankan Server Django 

python manage.py runserver
Enter fullscreen mode Exit fullscreen mode

Kunjungi:
👉 http://127.0.0.1:8000/blog/

Kamu akan melihat blog rapi, responsive, dan ringan — seluruhnya distyling oleh TailwindCSS v4.

🧪 14. Build CSS untuk Produksi 

pnpm dlx @tailwindcss/cli -i static/css/tailwind.css -o static/css/style.css --minify
Enter fullscreen mode Exit fullscreen mode

Tailwind akan otomatis menghapus class yang tidak digunakan (tree-shaking) dan meminimalkan ukuran file CSS.

✅ Kesimpulan

Langkah Deskripsi Status
Setup venv python -m venv env ✅
Instal Django pip install django ✅
Struktur proyek standar dengan static global ✅
Instal Tailwind v4 pnpm add -D @tailwindcss/cli ✅
Jalankan build CSS pnpm watch ✅
Tampilkan blog http://127.0.0.1:8000/blog/ ✅

TailwindCSS v4 membuat proses pengembangan antarmuka di Django jauh lebih efisien, tanpa konfigurasi panjang, tanpa dependensi tambahan.

Top comments (0)