Basic concepts of Tailwind CSS

Basic concepts of Tailwind CSS – hi bret kali ini saya akan share terkait konsep dasar dari tailwind css, cara menggunakan utility classes dan cara membuat costum class menggunakan tailwind css.

1. Konsep Dasar dari Tailwind CSS

Basic concepts of Tailwind CSS adalah library CSS ‘utilitas’ yang di rancang untuk membantu developer membuat desain responsif cepat . Tailwind menyediakan utility class yang dapat di pakai untuk merubah tampilan visual sebuah komponen. Utility class ini menyediakan beberapa pilihan opsi yang dapat di rubah, misalnya dari warna, tinggi, lebar, margin & padding. Dengan menggunakan konsep utility class, developer dapat dengan mudah & cepat merubah tampilan komponen tanpa harus menulis CSS baru lagi.

Tailwind sendiri menyediakan plugin untuk membuat beberapa komponen yang dapat di pakai secara global, misalnya tombol, form, dan kotak. Plugin ini sangat keren sekali karena membantu mengurangi waktu yang di perlukan untuk membuat komponen khusus yang memiliki tampilan yang sama. Selain itu, plugin ini juga memungkinkan pengembang untuk mengkonfigurasi beberapa aspek desain komponen, seperti warna, tinggi, lebar, dan lainnya. juga memungkinkan pengembang untuk menambahkan custom CSS, sehingga mereka dapat menyesuaikan desain mereka dengan lebih lanjut. Dengan menambahkan custom CSS, pengembang dapat dengan gampangnya membuat desain web yang unik. Tailwind juga dapat di pakai untuk membangun aplikasi mobile, menggunakan konsep yang sama seperti yang dipakai di web. Dengan begitu, Tailwind CSS menyediakan konsep dasar yang fleksibel dan mudah di pakai.

2. Cara menggunakan utility classes

Utility classes adalah salah satu konsep terpenting dalam web desain. Utility classes memungkinkan kalian untuk membangun desain yang konsisten dengan menggunakan kode CSS yang lebih ringkas. Utility classes dapat membantu kalian menyederhanakan desain kalian dan membuatnya lebih mudah untuk mengedit dan mengelola.

Sebelum memulai kalian harus memahami dasar-dasar dari utility classes. Utility classes biasanya di pakai untuk menambahkan gaya tertentu ke blok HTML atau element. Mereka di dasarkan pada nama yang di berikan kepada class CSS, dan dapat mengambil bentuk seperti margin-bottom-small atau text-align-right. Ini memungkinkan kalian untuk menggunakan class dengan lebih gampang, dan membuat desain konsisten di seluruh situs kalian.

Utility classes memiliki manfaat lain. seperti mereka dapat membantu kalian mengurangi waktu yang di butuhkan untuk menulis code. Dengan menggunakan utility classes, kalian dapat mengatur gaya dan layout dengan cepat. kalian juga dapat menyimpan utility classes di file CSS yang berbeda dan menggunakannya di seluruh situ. Dengan begitu, kalian dapat memastikan bahwa gaya kalian akan konsisten di seluruh situs.

Jadi, utility classes adalah alat yang berguna yang dapat membantu kalian menyederhanakan desain situs website. Dengan menggunakan utility classes, kalian dapat menghemat waktu dan membuat desain yang lebih konsisten.

3. Cara Membuat Custom Class menggunakan Tailwind CSS

Framework CSS Tailwind memiliki keunggulan dalam membuat custom class. Tidak seperti framework CSS lainnya, Tailwind CSS dapat dikonfigurasi dengan mudah untuk membuat class custom sesuai kebutuhan kita. Beberapa fitur yang disediakan oleh Tailwind CSS adalah variabel warna, responsif design, dan kemampuan untuk membuat class custom. Hal ini membuat Tailwind CSS mudah dipakai untuk membuat custom class yang sesuai dengan desain website.

Membuat custom class dengan Tailwind CSS adalah cukup mudah. Pertama, kalian harus menetapkan variabel warna yang akan kalian pakai. Variabel warna ini akan digunakan untuk mengubah warna font, background, dan banyak lagi. Kemudian, kalian harus membuat class custom. kalian dapat membuat class custom dengan menambahkan prefiks, seperti “h-1” atau “bg-red-500”. Setelah menambahkan prefiks, kalian dapat menentukan nilai properti yang kalian perlukan. Contohnya, kalian bisa menentukan ukuran font tertentu untuk class custom tersebut dengan menambahkan “font-size-1”.

Contoh :

Menggunakan fitur Customizing Your Configuration. Berikut adalah contoh dalam membuat custom class dengan warna:

1. Buka file tailwind.config.js dan tambahkan properti colors pada objek theme seperti berikut:

module.exports = {
  theme: {
    extend: {
      colors: {
        primary: '#336699',
        secondary: '#CCCCCC',
      },
    },
  },
  variants: {},
  plugins: [],
}

Pada konfigurasi di atas, kita menambahkan dua warna baru yaitu primary dan secondary.

2. Setelah itu, kita bisa menggunakan custom class tersebut pada HTML atau template yang kita buat, seperti contoh berikut:

<div class="bg-primary text-secondary">Hello, world!</div>

Pada contoh di atas, kita menggunakan class bg-primary untuk memberikan warna latar belakang, dan text-secondary untuk memberikan warna teks.

Setelah membuat class custom, kalian dapat menggunakannya di mana saja dalam kode HTML. kalian dapat menggunakan class custom yang di buat untuk menyesuaikan desain website dengan mudah. Dengan Tailwind CSS, kalian dapat membuat class custom yang bisa di pakai di berbagai bagian dari website kalian. Fitur ini membuat Tailwind CSS sebagai salah satu framework CSS yang paling mudah digunakan untuk membuat custom class.

Demikian artikel tentang Basic concepts of Tailwind CSS semoga bermanfaat 🙂