Sedikit tentang tailwind css

 

TailwindCSS

Logo TailwindCSS

Bila framework pada umumnya yang kamu jumpai terdiri dari banyak pra-desain komponen, di TailwindCSS ini kamu tidak akan menemukan pra-desain komponen seperti button, card, alert, carousel atau yang lainnya. Karena TailwindCSS bukan merupakan sebuah UI kit, melainkan sebuah utility-first framework untuk membangun antarmuka kustom dengan cepat.

Sederhananya, di dalam TailwindCSS terdapat banyak class-class kecil yang merepresentasikan CSS declaration. Sehingga, ketika kamu ingin membuat sebuah komponen, maka kamu perlu menggunakan beberapa class-class kecil tersebut hingga tercipta komponen yang kamu maksud.

Misal, kamu ingin membuat sebuah komponen button. Pada Bootstrap framework atau framework lain yang memiliki pra-desain komponen, kurang lebih kamu melakukannya seperti ini:

<button class="btn">Button</button>atau<button class="button">Button</button>

Sedangkan, pada TailwindCSS kamu perlu melakukannya seperti ini:

<button class="bg-blue-500 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Class-class di atas mewakili property dan value sendiri.

• bg-blue-500 merepresentasikan property background-color: #4299e1;
• text-white merepresentasikan property color: #fff;
• font-bold merepresentasikan property font-weight: 700;
• py-2 maksudnya padding-y atau padding-vertical merepresentasikan property padding-top: 0.5rem; dan padding-bottom: 0.5rem;
• px-4 maksudnya padding-x atau padding-horizontal merepresentasikan property padding-left: 1rem; dan padding-right: 1rem;
• rounded merepresentasikan border-radius: .25rem;

Kelihatannya ribet, ya?

Tapi, dengan seperti ini, UI yang kamu buat dengan orang lain akan berbeda meski menggunakan framework yang sama. Berbeda halnya bila menggunakan UI kit, UI yang dibuat akan cenderung sama, karena di dalam UI kit sudah tersedia pra-desain komponen, meski style-nya dapat di-override, tetapi hasilnya mungkin tidak berbeda jauh.

TailwindCSS tidak dapat dibandingkan dengan framework UI kit — seperti Bootstrap, Bulma atau Spectre — karena pada dasarnya, mereka memiliki konsep yang berbeda.

Bila pada framework UI kit kamu perlu membuat beberapa custom class untuk mengkostumisasi pra-desain komponen yang digunakan, sedangkan di TailwindCSS kamu akan dapat mereduksi penggunaan custom class. Karena, untuk membuat komponen kamu perlu melakukannya dari awal, dengan cara menyusun utility class.

TailwindCSS bukan satu-satunya utility-first framework

TailwindCSS dirilis pertama kali pada tahun 2017, tepatnya tanggal 2 November. Oleh Adam Wathan. Sebelum itu, ada beberapa framework yang memiliki konsep yang serupa seperti TailwindCSS, diantaranya:

• Shed.CSS
• TACHYONS
• Beard
• TurretCSS
• etc

Framework-framework di atas lahir kurang-lebih 4–5 tahun kebelakang. Jadi, sebelum adanya TailwindCSS, konsep utility-first framework sudah pernah diterapkan. Dalam kata lain, TailwindCSS bukan satu-satunya utility-first framework.

Selain framework di atas, Bootstrap juga memiliki utility classes yang baru saja ditambahkan pada versi 4. Sebelumnya juga sudah ditambahkan, tapi, saat versi 3 diberi nama helper classes.

Meski belum lama, TailwindCSS begitu menarik perhatian, karena kurang dari 2 tahun sudah mendapat 10,000+ star di GitHub. Padahal TailwindCSS sendiri baru-baru ini menginjak versi 1.0.0-beta.4.

Meski begitu, kita tidak dapat menyimpulkan bahwa TailwindCSS lebih bagus dari utility-first framework yang lain, karena untuk menyimpulkan itu, kita perlu menguji beberapa framework tersebut. Belum tentu juga satu framework cocok untuk segala kasus.

Jadi, bila kamu mencari framework yang terdiri dari sekumpulan pra-desain komponen, mungkin, TailwindCSS tidak cocok untuk kamu. Tapi, bila kamu ingin membangun antarmuka yang memiliki identitas, mungkin TailwindCSS cocok untuk kamu.

Kamu tidak akan mengendarai mobil sport untuk off-roading

Dapat dikustomisasi

Tailwind juga sangat customizable. Kamu dapat mengubah warna bawaan, menambah breakpoint screen size, menambah font family dan menambah utility class yang lainnya. Kenapa bisa begitu customizable? Tailwind memiliki file config yang berujuan untuk menyimpan semua konfigurasi, di konfigurasi ini juga kamu dapat menentukan utility class mana saja yang ingin digunakan. Juga, lebih kerennya, kamu dapat mengatur prefix, sehingga dengan memberikan prefix dapat meminimalisir terjadinya konflik nama class.

Contoh file tailwind.config.js

module.exports = {
  important: true,
  theme: {
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      margin: {
        '96': '24rem',
        '128': '32rem',
      },
    }
  },
  variants: {
    opacity: ['responsive', 'hover']
  }
}

File config di atas adalah optional — tidak wajib adanya. TailwindCSS akan mencari file config di root folder project kamu. Jika tidak ada, maka akan menggunakan default config.

Betapa besarnya TailwindCSS

Tailwind memiliki ukuran berkas yang lumayan besar dibanding framework populer yang lain.

Hal yang wajar mengingat Tailwind terdiri dari sekumpulan utility classes. Tentu solusi yang memungkinkan adalah dengan menghapus utility class yang tidak kita gunakan. Tapi, bagaimana caranya? Untuk mengatasi masalah ini, kamu dapat menggunakan PurgeCSS. Ia merupakan sebuah tool yang akan membantu kamu dalam menghapus CSS yang tidak terpakai. Keren, kan?

Dengan seperti itu, ukuran file CSS kamu bisa saja hanya berukuran 13kb. Seperti yang dilakukan Firefox Send, mereka menggunakan TailwindCSS dan file CSS mereka hanya berukuran 13.1kb saja (setelah di-minify) dan berukuran 4.7kb (setelah di-gzip).

sumber : https://medium.com/@mhdnauvalazhar/