Install Windi CSS di Next JS

avatar

Haikel, 3 min read / April 8, 2023

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

Table of Contents

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.

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.

  1. Edit file next.config.js di root directory.
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;
  1. Buat file windi.config.js di root directory.
windi.config.js
import { defineConfig } from "windicss/helpers";
 
export default defineConfig({
  extract: {
    include: ["**/*.{jsx,tsx,css}"],
    exclude: ["node_modules", ".git", ".next"],
  },
});
  1. Tambahkan import "windi.css" di file _app.js atau _app.tsx
pages/_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. Kalau pengen nyoba hal lain yang ditawarin Windi, kunjungi Dokumentasinya.

Sekarang, kita bisa test apakah Windi CSS sudah bisa digunakan. Disini saya coba buat contoh sederhana.

pages/index.tsx
import Head from "next/head";
 
export default function HomePage() {
  return (
    <>
      <Head>
        <title>Hello from Windi CSS</title>
      </Head>
      <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>
    </>
  );
}
styles/globals.css
.heading {
  @apply bg-gradient-to-r from-blue-500 to-cyan-300 bg-clip-text text-center text-4xl font-bold text-transparent;
}

Hasil:

Hello from Windi CSS

Btw, berikut link reponya. Udah dicoba di appDir nya Next JS dan Alhamdulillah work juga.

Penutup

Windi CSS adalah sebuah framework CSS yang menurut saya menarik untuk dicoba. Tapi, Windi CSS sendiri tidak memprioritaskan Next JS dalam pengembangannya, alias second support. Jadi kita mesti bersiap jika nanti ada 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. Makanya, saya tidak terlalu menyarankan untuk migrasiin existing Next JS project yang udah dalam skala besar, dan pake Tailwind untuk stylingnya, ke Windi. Ya kalo projectnya kecil dan buat coba-coba, boleh-boleh saja.

Referensi