Cara Menggunakan Tailwind CSS untuk Mengembangkan Situs Web Keren dengan Cepat

Seiring kemajuan Anda sebagai pengembang, kemungkinan besar Anda akan menggunakan teknologi yang membantu Anda berbuat lebih banyak dengan menulis lebih sedikit kode. Kerangka kerja frontend yang solid seperti Tailwind CSS adalah salah satu cara untuk mencapainya.

Dalam artikel ini, kita akan belajar tentang Tailwind CSS — kerangka kerja CSS yang membantu dalam membangun dan mendesain halaman web. Kami akan mulai dengan menjelaskan cara memasang dan mengintegrasikan Tailwind CSS di proyek Anda, melihat beberapa aplikasi praktis, dan juga cara membuat gaya dan plugin khusus Anda.

Bersemangat? Mari kita mulai!

Apa itu Tailwind CSS?

Tailwind CSS adalah framework CSS (Cascading Style Sheets) yang mengutamakan utilitas dengan kelas yang telah ditentukan sebelumnya yang dapat Anda gunakan untuk membuat dan mendesain halaman web langsung di markup Anda. Ini memungkinkan Anda menulis CSS dalam HTML Anda dalam bentuk kelas yang telah ditentukan.

Kami akan mendefinisikan apa itu framework dan apa yang kami maksud dengan "CSS yang mengutamakan utilitas" untuk membantu Anda lebih memahami apa itu Tailwind CSS.

Apa itu Kerangka?

Sebagai istilah pemrograman umum, kerangka kerja adalah alat yang menyediakan komponen yang dapat digunakan kembali dan siap pakai yang dibangun dari fitur alat yang sudah ada. Tujuan keseluruhan dari pembuatan kerangka kerja adalah untuk meningkatkan kecepatan pengembangan dengan melakukan lebih sedikit pekerjaan.

Sekarang setelah kami menetapkan arti dari kerangka kerja, itu akan membantu Anda memahami bahwa Tailwind CSS adalah alat yang dibangun di atas fitur CSS. Semua fungsionalitas kerangka berasal dari gaya CSS yang disusun sebagai kelas.

Apa itu Kerangka CSS Utilitas-Pertama?

Ketika kami mengatakan CSS utilitas-pertama, kami merujuk ke kelas di markup kami (HTML) dengan fungsi yang telah ditentukan. Ini menyiratkan bahwa Anda hanya perlu menulis kelas dengan gaya yang telah ditentukan sebelumnya, dan gaya tersebut akan diterapkan ke elemen.

Dalam kasus di mana Anda bekerja dengan Vanilla CSS (CSS tanpa kerangka kerja atau pustaka apa pun), pertama-tama Anda akan memberi elemen Anda nama kelas dan kemudian melampirkan properti dan nilai yang berbeda ke kelas itu, yang pada gilirannya akan menerapkan gaya ke elemen Anda .

Kami akan menunjukkan sebuah contoh. Di sini, kita akan membuat tombol dengan sudut membulat dan teks yang mengatakan "Klik saya." Seperti inilah tampilan tombolnya:

Pertama-tama kita akan melakukannya menggunakan vanilla CSS, lalu menggunakan kelas utilitas yang tersedia di Tailwind CSS.

Dengan CSS Vanila

 <button class="btn">Click me</button>

Kami telah memberikan tag tombol kelas btn , yang akan ditata menggunakan stylesheet eksternal. Itu adalah:

 .btn { background-color: #000; color: #fff; padding: 8px; border: none; border-radius: 4px; }

Dengan Tailwind CSS

 <button class="bg-black p-2 rounded">Click me</button>

Ini semua diperlukan untuk mencapai efek yang sama seperti contoh dengan Vanilla CSS. Tidak ada lembar gaya eksternal tempat Anda harus menulis gaya yang dibuat karena setiap nama kelas yang kami gunakan sudah memiliki gaya yang telah ditentukan sebelumnya.

Prasyarat untuk Menggunakan Tailwind CSS

Sebelum menggunakan Tailwind CSS, ada beberapa prasyarat yang harus Anda pertimbangkan agar dapat menggunakan fitur framework tanpa kesulitan. Berikut adalah beberapa di antaranya:

• Pengetahuan yang baik tentang HTML, strukturnya, dan cara kerjanya
• Dasar yang kokoh dalam CSS — kueri media, flexbox, dan sistem grid

Dimana Tailwind CSS Dapat Digunakan?

Anda dapat menggunakan Tailwind CSS di proyek web frontend, termasuk kerangka kerja JavaScript seperti React.js, Next.js, Laravel, Vite, Gatsby, dll.

Pro dan Kontra Tailwind CSS

Berikut adalah beberapa keuntungan menggunakan Tailwind CSS:

1. Proses pengembangan lebih cepat
2. Membantu Anda berlatih CSS lebih banyak karena utilitasnya serupa
3. Semua utilitas dan komponen mudah disesuaikan
4. Ukuran file keseluruhan untuk produksi biasanya kecil
5. Mudah dipelajari jika Anda sudah tahu CSS
6. Dokumentasi yang bagus untuk belajar

Beberapa kelemahan menggunakan Tailwind CSS antara lain:

1. Markup Anda mungkin terlihat tidak teratur untuk proyek besar karena semua gaya ada di file HTML.
2. Tidak mudah untuk belajar jika Anda tidak memahami CSS dengan baik.
3. Anda dipaksa untuk membangun semuanya dari awal, termasuk elemen input Anda. Saat Anda menginstal Tailwind CSS, semua gaya CSS default akan dihapus.
4. Tailwind CSS bukanlah pilihan terbaik jika Anda ingin meminimalkan waktu yang dihabiskan untuk mengembangkan frontend situs web Anda dan terutama berfokus pada logika backend.

Kapan Menggunakan Tailwind CSS

Tailwind CSS paling baik digunakan untuk mempercepat proses pengembangan dengan menulis lebih sedikit kode. Muncul dengan sistem desain yang membantu menjaga konsistensi di berbagai persyaratan desain seperti padding, spasi, dan sebagainya; dengan ini, Anda tidak perlu khawatir tentang membuat sistem desain Anda.

Anda juga dapat menggunakan Tailwind CSS jika Anda ingin menggunakan kerangka kerja yang mudah dikonfigurasi karena tidak memaksa Anda untuk menggunakan komponen (bilah navigasi, tombol, formulir, dan sebagainya) dengan cara yang sama sepanjang waktu; Anda bisa memilih seperti apa tampilan komponen Anda. Tetapi Anda tidak boleh menggunakan Tailwind jika Anda belum mempelajari dan mempraktekkan CSS.

Persamaan dan Perbedaan Tailwind CSS dan Framework CSS Lainnya

Berikut adalah beberapa kesamaan:

1. Mereka membantu Anda menyelesaikan pekerjaan lebih cepat.
2. Mereka datang dengan kelas yang telah ditentukan.
3. Mereka dibangun di atas aturan CSS.
4. Keduanya mudah dipelajari dan digunakan dengan pengetahuan tentang CSS.

Sekarang mari kita lihat beberapa perbedaannya:

1. Tailwind berbeda dari kebanyakan framework karena Anda harus membuat komponen sendiri. Misalnya, Bootstrap memiliki komponen seperti bilah navigasi, tombol, dan sebagainya, tetapi dengan Tailwind, Anda harus membangun semua itu sendiri.
2. Beberapa kerangka kerja seperti Bootstrap tidak mudah dikustomisasi, jadi Anda terpaksa menggunakan pola desainnya. Di Tailwind, Anda mengontrol aliran segalanya.
3. Pengetahuan mendalam tentang CSS diperlukan untuk menggunakan Tailwind. Menulis nama kelas saja tidak cukup, karena Anda harus menggabungkannya seolah-olah Anda sedang menulis vanilla CSS untuk mendapatkan hasil yang sama. Yang perlu Anda ketahui di sebagian besar kerangka kerja lain adalah komponen apa yang akan dibangun saat Anda menggunakan nama kelas.

Cara Memulai Menggunakan Tailwind CSS

Sebelum menginstal Tailwind CSS dan mengintegrasikannya ke dalam proyek Anda, pastikan bahwa:

1. Anda telah menginstal Node.js di komputer Anda untuk menggunakan manajer paket Node (npm) di terminal.
2. Proyek Anda sudah siap dengan file yang Anda buat.

Seperti inilah struktur proyek kami saat ini:

 -Tailwind-tutorial -public -index.html -styles.css -src -styles.css

Selanjutnya, mulai terminal untuk proyek Anda dan jalankan perintah berikut:

 npm install -D tailwindcss

Perintah di atas akan menginstal framework Tailwind CSS sebagai dependensi. Selanjutnya, buat file tailwind.config.js Anda dengan menjalankan perintah di bawah ini:

 npm install -D tailwindcss

File tailwind.config.js akan kosong saat dibuat, jadi kami menambahkan beberapa baris kode:

 module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [], };

Jalur file yang disediakan dalam larik konten akan memungkinkan Tailwind untuk membersihkan/menghapus gaya yang tidak digunakan selama waktu pembuatan.

Hal berikutnya yang harus dilakukan adalah menambahkan arahan “@tailwind” ke file CSS Anda di folder src — di sinilah Tailwind menghasilkan semua gaya utilitas yang telah ditentukan sebelumnya untuk Anda:

 @tailwind base; @tailwind components; @tailwind utilities;

Hal terakhir yang harus dilakukan adalah memulai proses pembuatan dengan menjalankan perintah ini di terminal Anda:

 npx tailwindcss -i ./src/styles.css -o ./public/styles.css --watch

Dalam kode di atas, kami memberi tahu Tailwind bahwa file input kami adalah stylesheet di folder src dan gaya apa pun yang kami gunakan harus dibangun ke dalam file output di folder publik. --watch memungkinkan Tailwind untuk melihat perubahan file Anda untuk proses pembuatan otomatis; menghilangkannya berarti kita harus menjalankan skrip itu setiap kali kita ingin membangun kode kita dan melihat hasil yang diinginkan.

Menggunakan Tailwind CSS

Sekarang setelah kita menginstal dan menyiapkan Tailwind CSS untuk proyek kita, mari kita lihat beberapa contoh untuk memahami penerapannya sepenuhnya.

Contoh Kotak Fleksibel

Untuk menggunakan flex di Tailwind CSS, Anda perlu menambahkan kelas flex dan arah item flex:

 <div class="flex flex-row"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Menggunakan flex-row-reverse akan membalikkan urutan kemunculan tombol.

flex-col menumpuknya di atas satu sama lain. Berikut ini contohnya:

 <div class="flex flex-col"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> </div>

Sama seperti contoh sebelumnya, flex-col-reverse membalik urutannya.

Contoh Grid

Saat menentukan kolom dan baris dalam sistem kisi, kami mengambil pendekatan berbeda dengan memasukkan angka yang akan menentukan bagaimana elemen akan menempati ruang yang tersedia:

 <div class="grid grid-cols-3"> <button> Button 1 </button> <button> Button 2 </button> <button> Button 3 </button> <button> Button 4 </button> <button> Button 5 </button> <button> Button 6 </button> </div>

warna

Tailwind hadir dengan banyak warna standar. Setiap warna memiliki serangkaian variasi yang berbeda, dengan variasi paling ringan adalah 50 dan yang paling gelap adalah 900.

Berikut adalah gambar beberapa warna dan kode hex HTML mereka untuk menggambarkan ini

Kami akan memberikan contoh bagaimana Anda dapat melakukan ini dengan menggunakan warna merah di atas untuk memberikan elemen tombol warna latar belakang:

 <button class="bg-red-50">Click me</button> <button class="bg-red-100">Click me</button> <button class="bg-red-200">Click me</button> <button class="bg-red-300">Click me</button> <button class="bg-red-400">Click me</button> <button class="bg-red-500">Click me</button> <button class="bg-red-600">Click me</button> <button class="bg-red-700">Click me</button> <button class="bg-red-800">Click me</button> <button class="bg-red-900">Click me</button>

Sintaks ini sama untuk semua warna di Tailwind kecuali hitam dan putih, yang ditulis dengan cara yang sama tetapi tanpa menggunakan angka: bg-black dan bg-white .

Untuk menambahkan warna teks, Anda menggunakan kelas text-{color} :

 <p class="text-yellow-600">Hello World</p>

Lapisan

Tailwind sudah memiliki sistem desain yang akan membantu Anda menjaga skala yang konsisten di seluruh desain Anda. Yang harus Anda ketahui adalah sintaks untuk menerapkan setiap utilitas.

Berikut ini adalah utilitas untuk menambahkan padding ke elemen Anda:

• p menunjukkan padding di seluruh elemen.
• py menunjukkan padding padding-top dan padding-bottom.
• px menunjukkan padding-kiri dan padding-kanan.
• pt menunjukkan padding-top.
• pr menunjukkan padding-right.
• pb menunjukkan padding-bottom.
• pl menunjukkan padding-kiri

Untuk menerapkannya ke elemen Anda, Anda harus menggunakan nomor yang sesuai yang disediakan oleh Tailwind — sedikit mirip dengan nomor yang mewakili varian warna di bagian terakhir. Inilah yang kami maksud:

 <button class="p-0">Click me</button> <button class="pt-1">Click me</button> <button class="pr-2">Click me</button> <button class="pb-3">Click me</button> <button class="pl-4">Click me</button>

Batas

Utilitas yang telah ditentukan untuk padding dan margin sangat mirip. Anda harus mengganti p dengan m :

• m
• my
• mx
• mt
• mr
• mb
• ml

Cara Membuat Plugin CSS Tailwind

Meskipun Tailwind CSS memiliki banyak utilitas dan sistem desain yang telah dibuat untuk Anda, masih ada kemungkinan Anda memiliki fungsi tertentu yang ingin Anda tambahkan untuk memperluas kegunaan Tailwind. Tailwind CSS memungkinkan kita melakukan ini dengan membuat plugin.

Mari kita bersihkan tangan kita dengan membuat plugin yang menambahkan warna aqua dan utilitas putar yang memutar elemen 150 pada sumbu X. Kami akan membuat utilitas ini di file tailwind.config.js menggunakan sedikit JavaScript.

 const plugin = require("tailwindcss/plugin"); module.exports = { content: ["./src/**/*.{html,js}", "./public/*.html"], theme: { extend: {}, }, plugins: [ plugin(function ({ addUtilities }) { const myUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(myUtilities); }), ], };

Sekarang, mari kita pecahkan ini. Hal pertama yang kami lakukan adalah mengimpor fungsi plugin Tailwind:

 const plugin = require("tailwindcss/plugin");

Kemudian kami melanjutkan untuk membuat plugin kami di array plugins:

 plugins: [ plugin(function ({ addUtilities }) { const newUtilities = { ".bg-aqua": { background: "aqua" }, ".rotate-150deg": { transform: "rotateX(150deg)", }, }; addUtilities(newUtilities); }), ],

Anda mungkin harus menjalankan ulang skrip build setelah membuat plugin.

Sekarang plugin sudah siap, kita bisa mengujinya:

 <button class="bg-aqua rotate-150deg">Click me</button>

Jika Anda melakukan semuanya dengan benar, Anda harus memiliki tombol dengan warna aqua dengan teks yang diputar ke 150 pada sumbu X.

Ringkasan

Kerangka kerja adalah opsi yang sangat berharga untuk mempercepat alur kerja Anda. Mereka membantu Anda membangun halaman web yang bagus dan profesional sambil mempertahankan konsistensi dalam desain. Tailwind CSS menyediakan banyak kelas CSS utilitas-maju untuk membantu membawa desain dan pengembangan web Anda ke tingkat berikutnya.

Artikel ini mengajari kami apa itu Tailwind CSS dan apa yang membuatnya menjadi framework. Kami kemudian melihat proses instalasi dan melihat beberapa contoh yang menunjukkan bagaimana kami dapat membuat plugin khusus kami untuk memperluas fungsionalitas yang ada.

Jika Anda telah menindaklanjuti sampai ke titik ini, maka Anda sekarang memiliki pemahaman dasar namun kuat tentang cara kerja Tailwind. Namun, untuk menjadi lebih baik dalam menggunakan kerangka kerja utilitas-pertama, Anda harus terus berlatih dan meningkatkan pengetahuan Anda tentang CSS jika Anda belum memiliki dasar yang kuat.

Apakah Anda pernah menggunakan Tailwind CSS atau framework CSS lainnya? Bagi pengalaman anda di bagian komentar!