Skip to main content

Membuat Template Blogger dengan Tailwind CSS dan Flowbite Part 2 : Compiling

Subscribe to:
New #1

Artikel ini merupakan sambungan dari artikel sebelumnya

Di artikel sebelumnya kita memakai CDN sebagai basis pembuatan template blogger.

Namun tujuan kita kali ini untuk menghasilkan file output CSS sekecil mungkin. Proses minifikasi file CSS bisa menghasilkan ukuran file kurang dari 10kB, bahkan untuk website yang komplex.

Pastikan sudah terinstall:

NojeJS

Periksa NodeJS apakah sudah terinstall: node -v

Langkah-langkah compiling Tailwind CSS di blogger:

Buat tema menggunakan CDN Tailwind CSS. Disini aku memakai tema dasar v10 khusus untuk tutorial. Download Raw File.

Persiapan

  1. Hapus Config File dan CDN Tailwind CSS di template xml. Setelah menghapus config dan CDN > Simpan > Refresh untuk membuktikan bahwa tidak ada CDN lagi.
  2. Buat Folder baru, beri nama (terserah kamu): Source_code
  3. Buka terminal di folder tersebut

Install Tailwind di folder Source Code

Instal tailwindcss melalui npm, proses ini otomatis buat file tailwind.config.js.

Jalankan perintah berikut di terminal satu per satu.

npm install -D tailwindcss
npx tailwindcss init
npm install flowbite
npm install -D @tailwindcss/typography

Konfigurasikan lokasi template Anda

Paste code berikut di dalam tailwind.config.js.

/** @type {import('tailwindcss').Config} */
module.exports = {
  darkMode: 'class',
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {
      colors: {accent: '#451184',},
    },
  },
  plugins: [require('@tailwindcss/typography','flowbite/plugin'),],
}

Ini file config yang biasa kupakai, ada dark mode, accent color dan plugin flowbite.

Buat folder src dan file input.css

Buat folder baru, beri nama: src.

Buat file baru, beri nama: input.css

Paste code di bawah di dalam input.css

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

Buat file index.html di folder src

Paste code berikut di dalam index.html.

<!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>

Mulai proses pembuatan Tailwind CLI

Jalankan perintah berikut di terminal

Non Minified

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

Minified

npx tailwindcss -o build.css --minify
(3 balasan) 👋 #1 Kang Nolep , #2 , #3 ,
0
Post a Comment
Forum rules
You can use English or Indonesian
Back to top Back to bottom