Setup TailwindCSS v4 di Django

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 Tailw…


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


Print Share Comment Cite Upload Translate Updates
APA

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/

MLA
" » Setup TailwindCSS v4 di Django." Nandan Ramdani | Sciencx - Friday October 17, 2025, https://www.scien.cx/2025/10/17/setup-tailwindcss-v4-di-django/
HARVARD
Nandan Ramdani | Sciencx Friday October 17, 2025 » Setup TailwindCSS v4 di Django., viewed ,<https://www.scien.cx/2025/10/17/setup-tailwindcss-v4-di-django/>
VANCOUVER
Nandan Ramdani | Sciencx - » Setup TailwindCSS v4 di Django. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2025/10/17/setup-tailwindcss-v4-di-django/
CHICAGO
" » Setup TailwindCSS v4 di Django." Nandan Ramdani | Sciencx - Accessed . https://www.scien.cx/2025/10/17/setup-tailwindcss-v4-di-django/
IEEE
" » Setup TailwindCSS v4 di Django." Nandan Ramdani | Sciencx [Online]. Available: https://www.scien.cx/2025/10/17/setup-tailwindcss-v4-di-django/. [Accessed: ]
rf:citation
» Setup TailwindCSS v4 di Django | Nandan Ramdani | Sciencx | 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.

You must be logged in to translate posts. Please log in or register.