Beri Style CSS Pada HTML Tanpa Menulis Kode CSS? Bisa! Dengan Tailwind

Pertama kali www sekaligus bahasa HTML ditemukan di tahun 1991 oleh seorang ilmuwan, ahli fisika bernama Tim Berners Lee, yang awalnya di buat untuk membagi dokumen para ilmuwan CERN. (dikutip dari id.wikipedia). Secara otomatis juga ditemukan browser pertama dunia, dan juga situs web pertama dunia. Sejak saat itulah www menjadi standar protokol Internet yang dibangun kontennya menggunakan HTML. HTML kala itu masih sangat sederhana sekali, namun pengembangan demi pengembangan terus dilakukan. Tampilan website pun masih mengikuti tampilan HTML yang serba terbatas, hingga di tahun 1996. HTML semakin diperbaiki dari tampilannya, ditambahkan gaya atau style CSS. Namun kala itu CSS pun hanya sekedar pelengkap. Keutuhan website masih dibuat menggunakan metode table html. Teknik membuat layout website yang lawas sekali kala itu. Tentunya source code html menjadi bengkak. Hingga di tahun 2003 sudah dikenal teknik table less, seorang web designer menggunakan div untuk membuat keseluruhan layout website. Yang sampai saat ini menjadi tulang punggung frontend / html framework seperti bootstrap, dan teman-temannya.

Alasan menggunakan bootstrap dan teman-temannya itu biasanya untuk mendapatkan tampilan website yang kekinian, responsive website layout. Kemudahan pembuatan layout dan berbagai kelebihan lainnya. Namun bagi sebagian kalangan, tentunya web designer, maupun web developer, yang banyak menggunakan html dan css untuk pekerjaannya sehari-harinya. Kadang kesulitan ketika harus berpindah tempat dalam memberikan style-style css. Harus berpindah tempat, kadang di layar kerja css, kadang di layar kerja html. Bisa dibilang merepotkan. 

Tailwind Solusinya 

Anda bisa menggunakan tailwind sebagai solusinya. Sekilas terlihat seperti bootstrap dari cara pemakaiannya, tapi tailwind dibuat untuk peruntukan yang lain. Dalam website officialnya pun tertera "Tailwind is different from frameworks like Bootstrap, Foundation, or Bulma in that it's not a UI kit. It doesn't have a default theme, and there are no built-in UI components."

Tailwind lebih kepada meng-html-kan CSS, Anda tidak perlu menulis kode CSS untuk menghasilkan CSS, karena tailwind yang mengerjakan dibaliknya. Operasi-operasi yang lumrah di temui dalam css seperti background, color, border, margin, padding, visibility, display, container, font dan lain sebagainya bisa Anda kerjakan di dalam layar kerja html.

Lalu apa bedanya dengan inline style?

Wah jelas beda sekali dunks, karena apabila Anda mengerjakan css secara inline jelas akan banyak kode css yang ditulis. Tailwind mengadopsi cara kerja jquery yang write less do more.

Sebagai contohnya adalah : 

See the Pen Menggunakan Tailwind by Ilmuwebsite (@ilmuwebsite) on CodePen.

 Anda bisa klik tombol result, jelas-jelas tidak ada kode CSS yang ditulis bukan? Semuanya dilakukan di sisi HTML. Untuk lebih jelasnya, dan lebih lengkap mengenai cara penggunaan tailwind silahkan Anda langsung saja mengunjungi web officialnya https://tailwindcss.com/docs/what-is-tailwind

Selamat bereksperimen