Tailwind CSS v4.0 dirilis

• Tailwind CSS v4.0 dirilis

  • Versi baru yang mengoptimalkan performa dan fleksibilitas, dengan memanfaatkan perkembangan terbaru platform web semaksimal mungkin
  • Dengan mesin baru berperforma tinggi, kecepatan build penuh menjadi hingga 5 kali lebih cepat, dan build inkremental menjadi lebih dari 100 kali lebih cepat
  • Dirancang untuk web modern dengan memanfaatkan fitur CSS terbaru

• Mesin baru berperforma tinggi

  • Tailwind CSS v4.0 merupakan penulisan ulang total framework ini, dengan arsitektur yang dioptimalkan untuk memaksimalkan kecepatan
  • Build inkremental menjadi lebih dari 100 kali lebih cepat dan selesai dalam hitungan mikrodetik

• Dirancang untuk web modern

  • Memanfaatkan fitur CSS terbaru seperti native cascade layers, registered custom properties, dan color-mix()
  • Menyederhanakan dukungan RTL dengan menggunakan logical properties dan mengurangi ukuran CSS yang dihasilkan

• Instalasi yang disederhanakan

  • Proses instalasi disederhanakan sehingga dependensi berkurang, dan cukup menambahkan satu baris kode ke file CSS
  • Menyediakan aturan @import secara bawaan tanpa plugin eksternal

• Plugin Vite

  • Pengguna Vite dapat mengintegrasikan Tailwind dengan menggunakan @tailwindcss/vite
  • Penggunaan plugin Vite semakin meningkatkan performa

• Deteksi konten otomatis

  • File template dideteksi secara otomatis sehingga tidak memerlukan konfigurasi
  • Item dalam file .gitignore diabaikan secara otomatis untuk mencegah pemindaian yang tidak perlu

• Dukungan import bawaan

  • Dengan @import, file CSS lain dapat diimpor secara inline
  • Sistem import yang dioptimalkan untuk Tailwind CSS semakin meningkatkan performa

• Konfigurasi yang mengutamakan CSS

  • Proyek dapat dikonfigurasi di CSS alih-alih JavaScript
  • Kustomisasi dapat dilakukan langsung di file CSS tanpa file tailwind.config.js

• Variabel tema CSS

  • Design token disediakan sebagai variabel CSS sehingga mudah dirujuk saat runtime

• Nilai utilitas dan varian dinamis

  • Berbagai utilitas dan varian disederhanakan agar dapat menerima nilai arbitrer
  • Ukuran grid atau atribut data kustom dapat diatur dengan mudah

• Palet warna P3 yang dimodernisasi

  • Palet warna default ditingkatkan dari rgb ke oklch untuk menghadirkan warna yang lebih hidup

• Container query

  • Menyediakan API bawaan untuk menata elemen berdasarkan ukuran container

• Utilitas transformasi 3D baru

  • Menambahkan API untuk mentransformasikan elemen di ruang 3D

• API gradasi yang diperluas

  • Menambahkan utilitas untuk membuat gradasi linear, kerucut, dan radial

• Dukungan @starting-style

  • Menambahkan fitur untuk mentransisikan properti saat elemen pertama kali ditampilkan tanpa JavaScript

• Varian not-*

  • Menambahkan dukungan untuk pseudo-class CSS :not()

• Utilitas dan varian baru tambahan

  • Menambahkan beragam utilitas dan varian baru seperti inset-shadow-*, field-sizing, dan color-scheme

Tailwind CSS v4.0 adalah versi terbaru yang memaksimalkan performa dan fleksibilitas, serta menghadirkan berbagai fitur baru dan peningkatan.

[GN⁺]

Opini Hacker News

• Menilai perkembangan Tailwind v4 secara positif; dukungan untuk variabel CSS dan konfigurasi khusus CSS menjadi keunggulan besar. Tailwind kini dianggap benar-benar menjalankan perannya dengan baik sebagai utility

• CSS kini lebih ramah pengguna dibanding masa lalu, dan menggunakan properti style langsung di HTML bisa jadi lebih sederhana. Namun, sebagian orang tetap ingin menghindari atribut style

• Hal yang disukai dari Tailwind adalah style bisa dibaca di satu tempat. Nama class memang panjang, tetapi tetap berguna karena memudahkan modifikasi style

• Saat pertama kali mencoba Tailwind, harus mempelajari ulang CSS terasa membebani. Namun, kemudian dipahami bahwa ini berguna untuk kerja tim dan skalabilitas. Meski begitu, stylesheet dasar tetap lebih disukai

• Dalam proyek yang memakai Tailwind, pengalaman terasa intuitif dan dokumentasinya bagus. Tidak perlu memikirkan nama style, sehingga membantu menghemat waktu

• Pembaruan terbaru Tailwind mengurangi waktu build dan menghilangkan kebutuhan konfigurasi JS. CSS kini sudah bisa menangani sebagian besar pekerjaan

• Pernah mencoba menggunakan Tailwind, tetapi hasilnya tidak sebaik Bootstrap. Masih mencari cara mendapatkan hasil yang layak tanpa harus menjadi desainer

• Desain Tailwind yang rapi tetapi generik sudah tersebar luas. Ini menunjukkan kelebihan dan keterbatasan style inline ala Tailwind

• Pembaruan ke Tailwind v4 berdampak pada aplikasi yang sudah ada. Karena masalah kompatibilitas, ada situasi yang mengharuskan tetap memakai v3 atau memodifikasi skrip build