Tailwind CSS Dasar

oke bagi kalian yang belum familiar dengan tailwind-css mungkin gak tau atau pasti mikir nya ini adalah framework kaya bootstrap tapi sayang nya bukan kawan, karena tailwind-css ini gak seperti yang kamu pikirkan singkat nya tailwind-css ini adalah pengganti vannila css yang biasanya kita gunakan dan ditulis langsung pada sebuah elemen yang menggunakan selector class yang biasa nya kitagunakan untuk memanggil komponen css.

meski kedengaran nya rumit tapi setelah saya pelajari tools ini cukup mudah digunakan tidak hanya memperbagus desain kita yang sudah ada tapi kita juga bisa menggunakan tailwind-css framework juga nah baru tahu kan ada framework ky bootstrap untuk tailwind css untuk sekedar informasi kalian bisa kunjungi https://daisyui.com/ atau https://flowbite.com/ untuk menggunakan komponen layak nya kita menggunakan bootstrap pada tailwind.

Menggunakan Tailwind-CSS

ada beberapa cara untuk menggunakan tailwind tapi disini kita akan menggunakan dari yang termudah dulu baru yang susah nya.

Cara Mudah

cara ini hanya digunakan untuk misalkan kalian gak mau ribet dan memang hanya sedang coba-coba saja menggunakan tailwind.

ketikan baris kode ini kalian sudah bisa langsung menggunakan tailwind-css pada bagian sebelum </head> untuk menaruh nya.

Cara Komplit

ini adalah cara yang digunakan jika kalian ingin membuat suatu project. karena untuk menggunakan semua utility pada tailwind sangat dianjurkan menggunakan cara prosedural ini.
pada terminal git bash ketikan :

npm install -D tailwindcss

npx tailwindcss init

lalu buat nama file tailwind.config.js lalu masukan kode dibawah ini:

/** @type {import('tailwindcss').Config} */

module.exports = {

content: ["./index.html"],

theme: {

extend: {},

plugins: [],

}

buat file input.css lalu ketikan kode berikut:

@tailwind base;

@tailwind components;

@tailwind utilities;

langkah terakhir kita jalankan tailwind nya menggunakan terminal git ketikan kode:

npx tailwindcss -i ./input.css -o ./output.css --watch

file output.css akan terbuat otomatis dan siap digunakan lalu ketikan kode berikut sebelum </head> untuk menaruh baris kode nya.

selesai dan tailwind siap untuk digunakan.

Tailwind Components

pada tailwind ktia juga bisa menggunakan komponen baik berbayar menggunakan components dari tailwind nya sendiri ataupun menggunakan comoponent dari pihak lain yang opensource yang gratis. berikut ini adalah components tailwind yang bisa kamu coba dan cara memakai nya pun mudah untuk dimengerti.

daisy ui

framwork component tailwind yang satu ini gak kalah bagus karena meyediakan semua nya bahkan untuk componen pergantian tema sangat lengkap dan mudah digunakan dan bukan main bagus nya pengalaman saya sendiri dalam membuat project menggunakan daisy ui sanagat puas karena menghasilkan tampilan yang moderen dan enak untuk dipandang.

flowbite

dengan komunitas yang banyak dan component simple serta komplit untuk digunakan flowbite juga menjadi salah satu favorit saya dalam mendesain font-end pada website memiliki konfigurasi serta fittur yang sangat lengkap dan merumakan komunitas terbesar pada penggunaan nya.

Fungsi Javascript

tailwind css tidak meyediakan fungsi javascript seperti pada saat sperti kita menggunakan bootstrap kita seluruh nya mengatur sendiri script nya hanya pada saat kita menggunakan framwork untuk component pada daisy ui atau flowbite saja kita membutuhkan javacript nya karena komponen nya harus include dengan plug-in nya.

terimakasih itu tadi adalah pengetahuan saya tentang tailwind-css semoga bisa membantu anda sekalian.