tailwind CSS v4.0: game changer sempurna untuk pengembangan web modern [Artikel terjemahan]

• Fitur paling utama di v4.0 adalah peningkatan performa: build penuh hingga 5x, build inkremental lebih dari 100x lebih cepat
• Pergeseran paradigma dengan konfigurasi yang mengutamakan CSS: konfigurasi langsung di CSS alih-alih tailwind.config.js
• Mengontrol prioritas style dengan @layer
• Dapat mendefinisikan properti kustom dengan aturan @property
• Mengatur transparansi semua nilai warna, termasuk variabel CSS dan currentColor, dengan fungsi Color-Mix()
• Kini bisa menangani sekaligus dengan properti logis seperti margin-inline alih-alih margin-left dan margin-right, sehingga dukungan RTL menjadi jauh lebih sederhana
• Proses instalasi disederhanakan: npm i tailwindcss @tailwindcss/postcss export default { plugins: ["@tailwindcss/postcss"],}; @import "tailwindcss"; dan selesai
• Deteksi konten otomatis: kini otomatis mengabaikan .gitignore serta file biner seperti gambar/video, lalu memindai file terkait secara otomatis. Mendukung @source untuk pengecualian
• Dukungan prioritas untuk Vite Plugin
• Dengan pembuatan utilitas dinamis, nilai yang tidak ada di konfigurasi sebelumnya bisa langsung digunakan
• Sistem warna yang berevolusi: seluruh palet warna bawaan ditingkatkan dari RGB ke OKLCH
• Container Queries kini tertanam di framework
• Dukungan 3D Transforms dan tambahan gradien yang lebih baik
• Menyertakan Variants dan Utilities baru: not-*, starting, inert, nth-*, variant descendant, serta utility field-sizing, color-scheme, inset-shadow-*
• Migrasi lebih mudah dari perkiraan: sebagian besar perubahan dapat di-upgrade secara otomatis
• Gambaran besar yang dilukis tailwind: melampaui sekadar pembaruan framework, ini adalah tantangan berani terhadap masa depan CSS
• Apakah wajib upgrade?: untuk proyek baru, pilih v4.0. Untuk proyek lama, upgrade cukup mudah jika layanan menargetkan browser modern
• Kesimpulan: tailwind CSS v4.0 adalah bukan sekadar evolusi, melainkan revolusi

[labeldock]

Setelah menerapkan dan menggunakannya selama 1 tahun
Apakah akan dipakai untuk proyek berikutnya? YES
Apakah ini game changer untuk pengembangan web? NO

Istilah game changer terasa berlebihan, jadi saya jadi ikut berkomentar.
Saya rasa sulit untuk menyimpulkannya sebagai gaya progresif yang harus dituju ke depannya.

Tailwind punya kelebihan untuk copy-paste template, pembuatan mudah lewat AI, dan penyesuaian style sederhana, tetapi

Tag yang sebenarnya mudah dibaca pun bisa jadi terobfuskasi, dan juga sulit untuk mengikuti dengan presisi desain yang dibuat desainer. Saya juga berpikir kalau variabel CSS diatur dengan baik, tingkat kesulitannya tidak akan jauh berbeda dari inline style.

[bluekai17]

Tolong dukung rn..

[iolothebard]

Jangan melangkah terlalu jauh… bisa-bisa semuanya tertelan…

[ng0301]

Untuk sekarang sepertinya saya akan pakai 3.x dulu, lalu migrasi kalau benar-benar jadi arus utama.

[savvykang]

https://tailwindcss.com/docs/upgrade-guide

• shadow-sm -> shadow-xs
• shadow -> shadow-sm

Sulit diprediksi kompatibilitas apa lagi yang akan dirusak di versi berikutnya.

[cocofather]

Terus.bermunculan.teknologi.web.
Teknologi.yang.sudah.ada.pun.sebenarnya.sudah.cukup.
Hanya.dengan.C.assembly.HTML.JavaScript.saja.semua.bisa.dilakukan.

[bokjjang]

Masih ada yang belum pakai "function" di Excel?
Dengan kalkulator pun sebenarnya semua bisa dilakukan.

Tapi, kenapa pakai titik alih-alih spasi?

[mse9000]

Ini bagian dari gaya bahasa boomer. Sepertinya ini parodi kebiasaan orang tua yang sering mengetik titik alih-alih spasi..

[codemasterkimc]

Pak Kim. Ada satu hal yang berani ingin saya sarankan. Bukan hal lain, jangan terlalu sering memakai fungsi Excel.. Kalau ada kemudahan, risikonya juga meningkat. Untuk menangkap sapi ada bilah yang sepadan, tapi untuk menangkap ayam apakah perlu pisau? Yang sederhana bisa jadi jawaban yang benar.

[swooooooo]

Wkwkwkwk, lucu banget

[illiil1lii]

Proyek yang sudah ada bisa dengan mudah di-upgrade jika layanannya menargetkan browser terbaru.

😅

[ahwjdekf]

Katanya penyederhanaan dan peningkatan, tapi pada akhirnya cuma berarti belajar hal lain lagi. Itu saja.