Kuasai Tailwind CSS Dengan Mode Just-in-Time (JIT) Its

Diterbitkan: 2022-04-23

Kerangka kerja yang mengutamakan utilitas membantu kami mendesain halaman web lebih cepat, dan Tailwind CSS telah menjadi salah satu yang paling populer. Tapi menjadi populer tidak berarti kesempurnaan.

Ada beberapa tantangan dalam menggunakan Tailwind CSS, antara lain seperti memiliki stylesheet yang besar selama pengembangan dan harus mengaktifkan varian tambahan sendiri. Solusi untuk beberapa tantangan ini akan menjadi fokus umum kami dalam tutorial ini.

Dalam tutorial ini, kita akan berbicara tentang fitur yang sangat penting dari framework Tailwind CSS yang dikenal sebagai compiler just-in-time, lebih sering disebut sebagai compiler JIT.

Kami akan menyoroti fitur dan manfaat menggunakan kompiler Tailwind CSS JIT, cara mengaktifkannya, dan melihat beberapa contoh praktis.

Mari kita mulai.


Apa itu Kompilator Tailwind CSS JIT (Just-in-Time)?

Sebelum kita berbicara tentang compiler just-in-time, pertama-tama kita perlu berbicara tentang Tailwind CSS.

Tailwind CSS adalah framework CSS yang mengutamakan utilitas dengan serangkaian kelas CSS standar yang dapat diterapkan langsung di markup kami untuk mempercepat desain halaman web dan menjaga konsistensi dalam desain menggunakan sistem yang telah ditentukan sebelumnya.

Sebelum merilis kompiler JIT, ukuran file Tailwind CSS yang kami hasilkan setelah penginstalan biasanya hingga 3 MB. Namun, saat Anda terus mengonfigurasi dan menyesuaikan Tailwind, ukuran file terus bertambah besar — ​​dalam beberapa kasus, Anda bisa mendapatkan stylesheet sebesar 15 MB.

Meskipun semua gaya kami yang tidak digunakan akan dihapus selama produksi, ini tidak terjadi selama pengembangan. Dengan stylesheet sebesar 10 MB atau bahkan 20 MB, kita pasti akan mengalami masalah dan menyebabkan alat dev kita lag.

Dengan kompiler JIT, gaya dihasilkan saat kami membangun proyek kami. Ini berarti bahwa hanya kelas utilitas yang sedang Anda gunakan yang akan disertakan dalam ukuran lembar gaya Anda, tidak semua kelas utilitas yang disertakan dengan Tailwind CSS.

Manfaat Menggunakan Mode JIT Tailwind CSS

Pada bagian ini, kita akan membahas beberapa keuntungan menggunakan compiler JIT. Mereka termasuk:

  1. Stylesheet Anda sama dalam pengembangan dan produksi.
  2. Waktu pembuatan lebih cepat.
  3. Semua varian diaktifkan secara default.
  4. Kompilasi selama pengembangan jauh lebih cepat.
  5. Hanya gaya yang digunakan yang dihasilkan.
  6. Varian dapat ditumpuk.
  7. Peningkatan kinerja alat dev.

Kekurangan Menggunakan Tailwind CSS JIT Compiler

Batasan yang diketahui saat ini menurut dokumentasi GitHub compiler JIT adalah:

  • Opsi PurgeCSS lanjutan tidak didukung.
  • “Anda hanya dapat @apply kelas yang merupakan bagian dari inti, yang dihasilkan oleh plugin, atau ditentukan dalam aturan @layer . Anda tidak dapat @apply kelas CSS arbitrer yang tidak ditentukan dalam aturan @layer .”
  • Hanya ada dukungan untuk PostCSS 8.

Arahan @apply digunakan untuk menerapkan kelas utilitas di CSS khusus kami. Ini berguna saat kita mendefinisikan gaya CSS khusus tetapi lebih suka menggunakan beberapa kelas utilitas yang sudah ditentukan. Berikut adalah contoh cara kerja direktif @apply :

 .my-custom-css { @apply text-green-500; }

Dalam kode di atas, kami menambahkan warna hijau ke kelas CSS khusus. Warna hijau diterapkan menggunakan kelas utilitas Tailwind.

Pelajari tentang fitur yang sangat penting dari kerangka kerja Tailwind CSS, yang dikenal sebagai kompiler just-in-time, dalam panduan bermanfaat ini . Klik untuk Tweet

Cara Mengaktifkan Mode Tailwind CSS JIT

Perhatikan bahwa pada saat penulisan, Tailwind CSS versi 3 telah dirilis dan diaktifkan secara default saat Anda menginstal Tailwind CSS. Penjelasan di bawah untuk mengaktifkan compiler JIT tidak berlaku untuk versi 3 dan di atasnya. Setiap contoh lain yang tercakup dalam tutorial ini kompatibel dengan versi 3.

Cukup mudah untuk mengaktifkan kompiler JIT. Yang harus Anda lakukan adalah memperbarui file tailwind.config.js Anda dengan menambahkan properti mode yang seharusnya memiliki nilai 'jit'.

Berikut adalah tampilan tailwind.config.js Anda:

 module.exports = { mode: 'jit', purge: ['./public/*.html'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, }, variants: { extend: {}, }, plugins: [], }

Baris yang menjadi fokus adalah bagian di mana kami menambahkan:

 modus: 'jit'

Ini memungkinkan kita untuk menggunakan fitur-fitur kompiler JIT.

Setelah selesai, Anda dapat menjalankan perintah build dan melihat ukuran file Anda berkurang. Satu-satunya gaya yang akan Anda lihat adalah gaya yang Anda gunakan.

Dengan ukuran file yang diperkecil, stylesheet Anda selama pengembangan dan produksi akan sama. Kemungkinan keterlambatan alat pengembang juga akan dikurangi seminimal mungkin dan kode Anda dikompilasi lebih cepat saat Anda membangun proyek.

Selanjutnya, kita akan melihat beberapa aplikasi praktis dari compiler JIT.

Ini memungkinkan kita untuk menggunakan fitur-fitur kompiler JIT.

Setelah selesai, Anda dapat menjalankan perintah build dan melihat ukuran file Anda berkurang. Satu-satunya gaya yang akan Anda lihat adalah gaya yang Anda gunakan.

Dengan ukuran file yang diperkecil, stylesheet Anda selama pengembangan dan produksi akan sama. Kemungkinan keterlambatan alat pengembang juga akan dikurangi seminimal mungkin dan kode Anda dikompilasi lebih cepat saat Anda membangun proyek.

Selanjutnya, kita akan melihat beberapa aplikasi praktis dari compiler JIT.

Cara Menggunakan Kompilator JIT Tailwind CSS

Kita akan melihat beberapa contoh praktis dari kompiler JIT di bagian ini. Kami akan mulai dengan nilai arbitrer yang membantu kami memperluas sistem desain Tailwind.

Nilai Sewenang-wenang

Kasus mungkin muncul di mana kita lebih suka menggunakan nilai di luar sistem desain yang sudah dibuat. Nilai-nilai ini mungkin untuk warna kami, padding, margin, lebar, dan sebagainya.

Kompiler JIT memungkinkan kita untuk mencapai ini dengan menggunakan nilai-nilai arbitrer. Nilai arbitrer ini memungkinkan kita untuk keluar dari sistem desain dan menentukan nilai kustom kita sendiri. Anda akan melihat nilai ini dalam sintaks ini: [300px], [#FA8072].

Untuk melakukan ini, kita harus menyarangkan nilai dalam tanda kurung siku sehingga Tailwind tahu bahwa kita mendefinisikan nilai baru dalam sistem desain kita. Berikut contoh di bawah ini:

 <div class="mt-[300px] w-[500px]"> </div>

Pada contoh di atas, kami telah menggunakan dua nilai baru — 300px dan 500px — yang pada awalnya tidak ada dalam sistem desain. Sebelum kompiler JIT, Anda mungkin harus terlebih dahulu mendefinisikan nilai-nilai ini dalam file config.js untuk mencapai efek yang sama.

Contoh berikutnya menunjukkan bagaimana Anda dapat mendefinisikan nilai warna baru sebagai:

 <p class="bg-[#FA8072] ">This paragraph has a salmon background </p>

Di sini, kami telah membuat paragraf dengan warna latar belakang salmon. Anda tidak akan melihat kelas utilitas Tailwind yang mengatakan bg-salmon, tetapi kami dapat mendefinisikannya menggunakan nilai arbitrer.

Berjuang dengan downtime dan masalah WordPress? Kinsta adalah solusi hosting yang dirancang untuk menghemat waktu Anda! Lihat fitur kami

Varian yang Dapat Ditumpuk

Dengan kompiler JIT, semua varian diaktifkan secara default sehingga Anda dapat melupakan penggunaan file config.js untuk mengaktifkannya. Selain itu, varian dapat ditumpuk untuk mencapai hasil yang luar biasa.

Setiap varian dipisahkan oleh titik dua.

Berikut ini contohnya:

 <button class="sm:dark:disabled:focus:hover:bg-blue-300">

Kode di atas membuat tombol dengan properti fokus dinonaktifkan dan berubah menjadi biru saat diarahkan.

Pseudo-Elements

Kompiler JIT memungkinkan kita untuk menata elemen semu. Elemen semu digunakan untuk menata bagian tertentu dari sebuah elemen seperti menata huruf pertama elemen atau menyisipkan konten sebelum/setelah elemen.

Berikut adalah beberapa contoh:

 <p class="first-letter:bg-green-600"> First letter will have a green color </p>

Pada contoh di atas, huruf pertama “M” akan berwarna hijau.

 <p class="selection:bg-green-600"> Highlight this text to see a green color. </p>

Saat Anda menyorot teks dari kode di atas, itu akan memiliki warna latar belakang hijau.

Warna Perbatasan Per Sisi

Karena pertimbangan ukuran file, fitur ini pada awalnya ditinggalkan, tetapi berubah dengan dirilisnya kompiler JIT. Kita bisa memberi setiap perbatasan warna yang berbeda.

Mari kita lihat contohnya:

 <div class="border-2 border-t-red-400 border-r-blue-400 border-b-yellow-400 border-l-green-400"> </div>

Kami telah memberikan beberapa warna batas div kami — batas atas berwarna merah, batas kanan berwarna biru, batas bawah berwarna kuning, dan batas kiri berwarna hijau.

Mode JIT di Tailwind CSS Versi 3

Dari Tailwind CSS versi 3 dan yang lebih baru, compiler JIT diaktifkan secara default saat kita menginstal Tailwind CSS sehingga kita tidak perlu khawatir mengubah apa pun di file tailwind.config.js . Ini memungkinkan kami untuk mengakses semua fitur kompiler JIT saat bepergian. Yang harus kita lakukan adalah mengikuti petunjuk penginstalan untuk versi saat ini, dan kita dapat menjalankannya.

Apa itu kompiler JIT... dan bagaimana cara menyempurnakan situs Anda? Panduan ini memiliki jawabannya Klik untuk Tweet

Ringkasan

Kompiler JIT membawa framework Tailwind CSS ke level yang sama sekali baru. Rilisnya datang dengan fitur-fitur baru yang bermanfaat untuk membuat penggunaan kerangka kerja kami menjadi lebih baik. Kami tidak lagi perlu khawatir tentang ukuran file kami yang begitu berat sehingga membuat alat dev kami lag, karena hanya gaya yang benar-benar kami gunakan yang dihasilkan, semuanya saat bepergian.

Kami melihat beberapa contoh fitur baru seperti varian susun, elemen penataan menggunakan elemen semu, menggunakan nilai arbitrer untuk memperluas sistem desain kami dan fitur yang sangat dibutuhkan — kemampuan untuk menata setiap sisi batas elemen satu per satu. Kami masih jauh dari mencapai batasan kemampuan JIT Tailwind di sini, jadi langkah Anda selanjutnya adalah menguji diri Anda sendiri dan menjelajahi cara terbaik untuk memanfaatkan fitur JIT untuk pekerjaan Anda sendiri.

Hal keren apa yang telah Anda buat menggunakan kompiler JIT? Bagikan pemikiran Anda di komentar di bawah.