Belajar Tailwind CSS - Integrasi Modern Frameworks & Tooling

#Pendahuluan

Setiap framework punya cara sendiri menangani asset dan CSS. Episode 18 membahas integrasi Tailwind di lima framework populer: Next.js, Vite, SvelteKit, Astro, dan Remix — lengkap dengan pattern, content paths, dan caveats-nya. Kalian juga melihat koeksistensi dengan CSS-in-JS.

Inti dari semua integrasi sama: Tailwind menghasilkan CSS statis, dan satu-satunya perbedaan adalah di mana file input di-import dan file apa yang masuk content. Begitu pola ini dipahami, pindah antar framework tidak lagi menakutkan.

#Next.js App Router

Pasang Tailwind dengan PostCSS, lalu inisialisasi config:

Setup di Next.js

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Atur content untuk mencakup App Router:

Content untuk Next.js

module.exports = {
  content: ["./app/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx}"],
  theme: { extend: {} },
  plugins: [],
};

Lalu import CSS global di layout root:

app/layout.tsx

import "./globals.css";
 
export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="id">
      <body>{children}</body>
    </html>
  );
}

Pola content: ["./app/**/*.{js,ts,jsx,tsx,mdx}"] wajib mencakup file .mdx bila kalian memakai MDX. Import CSS hanya di layout root — bukan di komponen — agar tidak ada duplikasi.

#Vite, SvelteKit, Astro, Remix

#Vite

Vite menyediakan plugin resmi:

Plugin Vite untuk Tailwind

npm install tailwindcss @tailwindcss/vite

vite.config.ts

import tailwindcss from "@tailwindcss/vite";
 
export default {
  plugins: [tailwindcss()],
};

Plugin ini memakai syntax CSS-first Tailwind 4 — tidak lagi butuh tailwind.config.js untuk kasus dasar.

#SvelteKit

SvelteKit memakai PostCSS. Pasang lalu set config dengan content yang mencakup .svelte:

Config untuk SvelteKit

module.exports = {
  content: ["./src/**/*.{html,js,svelte,ts}"],
  theme: { extend: {} },
  plugins: [],
};

Jangan lupa menambahkan .svelte ke glob content — kesalahan paling umum di project Svelte.

#Astro

Astro juga memakai PostCSS. Content harus mencakup .astro dan .md bila dipakai:

Config untuk Astro

module.exports = {
  content: ["./src/**/*.{astro,html,js,jsx,md,mdx,ts}"],
  theme: { extend: {} },
  plugins: [],
};

#Remix

Remix identik dengan Next.js: PostCSS, content mencakup app/**/*.{js,ts,jsx,tsx}, dan import CSS global di root route.

Info

Pola paling umum dari semua setup: periksa daftar ekstensi file framework di glob content. Next.js butuh mdx, SvelteKit butuh svelte, Astro butuh astro dan md. Satu ekstensi yang terlewat berarti kelas di file itu tidak pernah dibangkitkan.

#Kompatibilitas dengan CSS-in-JS

Tailwind dan CSS-in-JS bisa hidup berdampingan. Pendekatan hybrid yang umum adalah twin.macro — memakai utility Tailwind di dalam file CSS-in-JS sebagai macro build-time:

twin.macro + styled-components

import tw from "twin.macro";
 
const Button = tw.button`
  rounded bg-blue-500 px-4 py-2 text-white
  hover:bg-blue-600
`;

tw.button dipecah saat build menjadi CSS biasa — tidak ada runtime tambahan dari Tailwind. Pendekatan ini memberi ergonomi CSS-in-JS (scoped, colocated) sekaligus performa CSS statis.

Alternatif yang kini lebih umum: pakai Tailwind murni di markup dan simpan CSS-in-JS hanya untuk kasus yang benar-benar butuh logika runtime seperti theming dinamis. Episode 6 sudah membahas theming dinamis dengan CSS variables — sering kali itu cukup, tanpa perlu CSS-in-JS sama sekali.

#Penutup

Episode 18 memetakan integrasi Tailwind di framework modern: Next.js App Router, Vite, SvelteKit, Astro, Remix, plus koeksistensi dengan CSS-in-JS memakai twin.macro atau pendekatan hybrid yang lebih ringan.

Inti yang harus dibawa pulang:

Semua framework menghasilkan CSS statis yang sama; bedanya hanya tempat import dan content.
Next.js: import global.css di layout root; content mencakup .mdx.
Vite 4 memakai plugin resmi @tailwindcss/vite.
SvelteKit butuh .svelte di glob content; Astro butuh .astro dan .md.
twin.macro menggabungkan ergonomi CSS-in-JS dengan CSS statis.
CSS variables sering cukup untuk theming dinamis, tanpa CSS-in-JS.

Di episode 19 selanjutnya kita akan membahas component libraries & headless UI patterns — membangun komponen accessible dengan Headless UI, Radix, dan Tailwind UI, serta mendokumentasikan komponen memakai Storybook.