Back to Details

tw-mantine

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Tailwind CSS v4 + Mantine v8 Integration

Tailwind CSS v4 + Mantine v8 整合指南

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
本技能提供在Next.js中整合Tailwind CSS v4与Mantine v8的完整指南。这种组合能够实现：
  • Tailwind: 实用优先的CSS，用于快速且一致的样式设计
  • Mantine: 功能丰富的React组件，内置无障碍支持

Quick Start

快速开始

1. Install Dependencies

1. 安装依赖

bash
npm install @mantine/core @mantine/hooks @mantine/form @mantine/modals @mantine/notifications
npm install -D tailwindcss @tailwindcss/postcss
npm install tailwind-merge clsx
bash
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

2. 配置PostCSS

Create 
postcss.config.mjs
:
javascript
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;
创建
postcss.config.mjs
：
javascript
const config = {
  plugins: {
    "@tailwindcss/postcss": {},
  },
};

export default config;

3. Setup Global CSS

3. 配置全局CSS

Untuk detail setup lengkap, lihat:
  • App Router: references/app-router-setup.md
  • Pages Router: references/pages-router-setup.md
如需完整搭建细节，请查看：
  • App Router: references/app-router-setup.md
  • Pages Router: references/pages-router-setup.md

Integration Patterns

整合模式

Pattern 1: classNames Prop (Recommended)

模式1：classNames属性（推荐）

Gunakan 
classNames
prop untuk menerapkan utility classes Tailwind ke bagian spesifik komponen Mantine:
tsx
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>
  );
}
使用
classNames
属性将Tailwind工具类应用到Mantine组件的特定部分：
tsx
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

模式2：style属性

Gunakan untuk styling inline sederhana:
tsx
<Button style={{ backgroundColor: 'var(--mantine-color-red-5)' }}>
  Red Button
</Button>
用于简单的内联样式：
tsx
<Button style={{ backgroundColor: 'var(--mantine-color-red-5)' }}>
  Red Button
</Button>

Pattern 3: Global Theme Configuration

模式3：全局主题配置

Konfigurasi classNames di theme untuk semua instance komponen:
tsx
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>
  );
}
在主题中定义全局classNames，以确保所有组件实例的一致性：
tsx
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}>
      {/* 所有按钮都将拥有Tailwind阴影效果 */}
    </MantineProvider>
  );
}

Dark Mode Integration

深色模式整合

Tailwind v4 dan Mantine v8 mendukung dark mode secara native. Implementasikan dengan:
Tailwind v4与Mantine v8原生支持深色模式。实现方式如下：

CSS Setup

CSS配置

css
@import "tailwindcss";

/* Tailwind will automatically detect dark mode from prefers-color-scheme */
css
@import "tailwindcss";

/* Tailwind将自动从系统的prefers-color-scheme检测深色模式 */

Component Usage

组件使用

tsx
<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>
tsx
<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

Mantine配色方案

MantineProvider secara otomatis mengikuti sistem color scheme. Tidak perlu konfigurasi tambahan.
MantineProvider会自动跟随系统配色方案，无需额外配置。

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
使用
assets/templates/components/
中的组件模板：
  • HybridButton: 带有Tailwind悬停效果和阴影的按钮
  • HybridCard: 带有flex布局和响应式间距的卡片
  • HybridModal: 使用Tailwind自定义样式的模态框
  • HybridTextInput: 带有焦点和错误状态样式的输入框

Common Selectors Reference

常用选择器参考

Setiap komponen Mantine memiliki selectors internal yang dapat di-styling:
ComponentSelectors
Button
root
, 
inner
, 
label
, 
section
TextInput
root
, 
input
, 
label
, 
error
, 
description
Card
root
, 
section
Modal
root
, 
header
, 
body
, 
overlay
Select
root
, 
input
, 
dropdown
, 
options
Lihat references/integration-patterns.md untuk daftar lengkap.
每个Mantine组件都有可用于样式定制的内部选择器：
组件选择器
Button
root
, 
inner
, 
label
, 
section
TextInput
root
, 
input
, 
label
, 
error
, 
description
Card
root
, 
section
Modal
root
, 
header
, 
body
, 
overlay
Select
root
, 
input
, 
dropdown
, 
options
查看references/integration-patterns.md获取完整列表。

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
  • 使用
    classNames
    处理复杂样式（悬停、焦点、过渡效果）
  • 使用
    style
    属性处理简单内联样式
  • 在主题中定义全局classNames以保证一致性
  • 使用
    tailwind-merge
    和
    clsx
    动态合并类名

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
  • 不要使用
    sx
    属性（在Mantine 7+中已废弃）
  • 避免Tailwind与Mantine默认样式冲突
  • 除非必要，否则不要覆盖Mantine的CSS变量

Troubleshooting

故障排除

Classes tidak diterapkan

类未生效

  • Pastikan Tailwind CSS diimport di global CSS
  • Periksa spesifisitas selector CSS
  • Gunakan 
    !important
    hanya jika benar-benar diperlukan
  • 确保已在全局CSS中导入Tailwind CSS
  • 检查CSS选择器的优先级
  • 仅在必要时使用
    !important

Style conflicts

样式冲突

  • Mantine menggunakan CSS variables, prioritaskan utility Tailwind untuk override
  • Gunakan 
    classNames
    untuk targeting selector spesifik
  • Mantine使用CSS变量，优先使用Tailwind工具类进行覆盖
  • 使用
    classNames
    定位特定选择器

Resources

资源

  • Tailwind v4 Guide
  • Mantine v8 Guide
  • Integration Patterns
  • App Router Setup
  • Pages Router Setup
  • Tailwind v4指南
  • Mantine v8指南
  • 整合模式
  • App Router搭建
  • Pages Router搭建