Tailwind CSS v4 + Mantine v8 Integration

Overview

Skill ini menyediakan panduan lengkap untuk mengintegrasikan Tailwind CSS v4 dengan Mantine v8 di Next.js. Kombinasi ini memungkinkan:

• Tailwind: Utility-first CSS untuk styling cepat dan konsisten
• Mantine: Komponen React feature-rich dengan accessibility built-in

Quick Start

1. Install Dependencies

npm install @mantine/core @mantine/hooks @mantine/form @mantine/modals @mantine/notifications
npm install -D tailwindcss @tailwindcss/postcss
npm install tailwind-merge clsx

2. Setup PostCSS

Create postcss.config.mjs:

const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

3. Setup Global CSS

Untuk detail setup lengkap, lihat:

• App Router: references/app-router-setup.md
• Pages Router: references/pages-router-setup.md

Integration Patterns

Pattern 1: classNames Prop (Recommended)

Gunakan classNames prop untuk menerapkan utility classes Tailwind ke bagian spesifik komponen Mantine:

import { Button } from '@mantine/core';

function HybridButton() {
  return (
    <Button
      classNames={{
        root: 'hover:scale-105 transition-transform duration-200 shadow-lg',
        label: 'font-semibold tracking-wide',
      }}
    >
      Click Me
    </Button>
  );
}

Pattern 2: style Prop

Gunakan untuk styling inline sederhana:

<Button style={{ backgroundColor: 'var(--mantine-color-red-5)' }}>
  Red Button
</Button>

Pattern 3: Global Theme Configuration

Konfigurasi classNames di theme untuk semua instance komponen:

import { createTheme, MantineProvider } from '@mantine/core';

const theme = createTheme({
  components: {
    Button: Button.extend({
      classNames: {
        root: 'shadow-md hover:shadow-lg transition-shadow',
      },
    }),
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      {/* All buttons will have Tailwind shadows */}
    </MantineProvider>
  );
}

Dark Mode Integration

Tailwind v4 dan Mantine v8 mendukung dark mode secara native. Implementasikan dengan:

CSS Setup

@import "tailwindcss";

/* Tailwind will automatically detect dark mode from prefers-color-scheme */

Component Usage

<div className="bg-white dark:bg-gray-800 rounded-lg p-6">
  <h3 className="text-gray-900 dark:text-white">Title</h3>
  <p className="text-gray-500 dark:text-gray-400">Description</p>
</div>

Mantine Color Scheme

MantineProvider secara otomatis mengikuti sistem color scheme. Tidak perlu konfigurasi tambahan.

Reusable Hybrid Components

Gunakan komponen template dari assets/templates/components/:

• HybridButton: Button dengan efek hover dan shadow Tailwind
• HybridCard: Card dengan layout flex dan responsive spacing
• HybridModal: Modal dengan styling custom menggunakan Tailwind
• HybridTextInput: Input dengan styling focus dan error states

Common Selectors Reference

Setiap komponen Mantine memiliki selectors internal yang dapat di-styling:

Lihat references/integration-patterns.md untuk daftar lengkap.

Best Practices

Do’s

• Gunakan classNames untuk styling yang kompleks (hover, focus, transitions)
• Gunakan style prop untuk styling inline sederhana
• Definisikan classNames global di theme untuk konsistensi
• Gunakan tailwind-merge dan clsx untuk menggabungkan classes dinamis

Don’ts

• Jangan gunakan sx prop (deprecated di Mantine 7+)
• Hindari styling yang bertabrakan antara Tailwind dan Mantine defaults
• Jangan override CSS variables Mantine kecuali diperlukan

Troubleshooting

Classes tidak diterapkan

• Pastikan Tailwind CSS diimport di global CSS
• Periksa spesifisitas selector CSS
• Gunakan !important hanya jika benar-benar diperlukan

Style conflicts

• Mantine menggunakan CSS variables, prioritaskan utility Tailwind untuk override
• Gunakan classNames untuk targeting selector spesifik

Resources

• Tailwind v4 Guide
• Mantine v8 Guide
• Integration Patterns
• App Router Setup
• Pages Router Setup