Cara Instalasi Tailwind CSS – Hi bret kali mimin akan share cara Instalasi Tailwind CSS di project kesayangan kalian, di tailwind css ada beberapa cara untuk memulai instaliasi, berikut beberapa cara yang bisa di gunakan :
- Menggunakan Tailwind CLI
- Menggunakan PostCSS
- Menggunakan Framework Guides
- Menggunakan CDN
1. Cara Instalasi Tailwind CSS melalui Tailwind CLI
Berikut adalah tahap dasar untuk menginstal Tailwind CSS pada project website kalian :
1. Pastikan project website kalian sudah menggunakan npm (Node.js package manager). Jika belum menginstallknya, silahkan install Node.js terlebih dahulu.
2. Buka terminal atau command prompt, dan arahkan ke direktori prokect website kalian.
3. Jalankan perintah berikut untuk menginstal Tailwind CSS dan dependensinya:
npm install tailwindcss4. Setelah selesai, buat file konfigurasi Tailwind dengan menjalankan perintah berikut :
npx tailwindcss initPerintah ini akan membuat file tailwind.config.js di direktori project website kalian.
5. Konfigurasi template paths kalian di config.js :
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}6. Buat file CSS baru di direktori project website kalian (misalnya styles.css), dan tambahkan code script berikut :
@tailwind base;
@tailwind components;
@tailwind utilities;7. Tambahkan file CSS yang baru dibuat ke file HTML project website kalian, seperti ini :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello there !
</h1>
</body>
</html>8. Jalankan project website kalian dan pastikan Tailwind CSS berfungsi dengan aman 🙂
2. Cara Instalasi Tailwind CSS melalui postCSS
Langkah instalasi kedua yaitu instalasi tailwind CSS melalui postCSS cara memulai instalasi nya yaitu dengan cara berikut :
1. Pastikan project website kalian sudah menggunakan npm (Node.js package manager). Jika belum, instal Node.js terlebih dahulu.
2. Buka terminal atau command prompt, dan arahkan ke direktori project website kalian.
3. Jalankan perintah berikut untuk menginstal PostCSS dan plugin Tailwind CSS:
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init4. Buat file konfigurasi PostCSS dengan menjalankan perintah:
npx tailwindcss initPerintah ini akan membuat file postcss.config.js di direktori proyek web Anda.
5. Buka file postcss.config.js dan tambahkan kode berikut :
module.exports = {
plugins: {
tailwindcss: {},
autoprefixer: {},
}
}6. Konfigurasikan template kalian, Tambahkan ke file template project kalian pada tailwind.config.js.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}7. Buat file CSS baru di direktori project website kalian (misalnya src/main.css), dan tambahkan kode berikut:
@tailwind base;
@tailwind components;
@tailwind utilities;8. Jalankan project website kalian dengan npm run dev di terminal atau perintah apa pun yang di konfigurasi dalam file package.json kalian.
npm run dev9. Tambahkan file CSS yang baru dibuat ke file HTML project website kalian, seperti berikut :
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="/src/main.css" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold underline">
Hello there !
</h1>
</body>
</html>10. Jalankan project website kalian dan pastikan Tailwind CSS berfungsi dengan aman jaya :D.
3. Cara Instalasi Tailwind CSS melalui Framework Guides
Untuk menginstal Tailwind CSS menggunakan framework guides, ikuti langkah-langkah berikut:
1. Pastikan kalian sudah memiliki Node.js dan npm yang terinstal di komputer.
2. Buat project baru menggunakan framework guides dengan menjalankan perintah berikut pada terminal :
npx guides init my-project3. Masuk ke direktori project yang baru di buat dengan menjalankan perintah berikut :
cd my-project4. Pasang Tailwind CSS dan PostCSS dengan menjalankan perintah:
npm install tailwindcss postcss autoprefixer5. Buat file konfigurasi Tailwind CSS dengan menjalankan perintah :
npx tailwindcss init6. Edit file postcss.config.js dan tambahkan plugin tailwindcss dan autoprefixer:
javascriptCopy codemodule.exports = {
plugins: [
require('tailwindcss'),
require('autoprefixer'),
]
}7. Buat file tailwind.css pada direktori src/styles dan tambahkan konfigurasi Tailwind CSS ke dalamnya :
@tailwind base;
@tailwind components;
@tailwind utilities;8. Tambahkan file tailwind.css ke konfigurasi framework guides dengan menambahkan baris berikut pada file guide.config.js :
javascriptCopy codemodule.exports = {
styles: [
'src/styles/tailwind.css',
],
};9. Jalankan project kalian di terminal dengan perintah npm run dev dan Tailwind CSS akan bekerja pada project kalian .
4. Cara Instalasi Tailwind CSS menggunakan CDN
Dan cara yang terakhir yaitu cara yang paling mudah, Instalasi Tailwind CSS menggunakan CDN, berikut adalah langkah-langkah instalasi Tailwind CSS menggunakan CDN:
1. Silahkan kalian open website Official Tailwind CSS di https://tailwindcss.com/docs.
2. Lalu Salin kode HTML template dasar dari document resmi Tailwind CSS . Contohnya seperti ini :
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Instalasi Tailwind CSS Menggunakan CDN</title>
<!-- Masukkan Tailwind CSS CDN di sini -->
<link rel="stylesheet" href="https://cdn.tailwindcss.com/dist/tailwind.min.css"/>
</head>
<body>
<div class="bg-pink-100 h-screen flex items-center justify-center">
<h2 class="text-4xl text-pink-700">Hai There, Tailwind CSS Menggunakan CDN!</h1>
</div>
</body>
</html>3. Tempelkan kode tersebut ke file HTML kalian, atau buat file new HTML dan salin code script tersebut ke dalamnya file nya.
4. lalu simpan file HTML kalian.
5. Open file HTML yang telah di buat di browser website kesayangan kalian.
6. DAN NOW !!!, Tailwind CSS sudah berhasil terpasang menggunakan CDN dan dapat di pakai dalam project besar kalian.
Kesimpulan
Gunakan cara yang paling tepat sesuai kebutuhan project kalian dalam memulai menggunakan Framework Tailwind CSS, karena Tailwind sendiri menyediakan dokumentasi yang lengkap dan mudah di gunakan, semoga artikel ini bisa membantu kalian dalam menyelesaikan project yang sedang di kalian kembangkan, terima kasih semoga bermanfaat :).
Baca Juga :
