Tutorial Install TailwindCSS

Pada Artikel ini Mangcoding akan memberikan Tutorial Install TailwindCSS, Tailwinds adalah Kerangka kerja CSS yang mengutamakan utilitas yang dikemas dengan class, dan yang dapat disusun untuk membangun desain apapun, langsung di markup Anda. Sebelum mempelajari Tailwinds CSS kita perlu belajar terlebih dahulu tentang CSS, ok, jangan berlama lama kita langsung saja ke materinya.

Ada dua untuk cara install tailwinds yang pertama menggunakan CDN dan yang kedua menggunakan CLI untuk yang pertama kita menggunakan CDN dulu yang, untuk pertama-tama kita buat terlebih dahulu file index.html

Install Tailwinds Menggunakan CDN

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body></body>
</html>

Lalu setelah itu tambahkan file CDN Tailwindnya silahkan lihat pada code dibawah ini lalu tambah dibawah tag meta:

<script src="https://cdn.tailwindcss.com"></script>

Selesai itu kita tambahkan class yang ada pada tailwinds css lihat pada gambar berikut ini:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

untuk menambah konfigurasi color, font size dll bisa menggunakan tailwind config silahkan baca baca pada documentasi tailwindnya disini bisa dilihat pada code dibawah ini:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <script>
      tailwind.config = {
        theme: { extend: { colors: { clifford: "#da373d" } } },
      };
    </script>
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Install Tailwind Menggunakan CLI

Yang pertama kita harus install dulu NPM nya terlebih dahulu bisa di download disini silahkan cek terlebih dahulu versi npm nya. kita harus install terlebih dahulu NPM, makasilahkan untuk download terlebih dahulu npm nya karena nmp itu satu bundle dengan node maka install terlebih dahulu node nya, kalau sudah selesai kita langsung saja install.

npm install -D tailwindcss

npx tailwindcss init

buka file tailwind.config.js

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

module.exports = {
 content: ["./src/**/*.{html,js}"],
 theme: {
   extend: {},
 },
 plugins: [],
}

Setelah itu silahkan buat file folder src lalu buat File style.css setelah itu tambahkan code dibawah ini untuk mengimport file dari tailwinds ke style.css

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

untuk menjalankan tailwind nya silahkan buka terminal di dalam project yang sudah dibuat lalu copy kode dibawah ini:

npx tailwindcss -i ./src/style.css -o ./dist/output.css --watch

setelah itu buat file index.html seperti kode dibawah ini:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="/dist/output.css" rel="stylesheet" />
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">Hello world!</h1>
  </body>
</html>

Kesimpulan

dari kedua cara di atas mana nih menurut kalian yang paling mudah nihh, kalau menurut saya sih yang pertama yang pake CDN gak pake ribet, hahah, tapi kalau untuk project-project besar saya sarankan untuk menggunakan yang CLI ya lebih enak. oke sekian dari saya terima kasih.