Unocss: Dari Framework CSS Utility-First Tailwind ke CSS On-Demand

Bosan dengan kecantikan Bootstrap yang itu-itu saja, move-on ke TailwindCSS. Merasa sulit menaklukan Tailwind bisa selingkuh dengan WindiCSS. Karena si Windi angin-anginan, yuk 'open BO' sama UnoCSS.

Illustrasi review UnoCSS.
Illustrasi review UnoCSS. ( On Freepik / Wayhomestudio )

Jika Bootstrap adalah truly framework CSS yang menawarkan berbagai komponen siap pakai, maka Tailwind adalah framework utility-first memiliki nama class yang paling lengkap dari semua fitur CSS, Tailwind memungkinkan styling UI langsung dalam markup HTML.

Sedangkan WindiCSS adalah alternatif dari Tailwind. Sayangnya, si Windi pun layu sebelum berkembang. Kemudian dia menyarankan untuk berlalih ke UnoCSS, sebuah mesin CSS on Demand yang paling gesit dan lincah.

Apa itu UnoCSS?

UnoCSS adalah sebuah mesin CSS on-demand. Meskipun tidak menyebut dirinya sebagai sebuah framework CSS, UnoCSS merupakan sebuah pendekatan baru dalam “framework CSS utility-first” dengan fitur preset. Seperti Tailwind, UnoCSS memungkinkan insert style CSS langsung di markup HTML, tapi dengan performa yang lebih cepat, ringan dan lebih efisien.

Untuk lebih jelas silahkan baca blog post dari founder UnoCSS.

Mengapa Saya Beralih ke UnoCSS?

Mungkin Anda bertanya-tanya, kenapa tiba-tiba saya beralih ke UnoCSS? Apakah saya sudah menjadi “haters” TailwindCSS? Tidak juga. Sampai saat ini, saya masih setia menggunakan Tailwind.

Hanya saja, pada saat memulai sebuah projek baru, membuat sebuah template yang sangat sederhana dengan tailwind, hasil build file kok malah tambah gemuk.

Sebelumnya, silahkan baca keluhan tentang Tidak Suka dengan salah satu Class TailwindCSS? Disable Saja.

Kejadian ini membuat saya frustasi beberapa hari yang pada akhirnya saya ingin lari dari kenyataan mencari framework CSS alternatif seperti TailwindCSS.

Ketemulah si WindiCSS. Sayangnya inisiator projek Windi tampak angin-anginan, akhirnya WindiCSS masuk ke dalam kategori start-up tech-tool yang ditinggalkan (sunsetting). Dari halaman windicss.org, pengembang menyarankan untuk mengunakan UnoCSS sebagai alternatif dari Tailwind.

Alasan Beralih ke UnoCSS

Alasan paling logis untuk hijrah dari Tailwind ke UnoCSS adalah masalah performa. Semakin besar proyek yang dikembangkan, sistem Tailwind akan melambat seiring dengan proses kerja generate-scan-purge yang berulang-ulang. UnoCSS hadir sebagai solusi dengan performa yang lebih baik, membuatnya menjadi pilihan yang tepat untuk proyek-proyek besar.

Cara Install UnoCSS

Untuk menggunakan UnoCSS biasanya di-integrasi dengan tool front end seperti Vite, VueJS, Svelte, ReactJS dan sebangsanya.

Kali ini, saya akan menunjukkan cara menginstall UnoCSS secara mandiri melalui jalur CLI, mirip dengan instalasi TailwindCSS.

Step 0 — Inisialisasi projek UnoCSS

Di dalam direktori projek baru, (open in Terminal), lalu ketik perintah berikut:

$ npm init -y

Step 1 — Run npm Intall UnoCSS

Jalankan perintah berikut untuk menginstall UnoCSS:

$ npm install -D unocss

Pada saat tutorial ini ditulis, versi UnoCSS yang terinstall adalah 0.61.2, sudah termasuk modul CLI didalam mesin @uno.

Step 2 — Buat file config

Untuk membuat file config, Anda bisa menggunakan JavaScript uno.config.js atau TypeScript uno.config.ts. Saya akan menggunakan file JavaScript.

Buat file uno.config.js lalu insert dengan beberapa baris kode berikut:

// uno.config.js

import { defineConfig } from 'unocss'

export default defineConfig ({

    cli: {
        entry: {
            patterns: [
                './src/*.html',
            ],
            outFile: './src/style.css'
        },
    },
})

Step 3 — Tambahkan script dev di package.json

Tambahkan script "dev": "unocss --watch" di package.json untuk menjalankan UnoCSS:

{
  "name": "amplate",
  "version": "0.1.0",
  "description": "AMP template build with UnoCSS",
  "main": "index.js",
  "scripts": {
    "dev": "unocss --watch"
  },
  "keywords": ["amplate, amp, unocss, tailwindcss"],
  "author": "Fauzan My",
  "license": "ISC",
  "devDependencies": {
    "unocss": "^0.61.2"
  }
}

Step 4 — Panggil Class-class CSS

Buat satu file HTML di dalam direktori src lalu insert markup berikut:

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Amplate - AMP Template build with TailwindCSS</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header class="py-2 px-4">
        <h1 class="text-2xl font-bold">Amplate</h1>
    </header>
    
    <main class="px-4 py-12 space-y-4">
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati mollitia eius, voluptatum architecto soluta exercitationem, voluptatem voluptates est, reprehenderit animi quo provident? Exercitationem quaerat voluptatem distinctio quidem sit repellendus perspiciatis!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati mollitia eius, voluptatum architecto soluta exercitationem, voluptatem voluptates est, reprehenderit animi quo provident? Exercitationem quaerat voluptatem distinctio quidem sit repellendus perspiciatis!</p>
        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Obcaecati mollitia eius, voluptatum architecto soluta exercitationem, voluptatem voluptates est, reprehenderit animi quo provident? Exercitationem quaerat voluptatem distinctio quidem sit repellendus perspiciatis!</p>
    </main>

    <footer class="px-4 py-8">
        <small>Copyright 2024 Amplate. All rights reserved.</small>
    </footer>
</body>
</html>

Step 5 — Run Projek

Jalankan perintah berikut di terminal:

$ npm run dev

Jika termintal muncul informasi seperti berikut ini:

> [email protected] dev
> unocss --watch

unocss v0.61.2                                                                                                         21:29:40
◐ UnoCSS in watch mode...                                                                                              21:29:40

Tada! UnoCSS sudah berhasil berjalan dan siap mengenerate style.css berdasarkan class yang dipanggil di file index.html.

UnoCss

Cara Menggunakan UnoCSS

Jika telah mengikuti proses instalasi hingga step ke-5 tanpa kendala, maka mesin UnoCSS sudah siap digunakan, mirip dengan cara kerja TailwindCSS.

Pada dasarnya, class UnoCSS adalah turunan dari WindiCSS dan TailwindCSS.

Jadi, secara default, UnoCSS sudah termasuk dengan class-class utility dari WindiCSS bin TailwindCSS.

Jika ingin menggunakan class CSS selain dari DNA Windi-Tailwind, kita bisa menggunakan preset community.

CSS On-Demand dengan UnoCSS

Apa bedanya UnoCSS dengan TailwindCSS jika basis kode masih sama dengan style Tailwind? Mengandalkan kecepatan mesin?

Yang menarik dari engine @uno adalah class name bekerja secara dinamis.

Contohnya, untuk menggunakan class kustom di TailwindCSS, kita bisa mendeklarasikan terlebih dahulu di main input atau menggunakan class arbitrary:

<!-- TailwindCSS -->
<div class="p-[10px] m-[15px]">
  <p>Lorem ipsum dolor sit amet..</p>
</div>

Dengan mesin UnoCSS, kita bisa memakai class custom secara natural, tapi bekerja secara dinamis dan unlimited tanpa harus deklarasi style lagi.

<!-- UnoCSS -->
<div class="py-99 px-19">
  <p>Lorem ipsum dolor sit amet..</p>
</div>

Sangat canggih sekali bukan? Tak hanya itu, kita juga bisa membuat komponen dinamis sendiri, misalnya btn-r dengan menetapkan rule sendiri.

rules: [
  [/^btn-r(\d+)$/, ([, d]) => ({ border-radius: `${d / 4}rem` })],
]

Cara Menggunakan Preset UnoCSS

UnoCSS memang fleksibel. Saking fleksibelnya, kita bisa mengonta-ganti preset CSS sesuka hati.

FYI❓ Apa itu preset UnoCSS? Preset adalah serangkaian pengaturan yang telah dirancang sebelumnya untuk memudahkan pengguna lain dengan menyediakan konfigurasi siap pakai yang dapat diterapkan dengan cepat.

Di dalam engine @uno, preset default adalah preset-uno. Jika ingin menggunakan preset lain seperti preset Windy atau preset dari komunitas cara cukup mudah.

Cara Pakai Preset Windy

Preset Windy adalah preset CSS dari kombinasi fremework WindyCSS dan TailwindCSS.

Untuk menggunakan preset Windi sangat mudah, cukup tambahkan konfigurasi import dan export preset-wind di dalam file konfigurasi uno.config.js.

// uno.config.js
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'

export default defineConfig({
  presets: [
    presetWind(),
  ],
  
  // cli { },
})

Karena di dalam modul instalasi UnoCSS sudah termasuk package preset-wind, jadi tidak perlu proses instalasi. Cukup panggil saja. Namun, jika package “preset-wind” tidak ada, silakan install package-nya:

npm install -D @unocss/preset-wind

Cara Menggunakan Reset style UnoCSS

UnoCSS memang efisien. Saking efisien, mesin @uno tidak menyertakan reset CSS seperti pada umumnya framework CSS macam Bootstrap dan TailwindCSS.

Tapi jangan khawatir, saat menginstall UnoCSS versi 0.61.2, sudah include berbagai pilihan reset CSS seperti Normalize.css, sanitize.css, Eric Meyer, Tailwind, Tailwind compact.

Untuk menggunakan reset CSS, kita bisa memanggilnya langsung ke dalam proyek. Jika Anda menggunakan frontend tool seperti Vite, cukup import langsung ke file main.js:

import '@unocss/reset/tailwind.css'

Karena kita menjalankan UnoCSS via CLI, proses import reset CSS sedikit berbeda.

Sebelumnya, saya sempat ‘pusing’ gagal berkali-kali saat mecoba import reset UnoCSS.

Nah, buat pembaca InsertApps yang masih pemula dengan UnoCSS dan tidak ikut bingun juga, berikut cara melakukannya dalam file konfigurasi UnoCSS.

Buka file config, kemudian insert reset CSS di baris kode preflights: [{}] :

// uno.config.js
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'

export default defineConfig({
  presets: [
    presetWind(),
  ],

  preflights: [
    {
       getCSS: ({ theme }) => ` // Insert reset CSS disini `,
    }
  ],
  
  // cli { },
})

🔥 QUICK TIPS: Pastikan baris code reset CSS berada dalam tanda backtick pembuka dan penutup.

Cara Menggunakan Layer UnoCSS

Secara default, UnoCSS tidak menyertakan reset CSS, maka style bawaan mesin yang digenerate adalah layer /* layer: preflights */ dan /* layer: default */.

/* layer: preflights */
*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;...

/* layer: default */
.px-4{padding:1rem;}
.py-2{padding-top:1.5rem;padding-bottom:1.5rem;}

🔥 QUICK TIPS: Untuk melihat kode dan layer apa saya yang digenerate oleh UnoCSS, silahkan intip file ouput style.css.

Berikutnya kita akan menambahkan satu layer lagi yang akan berisi reset CSS. Caranya cukup mudah, buka kembali file konfigurasi, tambah kode key layer dan value resetcss di dalam blok kode preflights:

// uno.config.js
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'

export default defineConfig({

  preflights: [
    {
      layer: 'resetcss', // Tambah nama layer kamu disini 
      getCSS: ({ theme }) => ` // Insert reset CSS disini `,
    }
  ],

  // cli { },
})

Susunan layer CSS yang benar

Setelah menambah layer, bagaimana sih best practice urutan CSS (layering class) yang tepat sehingga styling tidak tumpang tindih?

Browser merender style dari atas ke bawah baris per baris, dengan demikian class baris terakhir yang akan menjadi prioritas tampilan.

Untuk itu, urutan style CSS yang baik, saya mengikuti format layering TailwindCSS.

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

Sedangkan UnoCSS membebaskan kita untuk mengatur layer CSS sesuka hati.

Caranya buka lagi file konfigurasi UnoCSS, lalu atur layering dengan konfigurasi sebagai berikut:

// uno.config.js
import { defineConfig } from 'unocss'
import presetWind from '@unocss/preset-wind'

export default defineConfig({

  preflights: [
    {
      layer: 'resetcss', // Tambah nama layer kamu disini 
      getCSS: ({ theme }) => ` // Insert reset CSS disini `,
    }
  ],

  layers: {
    'resetcss': -1, // Urutan layer reset di urutan paling atas
    'preflights': 1, // UnoCSS preflighs CSS
    'default': 2, // Bagian CSS yang akan digenerate
  },
  
  // cli { },
})

Dan hasil ouput style.css yang digenerate oleh mesin UnoCSS menjadi urutan berikut:

/* layer: resetcss */

/* layer: preflights */

/* layer: default */

Kesimpulan

  • Meskipun UnoCSS dan TailwindCSS sama-sama framework CSS utility-first, UnoCSS dirancang untuk lebih cepat dan lebih ringan.

  • UnoCSS menghasilkan CSS on-demand, sementara TailwindCSS memerlukan konfigurasi purge untuk menghapus CSS yang tidak digunakan.

  • UnoCSS juga menawarkan sintaks yang lebih fleksibel dan dapat dikustomisasi, meskipun ekosistem dan dokumentasi TailwindCSS lebih matang.

  • Ada yang kurang jelas, silahkan tinggalkan komentar di bawah ini.

Bersambung ke cara yang benar menggunakan UnoCSS dengan Vite tool frontend.

Fauzan My avatar

Ditulis oleh Fauzan My

Saya terobsesi dengan seni desain yang elegan dan sederhana, baik yang melibatkan proses kreatif rumit maupun yang sederhana. Di sini, saya menggabungkan keduanya, desain dan coding: mencari best practice.

Tulisan lainnya Fauzan My

Illustrasi programmer perempuan.
Tidak Suka dengan salah satu Class TailwindCSS? Disable Saja
Optimasi SEO pada gambar.
Optimasi Gambar Responsif di WordPress
CSS position sticky.
Cara Membuat Header Tetap (Sticky/Fixed) Saat Di-scroll

Related Post