Perkembangan Tailwind CSS v4.0 Dibuka sebagai Open Source

• Oxide, engine baru berperforma tinggi, sedang dikembangkan untuk Tailwind CSS v4.0.
• Dirancang untuk menyederhanakan pengalaman pengembang dan memanfaatkan evolusi terbaru dari platform web.
• Awalnya direncanakan rilis sebagai versi v3.x, tetapi kemudian diputuskan untuk dirilis sebagai v4.0 sebagai framework generasi baru.
• Masih berada pada tahap awal dan masih banyak pekerjaan yang tersisa, tetapi versi alpha publik pertama sudah ditandai sehingga eksperimen bisa dimulai.

Engine baru, dibangun untuk kecepatan

• Engine baru ditulis ulang sepenuhnya dari nol, dan menghadirkan kecepatan lebih tinggi dengan kode yang lebih sedikit.
• Menawarkan kecepatan build hingga 10 kali lebih cepat; situs Tailwind CSS dapat dibangun dalam 105ms, dan kit UI Catalyst hanya dalam 55ms.
• Ukuran instalasi engine baru menjadi lebih kecil lebih dari 35%, meski mencakup paket native berat seperti Rust dan Lightning CSS.
• Menggunakan Rust untuk menangani bagian framework yang paling mahal secara komputasi, sambil mempertahankan inti dalam TypeScript agar tetap mudah diperluas.
• Engine baru hanya bergantung pada Lightning CSS.
• Mereka menulis parser CSS sendiri dan merancang struktur data yang memberikan parsing 2 kali lebih cepat dibanding PostCSS.

Toolchain terintegrasi

• Tailwind CSS v4 tidak lagi berupa plugin, melainkan alat all-in-one untuk memproses CSS.
• Pemrosesan @import, vendor prefixing, dukungan nesting, dan lainnya sudah встроено sehingga tidak memerlukan konfigurasi terpisah.
• Mengubah fitur CSS modern seperti warna oklch() dan rentang media query ke sintaks yang memberi dukungan browser lebih baik.
• Plugin PostCSS tetap disediakan, tetapi mereka juga sedang mengeksplorasi plugin bundler, dan merilis plugin Vite resmi bersama rilis alpha pertama.

Dirancang untuk web modern

• Tailwind CSS v4 bertujuan membangun framework yang akan terasa mutakhir untuk beberapa tahun ke depan.
• Menggunakan aturan @layer yang sesungguhnya untuk menyelesaikan masalah spesifisitas yang dulu pernah menjadi kendala.
• Menggunakan @property untuk mendefinisikan custom property internal secara jelas, dan memungkinkan efek seperti background gradient.
• Menggunakan color-mix agar modifikasi opacity variabel warna atau penyesuaian opacity currentColor menjadi lebih mudah.
• Mendukung container query langsung di inti, serta mendukung rentang container query melalui varian baru @min-* dan @max-*.

Varian yang dapat dikomposisikan

• Arsitektur baru memungkinkan varian yang bekerja pada selector berbeda untuk dikomposisikan bersama.
• Pada versi sebelumnya, varian seperti group-has-* harus didefinisikan secara eksplisit di framework, tetapi sekarang group-* dapat dikomposisikan bersama varian has-* yang sudah ada.

Deteksi konten tanpa konfigurasi

• Pada rilis alpha awal, path content tidak dapat dikonfigurasi, dan untuk sebagian besar proyek hal ini tidak perlu diatur ulang.
• Saat menggunakan plugin PostCSS atau CLI, Tailwind akan merayapi seluruh proyek untuk menemukan file template.
• Saat menggunakan plugin Vite, ia mengandalkan module graph untuk mengetahui secara tepat file yang benar-benar digunakan.

Konfigurasi yang mengutamakan CSS

• Salah satu tujuan utama Tailwind CSS v4.0 adalah membuat framework ini terasa seperti native CSS, bukan seperti library JavaScript.
• Setelah instalasi, ia ditambahkan ke proyek menggunakan pernyataan @import CSS biasa.
• Alih-alih mengatur semua kustomisasi dalam file konfigurasi JavaScript, kini digunakan variabel CSS.

Hal yang berubah

• Mereka tidak menganggap remeh perubahan yang bersifat breaking, tetapi di v4 ada beberapa hal yang ditangani secara berbeda.
• Utility yang tidak lagi didokumentasikan telah dihapus.
• Plugin PostCSS dan CLI disediakan sebagai paket terpisah.
• Warna border default dihapus.
• Secara default, utility ring kini menjadi ring 1px yang menggunakan currentColor.

Roadmap menuju v4.0

• Engine baru ditulis ulang sepenuhnya dari nol, dengan fokus penuh pada pengalaman pengembang yang menggunakan pendekatan konfigurasi baru.
• Kompatibilitas mundur dianggap sangat penting, dan menjadi pekerjaan utama menuju rilis v4.0 yang stabil.
• Termasuk dukungan file konfigurasi JavaScript, konfigurasi path konten eksplisit, dukungan dark mode lainnya, dukungan plugin dan utility kustom, konfigurasi prefix kelas, dukungan safelists dan blocklists, dukungan konfigurasi important, dukungan fungsi theme(), dukungan CLI standalone, dan lain-lain.

Mencoba versi alpha

• Beberapa rilis alpha sudah ditandai, dan eksperimen di proyek bisa dimulai hari ini juga.
• Jika menggunakan ekstensi Tailwind CSS IntelliSense, perlu beralih ke versi pre-release di halaman ekstensi VS Code.
• Jika menemukan masalah, mereka berharap pengguna memberi tahu melalui GitHub.

Menggunakan Vite

• Instal Tailwind CSS v4 alpha dan plugin Vite yang baru.
• Tambahkan plugin ke file vite.config.ts.
• Impor Tailwind di file CSS utama.

Menggunakan PostCSS

• Instal Tailwind CSS v4 alpha dan paket plugin PostCSS terpisah.
• Tambahkan plugin ke file postcss.config.js.
• Impor Tailwind di file CSS utama.

Menggunakan CLI

• Instal Tailwind CSS v4 alpha dan paket CLI terpisah.
• Impor Tailwind di file CSS utama.
• Kompilasikan CSS menggunakan alat CLI.

Opini GN⁺

• Pembukaan kode sumber Tailwind CSS v4.0 memberi komunitas pengembang kesempatan untuk lebih awal mencoba fitur baru dan berbagai peningkatannya. Ini berarti para pengembang dapat memberikan umpan balik terhadap framework tersebut dan berkontribusi pada rilis final yang lebih stabil.
• Peningkatan performa engine baru tampak memangkas waktu build secara signifikan, sehingga diperkirakan akan sangat berguna terutama pada proyek skala besar atau lingkungan yang menuntut siklus pengembangan cepat.
• Kombinasi Rust dan TypeScript mencerminkan pendekatan modern yang mengejar performa sekaligus ekstensibilitas. Bagian yang ditulis dengan Rust memaksimalkan performa, sementara TypeScript memudahkan pengembang untuk memperluas dan memeliharanya.
• Pendekatan konfigurasi baru yang menggunakan variabel CSS lebih ramah CSS dibanding pengaturan berbasis JavaScript sebelumnya, dan dapat mempermudah integrasi dengan design system.
• Perubahan-perubahan ini mungkin menuntut sebagian pekerjaan migrasi bagi pengguna lama, tetapi dalam jangka panjang diharapkan menghasilkan codebase yang lebih ringkas dan lebih mudah dipelihara.

[GN⁺]

Komentar Hacker News

• Tailwind CSS adalah hal terbaik kedua di frontend, dan hanya Vue 3 yang mengunggulinya.

  • Tidak perlu repot memberi nama kelas CSS, dan tidak ada masalah kode CSS duplikat atau kelas yang saling bentrok.
  • Semua kode ada di dalam satu file sehingga komponen bisa divisualisasikan hanya dengan melihat kodenya.
  • Saya tidak akan kembali ke SCSS, dan menurut saya kombinasi Vue 3, TailwindCSS, dan Vite adalah yang terbaik.

• Sebagai pengkritik keras Tailwind, semua pengumuman di bawah konfigurasi CSS-first sangat layak disambut.

  • Bisa memanfaatkan design token, reset, dan lain-lain dari Tailwind, sambil tetap bisa melakukan kustomisasi melalui CSS yang sebenarnya.
  • Ini menawarkan cara baru untuk menggunakan Tailwind secara 'ringan' tanpa membuang arsitektur modern CSS, cascade, bahkan shadow DOM pada web component.

• CTRL+u menunjukkan contoh sintaks yang bagus.

  • Misalnya, diperlukan satu baris kode yang intuitif untuk membuat kotak dengan sudut membulat serta bagian atas dan bawah.

• Mereka belum mengerjakan CLI mandiri, tetapi pasti akan menyelesaikannya sebelum rilis v4.0.

  • Melihat bagian lain dari pengumuman rilis, saya berasumsi ini akan dibangun dengan Rust.
  • Saya lebih suka tidak membundel Node, terutama jika harus bergantung pada alat pkg milik Vercel yang sekarang sudah ditinggalkan.

• Ada banyak peningkatan yang menjanjikan.

  • Saya paling bersemangat dengan kemampuan mengontrol tema melalui CSS alih-alih memperluasnya lewat JS.

• Saya berharap Tailwind mendukung attributify seperti unocss.

  • Itu jauh lebih mudah dibaca untuk layout yang kompleks.

• Saya bukan pengembang frontend, tetapi saya memelihara beberapa situs web dan semuanya menggunakan Tailwind.

  • Para maintainer Tailwind punya intuisi yang sangat baik dalam menentukan prioritas, dan memiliki selera desain yang hebat.
  • Tailwind memang sulit dipahami sebelum benar-benar digunakan, tetapi di setiap versi mereka menghadirkan produk yang makin matang.
  • Di versi ini, dari sisi kompatibilitas tidak banyak yang berubah, tetapi mungkin akan ada lebih banyak perubahan saat versi 4 diresmikan.
  • Prospek engine baru terlihat sangat keren, dan peningkatan kecepatan build selalu disambut baik.

• Saya penasaran apakah ada tutorial/panduan Tailwind yang bagus.

• Saya penasaran apakah ada yang menggunakan tailwindcss bersama htmx atau pendekatan hateoas lainnya.

  • Hypertext seharusnya tidak terkait dengan styling, tetapi sesuatu seperti tailwind bisa bertentangan dengan itu.
  • CSS dan hateoas sangat cocok karena markup dan styling dipisahkan, tetapi saya penasaran bagaimana penerapannya dengan kasus seperti tailwindcss.

• Saya ingin memakainya di proyek demo, tetapi import from "node:@tailwindcss/postcss@latest" memunculkan error terkait field exports di package.json.

  • Meski begitu, di postingan blog disebutkan bahwa postcss-import tidak perlu digunakan, tetapi tetap memasukkannya sebagai dependensi.