Cara menggunakan purgecss config

For building the final CSS file we need to run the command

npx tailwind init

The resulting file is in

npx tailwind init

Automatically regenerate the CSS upon file changes

There is a great npm package that will compile our CSS in real-time without running the build command every time after edits. For that we need to install the watch using the command:

npm install watch

Enter fullscreen mode Exit fullscreen mode

Then we need to edit the

npx tailwind init

"scripts": {
  "build:css": "postcss src/tailwind.css -o static/dist/tailwind.css",
  "watch": "watch 'npm run build:css' ./layouts"
}

Enter fullscreen mode Exit fullscreen mode

Now for running we simply need to execute the command

npx tailwind init

Trim the File Size

If we check the final CSS file i.e after building, we can see that it’s huge in size. That large file is never appropriate for web pages. For that, we can actually trim the file to make it smaller than the original.

We need to install two more npm packages:

npm install cssnano
npm install @fullhuman/postcss-purgecss

Enter fullscreen mode Exit fullscreen mode

What is PurgeCSS?

PurgeCSS is a development tool used for removing the unused CSS in a Project. It is the default library to control the Tailwind CSS Bundle Sizes. It removes unused styles and optimizes CSS Build Sizes.

Tailwind CSS merupakan framework CSS yang berbasis utility untuk membuat UI atau tampilan dari aplikasi web.

Berbasis utility artinya Tailwind cuma terdiri dari 100% utility class dan nggak ada class komponen seperti Navbar, Button, Card, Modal, dll. Komponen-komponen ini kita buat sendiri dengan class utility.

Sebagai contoh:

Ketika kita ingin membuat komponen Button, maka kita bisa gunakan beberapa kelas utility untuk button seperti class background, border, color, dan sebagainya.

Mungkin kamu merasa:

“Wah ribet ya Tailwind, nggak kayak Bootstrap yang sudah punya class komponen dan bisa langsung pakai”

Saya juga dulu berpikir demikian,

Tapi..

Setelah mencoba Tailwind beberapa lama, malah jadi keenakan hehe. 😄

Sejarah Singkat Tailwind CSS

Tailwind css pertama kali dikemmbangkan oleh Adam Wathan di tahun 2017, rilis versi 1.0 di tahun 2019.

Versi tailwind saat ini adalah versi 3.2.4. Jika kamu tertarik untuk melihat sejarah perubahan dari versi ke versi, kamu bisa baca CHANGELOG di Github.

Kenapa Pakai Tailwind CSS?

Saya sebelumnya pernah pakai framework yang berbasis komponen seperti Bootstrap CSS, Bulma, MaterializeCSS, namun merasa kurang puas dengan framework ini.

Mengapa?

Pertama saya merasa kurang bebas kustomisasi komponennya. Kalau mau custom, harus override class yang udah ada.

Kedua, kode CSS dari komponen yang nggak dipakai akan ikut nyangkut di CSS hasil build. Ini membuat ukuran CSS-nya jadi lebih besar.

Walaupun saya coba pakai PurgeCSS, namun kadang hasil tampilannya nggak maksimal, ada aja yang bermasalah.

Akhirnya, saya coba Tailwind.. dan merasa sangat puas dan bebas kustomisasi tampilan web.

Hasil build kode CSS tailwind hanya akan menambahkan class-class yang dipakai saja.

Kalau class-nya nggak dipakai, ya nggak akan ditambahkan. Ini yang membuat hasil build CSS Tailwind lebih kecil dibandingkan Bootstrap, Bulma, Materialize, dll.

Persiapan Alat untuk Belajar Tailwind

Ada tiga alat yang kita butuhkan untuk coding Tailwind:

1. Teks Editor – buat menulis kode
2. Web browser – buat ngeliat hasilnya
3. Nodejs – buat install library dan package

Nodejs dipakai buat menginstal Tailwind CSS dan juga beberapa modul yang diperlukan.

Jika kamu belum menginstal Nodejs, silahkan baca:

• Cara Install Nodejs di Windows, Linux, dan Mac

Kemudian untuk text editor bebas, bisa pakai yang mana aja, sesuai selera masing-masing.

Biasanya teks editor yang dipakai adalah:

• VSCode
• Sublime Text
• Atom
• web storm dll.

Pada tutorial ini saya akan menggunakan text editor Visual Studio Code, karena fitur dan extensions yang ditawarkan dapat mempermudah proses development.

Oya, di VS Code.. kamu bisa install ekstension Tailwind IntelliSense buat mempermudah saat kamu kurang inget nama-nama class.

Lihat cara instalnya di website resmi Tailwind Intellisense.

Oke, selanjutnya untuk browser kita bebas menggunakan Chrome, Mozilla, Safari, Brave dll.

Setelah semuanya siap, mari kita mulai praktik hand on Tailwind..

Membuat Project Tailwind

Ada dua cara yang bisa dilakukan untuk menggunakan Tailwind di dalam project:

1. Menggunakan link CDN
2. Menggunakan NPM dari Nodejs

Mari kita coba keduanya.

1. Menggunakan Tailwind dari CDN

Menggunakan Tailwind dari CDN tidak direkomendasikan untuk dipakai di production, karena kita nggak akan dapat hasil build CSS yang optimal.

Tapi jika hanya untuk belajar Tailwind dan coba-coba, ini dibolehkan.

Gimana cara menggunakan Tailwind dari CDN?

Pertama siapkan dulu file atau kode HTML, kemudian di dalam tag

mkdir belajar-tailwind

Mari kita coba!

Buat file dengan nama

mkdir belajar-tailwind

tailwind-from-cdn.html

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

Setelah itu, buka dengan web browser.

Maka hasilnya:

Sangat mudah bukan.

Tapi ingat ya, CDN ini dipakai buat coba-coba dan belajar aja. Nggak direkomendasikan untuk production.

Jika mau pakai Tailwind di production, maka kita harus menggunakan Tailwind CLI dengan NPM.

Mari kita coba!

2. Membuat Project Tailwind dengan NPM

Pertama kita siapkan dulu folder baru untuk project.

Gunakan perintah:

mkdir belajar-tailwind

untuk membuat folder baru dari Terminal.

Setelah itu, masuk ke dalam folder yang sudah dibuat tadi dengan perintah

cd belajar-tailwind

Kemudian seperti biasa, kita harus melakukan inisialisasi atau persiapan awal dengan NPM di dalam folder ini.

Jalankan perintah:

npm init

Kemudian isi dengan data project, jika tidak mau diubah biarkan saja kosong dengan menekan enter.

Perintah ini akan membuat file baru bernama

mkdir belajar-tailwind

Selanjutnya kita akan menginstall tailwind css menggunakan

mkdir belajar-tailwind

Jalankan perintah ini di Terminal atau CMD:

npm install tailwindcss

untuk menginstall Tailwind ke dalam project.

Tunggulah sampai prosesnya selesai.

Setelah itu, lanjutkan membuat file konfigurasi tailwind.

Jalankan perintah:

npx tailwindcss init

Perintah ini akan membuat file baru bernama

cd belajar-tailwind

Berikut tampilan dari project setelah melakukan proses instalasi tailwind.

Kemudian, kita akan melakukan konfigurasi path konten pada file

cd belajar-tailwind

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

Perhatikan pada bagian

cd belajar-tailwind

cd belajar-tailwind

Artinya saat kita melakukan build CSS, si Tailwind akan mencari class-class apa saja yang dipakai di file HTML dan JS pada path tersebut.

Setelah itu, buat folder baru dengan nama

cd belajar-tailwind

cd belajar-tailwind

cd belajar-tailwind

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

Selanjutnya buatlah file

cd belajar-tailwind

cd belajar-tailwind

Isi file

cd belajar-tailwind

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/dist/output.css"/>
    <title>Project Tailwind dengan NPM</title>
</head>
<body>
  <h1 class="text-3xl font-bold text-teal-700">Petani Kode</h1>
</body>
</html>

Perhatikan link CSS di HTML ini 👆. Kita menulisnya seperti ini:

/dist/output.css

Karena kita akan buka di Live server atau localhost. Jika kamu mau langsung buka tanpa live server, cukup tuliskan seperti ini tanpa

npm init

mkdir belajar-tailwind

Tanda

npm init

Ini karena kita menyimpan file HTML-nya di dalam folder

cd belajar-tailwind

O iya, file

npm init

Caranya:

Jalankan perintah berikut:

mkdir belajar-tailwind

Perintah ini 👆 bertujuan untuk membuat file CSS (

npm init

cd belajar-tailwind

Ini hasil build-nya:

Jika kamu ingin hasil build-nya di-optimasi (minify), gunakan opsi

npm init

Contoh:

mkdir belajar-tailwind

Hasil

npm init

Hasil build yang minify ini cocok dipakai di production, karena ukurannya lebih kecil dan sudah dioptimasi.

Jika kamu membuka file

cd belajar-tailwind

Tenang..

Jangan panik!

Ini karena kita menuliskan di

npm init

npm install tailwindcss

npm install tailwindcss

npm install tailwindcss

Coba ubah

npm install tailwindcss

npm install tailwindcss

mkdir belajar-tailwind

Maka hasilnya:

Menggunakan Live Server

Alur kerja kita di project Tailwind dengan NPM adalah seperti ini:

1. Ubah atau gunakan class di file HTML
2. Jalankan perintah untuk build CSS Tailwind
3. Lihat hasilnya di browser

Ini cukup merepotkan, karena harus dilakukan berulang-ulang.

Biar tidak begini, kita bisa pakai Live server dan membuat custom script sendiri di

mkdir belajar-tailwind

Silahkan buka file

mkdir belajar-tailwind

npm install tailwindcss

package.json

mkdir belajar-tailwind

Pada script ini, kita menentukan perintah untuk build CSS tailwind dengan opsi

npm install tailwindcss

Ini artinya Tailwind akan memantau perubahan yang terjadi pada konten, lalu langsung melakukan build otomatis.