Cara Install Tailwindcss Dengan Mudah Di Project Kamu

Tailwind CSS merupakan framework yang bersifat utility-first untuk membangun desain antarmuka khusus dengan cepat

Halo teman teman 🤠, terimakasih sudah berkunjung di blog saya.

Sesuai judul "Cara Install Tailwindcss Dengan Mudah Di Project Kamu", kita akan sedikit membahas tailwindcss. Tailwind CSS merupakan framework yang bersifat utility-first untuk membangun desain antarmuka khusus dengan cepat.

Cara Install Tailwind CSS di Laravel

Tailwind CSS mengambil cara pendekatan berbeda di pengembangan web, yang didominasi Bootstrap, sehingga tidak ada lagi istilah “tampilan sejuta umat” di sebabkan kemiripan antara web yang satu dengan yang lain (di akibatkan sama-sama menggunakan tema starndar/default dari Bootstrap, minim kustomisasi).

Perbedaaan Dengan Bootstrap atau Semantic UI

Tailwind CSS adalah low-level CSS framework, akan tetapi Bootstrap atau Semantic UI adalah UI toolkit yang lengkap dengan sekumpulan predefined component siap pakai, sehingga pengembang dapat menggunakan class dengan mudah untuk sebuah komponen. Misalnya dalam pembuatan komponen card di bootstrap.

#bootstrap
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Dalam framework css tailwind tidak ada class yang siap pakai untuk membuat komponen card, tetapi kita bisa ber creative membuat card sesuai selera kita menggunakan mix and match class yang telah tersedia di tailwind css.

#tailwindcss
<div class="rounded shadow bg-blue-300 mx-4 h-20 w-56">
    <div class="p-4">
        Some content...
    </div> 
</div>

Tahap Instalasi Tailwindcss.

Cara Pertama Instalasi Menggunakan CDN.

Instalasi tailwindcss menggunakan CDN sangat cepat dan mudah, tapi di samping kecepatan dalam instalasi, instalasi menggunakan CDN juga memiliki kekurangan, but has limited features . Instalasi via CDN Tailwind CSS tidak berbeda framework css lainya, menggunakan satu tag <link> yang menampung build konfigurasi default terbaru untuk membuat Anda siap untuk membangun halaman web.

Pasang line code di dalam tag HTML's <head>
<link href="https://unpkg.com/tailwindcss@2.2.8/dist/tailwind.min.css" rel="stylesheet">

Cara Kedua Instalasi Tailwindcss menggunakan CLI.

Instalasi Tailwindcss CLI mengaktifkan semua fitur yang di miliki tailwindcss sehingga kita dapat lebih explore dengan semua yang sudah di sediankan Tailwindcss. Dalam hal ini saya melakukan instalasi menggunakan npm.

Untuk dapat memulai instalasi Tailwindcss tentukan dulu folder/directori yang akan di gunakan.

"D:\Soefyan\www\porto1"

kemudian jalankan perintah;

npm init

perintah "npm init" akan membuat file package.json untuk semua nilai yang tampil anda bisa membiarkannya default atau cukup enter saja.

kemudian jalankan peritah.

npm install tailwindcss --save-dev

Setelah selesai, Anda akan memiliki folder node_modules dan file package-lock.json di folder proyek Anda.

Setelah Tailwind terinstal, saatnya untuk melakukan pengujian. Saya akan membuat struktur file situs web dasar.

Di root folder proyek saya membuat file index.html dan folder styles. Di dalam folder styles, saya membuat file styles.css. Anda dapat memeriksa referensi visual di bawah ini untuk lebih jelasanya.

.
├── index.html
├── styles
|   ├── styles.css

Kemudian tambahkan bari code ini kedalam file index.html.

<! DOCTYPE html>
<html>
 <head>
  <link href="styles/output.css" type="text/css" rel="stylesheet" />
 </head>
 
 <body>
 
 </body>
</html>

Setelah selesai, saya menambahkan directives Tailwind berikut ke dalam styles.css

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

kemudian masuk ke dalam directori styles, dan jalankan perintah ini

npx tailwind build styles.css -o output.css

Jika berhasil dijalankan, Anda sekarang harus memiliki file tambahan di folder styles Anda bernama output.css yang berarti Anda telah berhasil menginstal Tailwind CSS, yang perlu dilakukan hanyalah menguji untuk memastikan.

Untuk menguji instalasi Tailwind saya, saya cukup menyalin dan menempelkan salah satu contoh navbar dari dokumentasi ke dalam index.html saya seperti yang ditunjukkan di bawah ini. Sumber dokumentasi resmi

<! DOCTYPE html>
<html>
 <head>
  <link href="styles/output.css" type="text/css" rel="stylesheet" />
 </head>
 
 <body>
  <nav class="flex items-center justify-between flex-wrap bg-blue-500 p-6">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
   <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
   <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
    </div>
    <div class="block lg:hidden">
   <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-blue-400 hover:text-white hover:border-white">
     <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
   </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
   <div class="text-sm lg:flex-grow">
     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 font-semibold hover:text-white mr-4">
    Docs
     </a>
     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 font-semibold hover:text-white mr-4">
    Examples
     </a>
     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 font-semibold hover:text-white">
    Blog
     </a>
   </div>
   <div>
     <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded font-semibold text-white border-white hover:border-transparent hover:text-blue-600 hover:bg-white mt-4 lg:mt-0">Download</a>
   </div>
    </div>
  </nav>
  <div class="rounded shadow bg-blue-300 mx-4 h-20 w-56">
    <div class="p-4">
        Some content...
    </div> 
</div>
 </body>
</html>

Jika Anda telah melakukan semuanya dengan benar, kemudian hit atau open dengan browser index.html Anda di browser Anda akan menghasilkan gambar seperti di bawah ini.

Jadi anda bisa memilih akan menggunakan cara instalasi menggunakan CDN atau CLI, kedua nya memiliki kelebihan. akan tetapi untuk mendapatkan pengalaman yang lebih baik saya menyarankan menggunakan CLI.

Oke semoga membantu,