Install Windi CSS di Next JS

بِسْمِ اللَّهِ الرَّحْمَٰنِ الرَّحِيمِ

A. Pendahuluan

Windi CSS adalah sebuah Utility-First CSS Framework, yang menurut saya menarik karena dia menawarkan load time yang lebih cepat ketimbang Tailwind. Selain itu, di Website resminya juga menyebutkan bahwa Windi ini kompatibel dengan Tailwind V2. Bisa dibilang Windi CSS adalah alternatifnya Tailwind, dengan beberapa fitur tambahan. Jika sebelumnya projectnya memakai Tailwind untuk styling dan ingin migrasi ke windi, maka harusnya ga terlalu banyak perubahan, hanya butuh penyesuaian sedikit.

B. Instalasi

Saya asumsikan temen-temen sudah punya project Next JS nya, agar kita langsung ke tahapan instalasi Windi CSS.

1. Karena Next JS menggunakan webpack sebagai build tool, maka install windicss-webpack-plugin. Sesuaikan perintah instalasi dengan package manager yang temen-temen gunakan, disini saya menggunakan pnpm.

pnpm add windicss-webpack-plugin -D

Jika sebelumnya menggunakan prettier-plugin-tailwindcss untuk sort class Tailwind, temen-temen bisa gunakan juga di Windi, karena memang class-class di Windi kebanyakan sama saja dengan yang ada di Tailwind. See: https://github.com/windicss/windicss/issues/659

2. Edit file next.config.js

/** @type {import('next').NextConfig} */
const WindiCSSWebpackPlugin = require("windicss-webpack-plugin");
 
const nextConfig = {
  reactStrictMode: true,
  swcMinify: true,
  webpack(config) {
    config.plugins.push(new WindiCSSWebpackPlugin());
    return config;
  },
};
 
module.exports = nextConfig;

3. Tambahkan import windi.css di file _app.js atau _app.tsx

import "~/styles/globals.css";
import type { AppProps } from "next/app";
import "windi.css";
 
export default function App({ Component, pageProps }: AppProps) {
  return <Component {...pageProps} />;
}

Yep, hanya seperti itu. Dan sekarang, kita bisa test apakah Windi CSS sudah bisa digunakan. Disini saya coba buat contoh sederhana.

export default function HomePage() {
  return (
    <main className="flex min-h-screen w-full items-center justify-center">
      <section className="flex w-full max-w-5xl items-center justify-center">
        <div className="hover:border-6 cursor-pointer border-4 border-black p-4">
          <h1 className="heading">Hello from Windi CSS</h1>
        </div>
      </section>
    </main>
  );
}

.heading {
  @apply bg-gradient-to-r from-blue-500 to-cyan-300 bg-clip-text text-center text-center text-4xl font-bold text-transparent;
}

Hasil:

Sebagai catatan: Saya tidak terlalu menyarankan untuk migrasiin existing Next JS project yang udah dalam skala besar, dan pake Tailwind untuk stylingnya, ke Windi, walaupun memang cara ini sudah saya coba di project yang memakai appDir, dan Alhamdulillah work. Windi CSS sendiri tidak memprioritaskan Next JS dalam pengembangannya, jadi kita mesti expect bakal adanya beberapa class yang tidak work. Seperti di salah satu project saya, dimana untuk class blur, serta scale nya tidak work, jadi saya mesti membuat style sendiri biar bisa nambahin blur dan scale.