Loading...
Loading...
Integrasi Tailwind CSS v4 dengan Mantine v8 untuk Next.js. Gunakan skill ini ketika: (1) Membuat komponen UI yang menggabungkan utility classes Tailwind dengan komponen Mantine, (2) Mengkonfigurasi project Next.js dengan Tailwind v4 dan Mantine v8, (3) Mengimplementasikan dark mode yang konsisten antara Tailwind dan Mantine, (4) Membuat custom theme atau styling untuk komponen Mantine menggunakan Tailwind classes, (5) Setup project dengan App Router atau Pages Router.
npx skill4agent add ray123fa/agentskills tw-mantinenpm install @mantine/core @mantine/hooks @mantine/form @mantine/modals @mantine/notifications
npm install -D tailwindcss @tailwindcss/postcss
npm install tailwind-merge clsxpostcss.config.mjsconst config = {
plugins: {
"@tailwindcss/postcss": {},
},
};
export default config;classNamesimport { 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>
);
}<Button style={{ backgroundColor: 'var(--mantine-color-red-5)' }}>
Red Button
</Button>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>
);
}@import "tailwindcss";
/* Tailwind will automatically detect dark mode from prefers-color-scheme */<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>assets/templates/components/| Component | Selectors |
|---|---|
| Button | |
| TextInput | |
| Card | |
| Modal | |
| Select | |
classNamesstyletailwind-mergeclsxsx!importantclassNames