6 Alasan Penting Kenapa Kamu Harus Nyoba Mulai Menggunakan Tailwind CSS

Bagaimana Tailwind CSS Membantu Anda Membangun UI Lebih Cepat

Beberapa waktu lalu, ketika saya mulai menggunakan Tailwind CSS dalam proyek saya, saya menulis artikel yang menjelaskan apa itu Tailwind CSS dan perbedaannya. Anda dapat membaca posting itu di sini.

Kami belum banyak menulis dalam CSS sejak saat itu. Dalam posting ini, mari kita jelajahi beberapa alasan untuk menggunakan Tailwind di proyek Anda berikutnya. Sebelum memulai, Anda dapat membuka halaman ini untuk menyiapkan Tailwind di proyek Anda. keluar dari jalan. Ayo mulai.

Responsivitas Inline

Lewatlah sudah hari-hari ketika Anda harus menulis kueri media untuk membuat UI Anda responsif. Tailwind memungkinkan Anda membuat UI Anda responsif dengan atribut class itu sendiri. Mari kita lihat sebuah contoh. Kode di bawah ini mengubah ukuran teks berdasarkan ukuran layar.

<span class="lg:text-lg sm:text-sm xl:text-xl" >Hello, world!</span>

betapa kerennya itu? Saya membuat ukuran font elemen responsif dengan menambahkan tiga kelas CSS.

Kelas Pseudo Inline

Anda juga dapat menerapkan kelas Pseudo ke elemen dengan atribut kelas itu sendiri. Misalnya, saya ingin mengubah warna teks elemen saat melayang. Anda dapat mencapainya dengan melakukan:

<span class="text-4xl hover:text-blue-500" >Hello, world!</span>

Selain hover, Anda juga dapat menggunakan banyak kelas Pseudo lainnya seperti fokus, aktif, dll. Lihat di sini untuk detailnya.

Style Inline

Pseudoa style ditentukan pada elemen itu sendiri. Ini berarti bahwa saat Anda melihat sebuah elemen, Anda juga melihat style elemen tersebut. Tidak perlu membuka file lain. Lihat bagaimana elemen ditata, cari banyak file untuk menemukan di mana style tertentu diterapkan. Mari kita lihat contohnya:

<div class="rounded bg-gray-500 p-4" >I'm a card!</div>

Seperti yang Anda lihat, style untuk sebuah elemen ada pada elemen itu sendiri. Ini menghindari pencarian yang tidak perlu. Ini juga berarti Anda tidak perlu membuat file tambahan untuk penataan.

Component Reusable

Setelah menggunakan Tailwind untuk sementara waktu, Anda mungkin mendapati diri Anda mengulangi serangkaian kelas berulang-ulang. Dalam hal ini, Anda dapat menggunakan @apply untuk menggabungkannya untuk membuat satu kelas. Misalnya, saya melihat banyak pengulangan bg-abu-abu-300 p-4 bulat dalam style card. Untuk menghindarinya, buat kelas style khusus yang disebut card dan terapkan kelas-kelas ini. Metodenya adalah sebagai berikut. Tambahkan kode berikut ke file Tailwind CSS.

.card {
  @apply rounded bg-gray-300 p-4;
}

Sekarang, setiap kali saya menemukan diri saya menerapkan kelas yang sama. Anda dapat mendaftar dengan card kelas tunggal.

Jika Anda menggunakan library front-end seperti React atau Vue, Anda bisa membuat komponen bernama Card dan menerapkan style ini ke komponen itu untuk menghindari pengulangan.

Berikut ini contoh di React:

const Card: React.FC = ({children}) => {
  return <div className="rounded bg-gray-300 p-4" >{children}</div>
}

Anda dapat membaca lebih lanjut tentang mengekstrak komponen di sini.

Kustomisasi

Sejauh ini, kita telah melihat beberapa fitur hebat Tailwind. Dalam hal ini, Pseudoa warna, unit ukuran, kelas Pseudo, breakpoint responsif, dll. dapat disesuaikan dengan kebutuhan Anda. Tailwind hadir dengan pengaturan default. Bebas untuk menyesuaikan. Pelajari lebih lanjut tentang kustomisasi di sini.

Bersihkan Style Yang Tidak Diinginkan

Tailwind menghasilkan banyak kelas, sehingga Anda dapat yakin bahwa Anda tidak akan pernah menggunakan style ini dalam proyek Anda. Ini berarti bahwa Pseudoa kelas yang tidak digunakan juga dibundel dengan aplikasi Anda (yang menambahkan ukuran ekstra yang tidak perlu ke aplikasi Anda).

Untuk mengatasi masalah ini, hapus Pseudoa style yang tidak digunakan aplikasi Anda. Tailwind memiliki dukungan bawaan untuk pembersihan. Untuk membersihkan, Anda perlu menambahkan properti pembersihan ke konfigurasi Tailwind dan menyediakan file yang ingin Anda periksa. Misalnya, konfigurasi di bawah ini menelusuri Pseudoa HTML dan JSX untuk menemukan kelas yang digunakan.

...  
  purge: [
    './src/**/*.html',
    './src/**/*.jsx',
  ]
...

Kesimpulan

Terima kasih telah membaca. Saya harap saya membantu Anda mempelajari sesuatu yang baru hari ini. Contoh yang saya gunakan di sini sangat mendasar. Selalu lihat dokumentasi untuk bantuan.

Jika Anda menyukai posting ini, silakan tepuk tangan. Ikuti saya untuk lebih banyak posting seperti ini. Terima kasih telah membaca.

Share this post