This content originally appeared on DEV Community and was authored by Nandan Ramdani
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
βοΈ 2. Instal Django
pip install django
Cek instalasi:
python -m django --version
ποΈ 3. Buat Project dan App
django-admin startproject blogsite
cd blogsite
python manage.py startapp blog
π 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
βοΈ 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')
π 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)
π 7. Buat URL App Blog (blog/urls.py
)
from django.urls import path
from blog import views
urlpatterns = [
path('', views.home, name='home'),
]
π§ 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})
π¨ 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>
π§± 10. Instal dan Jalankan TailwindCSS v4
Gunakan pnpm agar lebih cepat:
npm install -g pnpm
pnpm init
pnpm add -D @tailwindcss/cli tailwindcss
Tambahkan script build di package.json
:
{
"scripts": {
"watch": "pnpm dlx @tailwindcss/cli -i static/css/tailwind.css -o static/css/style.css --watch"
}
}
πͺΆ 11. Buat File Input Tailwind (static/css/tailwind.css
)
@import "tailwindcss";
β‘ 12. Jalankan Tailwind Watcher
pnpm watch
Hasilnya:
β tailwindcss v4.1.14
[@tailwindcss/cli] (initial build)
β³ Build CSS
β³ Optimize CSS
β³ Write output
File baru static/css/style.css
akan muncul otomatis.
π 13. Jalankan Server Django
python manage.py runserver
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
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.
This content originally appeared on DEV Community and was authored by Nandan Ramdani

Nandan Ramdani | Sciencx (2025-10-17T03:43:55+00:00) Setup TailwindCSS v4 di Django. Retrieved from https://www.scien.cx/2025/10/17/setup-tailwindcss-v4-di-django/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.