Tailwind CSS: Pengertian dan Cara Instalasinya

Tailwind CSS : Pengertian dan Cara Instalasinya – Tailwind CSS adalah sebuah framework CSS yang dapat digunakan untuk mengatur tampilan website dengan cepat dan mudah. Framework ini menggunakan pendekatan utilitas sebagai prioritas utama dan menyediakan semua blok pembangunan yang dibutuhkan untuk membuat desain yang unik tanpa gaya baku yang sulit diubah.

Hal yang membedakannya dari framework CSS lainnya adalah kemampuan kustomisasinya yang tinggi dan sifatnya yang rendah-level, sehingga memberikan pengembang kontrol penuh atas tampilan antarmuka pengguna.

Framework ini tidak menetapkan spesifikasi desain tertentu, sehingga pengembang dapat menggabungkan berbagai komponen untuk membuat desain khusus yang sesuai dengan kebutuhan mereka. Prosesnya melibatkan pengambilan file CSS “mentah” dan memprosesnya melalui sebuah file konfigurasi untuk menghasilkan output.

Mengapa Tailwind CSS?

1. Proses pembangunan UI lebih cepat

Memungkinkan proses pembangunan antarmuka pengguna yang lebih cepat dengan menggunakan kelas utilitas yang sudah tersedia daripada harus menulis CSS dari awal, sehingga menghemat waktu dan mengurangi kesalahan.

2. Pengembangan lebih Efisien

Menggunakan kelas utilitas yang sudah tersedia untuk memberikan styling yang efisien bagi komponen antarmuka pengguna. Para pengembang dapat dengan cepat membuat desain kustom dengan menggabungkan kelas utilitas ini dengan berbagai cara, sehingga menghasilkan pengembangan yang efisien dan penyelesaian proyek yang lebih cepat.

Instalasi Tailwind CSS

Untuk memasang Tailwind dengan npm, ikuti langkah-langkah berikut.

Pertama jalankan perintah ini:

npm init -y

Selanjutnya install Tailwind CSS dengan perintah ini:

npm install tailwindcss

Setelah selesai, Anda dapat membuat file CSS dan masukkan direktif @tailwind ke dalam file CSS Anda.

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

Inisialisasi proyek npm baru Anda dengan menjalankan perintah berikut di terminal:

npx tailwindcss init

Konfigurasikan jalur template Anda. Tambahkan jalur ke semua file template Anda di file tailwind.config.js Anda.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Sekarang mulai proses build Tailwind CLI. Jalankan alat CLI untuk memindai file template Anda untuk kelas dan membangun CSS Anda.

npx tailwindcss build styles.css -o output.css

Selanjutnya buatlah index.html dan masukkan kode berikut ini.

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World</title>
    <link rel="stylesheet" href="dist/output.css" />
  </head>
  <body>
    <h1 class="text-3xl font-bold text-center text-blue-500">Hello, World!</h1>
  </body>
</html>

Sekarang Anda sudah bisa menggunakan Tailwind CSS.

Belajar Tailwind CSS di Koding Akademi, kamu bisa belajar bagaimana mengoptimalkan penggunaannya untuk membangun antarmuka pengguna yang menarik dan efisien dalam waktu singkat. Daftar sekarang ya!

Source : Geeksforgeeks

Bootcamp Fullstack Web Developer

Rp12,500,000.00
Add to cart
Web Design dengan HTML5, CSS, Javascript Beginner 2.0

Rp700,000.00
Add to cart
Web Design dengan HTML5, CSS, Javascript

Rp1,400,000.00
Add to cart