{"id":22184989,"url":"https://github.com/songkeys/tailwind-preset-mantine","last_synced_at":"2025-10-04T18:47:55.713Z","repository":{"id":258082439,"uuid":"864053605","full_name":"songkeys/tailwind-preset-mantine","owner":"songkeys","description":"A Tailwind CSS preset for seamless integration with Mantine UI components.","archived":false,"fork":false,"pushed_at":"2025-09-20T11:14:42.000Z","size":100,"stargazers_count":146,"open_issues_count":3,"forks_count":7,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-10-03T14:53:22.152Z","etag":null,"topics":["mantine","tailwind","tailwind-presets"],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/songkeys.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2024-09-27T12:05:42.000Z","updated_at":"2025-10-03T00:57:24.000Z","dependencies_parsed_at":"2025-02-07T12:09:16.054Z","dependency_job_id":"98c61c8a-9c51-4701-a81b-d58a791a8555","html_url":"https://github.com/songkeys/tailwind-preset-mantine","commit_stats":null,"previous_names":["songkeys/tailwind-preset-mantine"],"tags_count":27,"template":false,"template_full_name":null,"purl":"pkg:github/songkeys/tailwind-preset-mantine","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songkeys%2Ftailwind-preset-mantine","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songkeys%2Ftailwind-preset-mantine/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songkeys%2Ftailwind-preset-mantine/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songkeys%2Ftailwind-preset-mantine/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/songkeys","download_url":"https://codeload.github.com/songkeys/tailwind-preset-mantine/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/songkeys%2Ftailwind-preset-mantine/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278358473,"owners_count":25973946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-04T02:00:05.491Z","response_time":63,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["mantine","tailwind","tailwind-presets"],"created_at":"2024-12-02T10:14:41.979Z","updated_at":"2025-10-04T18:47:55.665Z","avatar_url":"https://github.com/songkeys.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwind-preset-mantine\n\n[![npm version](https://img.shields.io/npm/v/tailwind-preset-mantine.svg)](https://www.npmjs.com/package/tailwind-preset-mantine)\n\nA [Tailwind CSS (v4)](https://tailwindcss.com/) preset for seamless integration with [Mantine UI (v7 or v8)](https://mantine.dev/).\n\n## Compatibility\n\n| Tailwind CSS Version | Mantine Version | Preset Version |\n|---------------------|-----------------|----------------|\n| v4                  | v7 or v8        | v3 (current)   |\n| v4                  | v7 or v8        | v2             |\n| v3                  | v7 or v8        | ([v1](https://github.com/songkeys/tailwind-preset-mantine/tree/v1))* |\n\n*Note: you can still use v1 for Tailwind CSS V4 via [`@config`](https://tailwindcss.com/docs/upgrade-guide#using-a-javascript-config-file) directive.\n\n## Installation\n\n```bash\nnpm install tailwind-preset-mantine\n```\n\nRefer to [Tailwind Installation](https://tailwindcss.com/docs/installation/) for the rest of requirements to install tailwind depends on your project setup or framework.\n\n## Usage\n\n### Default mantine theme\n\n1. All-in-one import (recommended)\n\nWhen importing the styles, instead of importing the tailwind css file, importing this preset in the css file:\n\n```css\n@import \"tailwind-preset-mantine\";\n```\n\nThat's it!\n\nNow you can use tailwind with mantine's style applied:\n\n```tsx\nimport { Button } from '@mantine/core';\n\nexport default function Page() {\n\t// `bg-red-500` will be `background-color: var(--mantine-color-red-5)`\n\t// `text-white` will be `color: var(--mantine-color-white)`\n\treturn \u003cButton className=\"bg-red-500 text-white\"\u003eHello\u003c/Button\u003e\n}\n```\n\n2. Manual import (advanced)\n\nNote that you don't have to import tailwind or mantine styles, this preset will handle that for you. If you want to import it yourself, you can use the `./theme.css` file:\n\n```css\n@layer theme, base, mantine, components, utilities;\n@import \"tailwindcss/theme.css\" layer(theme);\n@import \"tailwindcss/preflight.css\" layer(base);\n@import \"tailwindcss/utilities.css\" layer(utilities);\n\n@import \"@mantine/core/styles.layer.css\";\n\n@import \"tailwind-preset-mantine/theme.css\"; /* \u003c-- import the preset */\n```\n\n\u003e What's `@layer`?\n\u003e\n\u003e Note that here we setup tailwind slightly different from [the official docs](https://arc.net/l/quote/vtfxbocq). We use the [CSS `@layer` directive](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) to control the order of the css. This is because we want to make sure that the mantine styles doesn't get overridden by tailwind reset (base). In this case, the order is `theme -\u003e base -\u003e mantine -\u003e components -\u003e utilities`.\n\n### Custom mantine theme\n\nIf you have a custom mantine theme (\u003chttps://mantine.dev/theming/theme-object/\u003e), you can create a theme file using `@mantine/core`'s `createTheme` function and generate the CSS using our CLI:\n\n1. Create a theme file (e.g., `theme.js`):\n\n```js\nimport { createTheme } from \"@mantine/core\";\n\nconst theme = createTheme({\n  colors: {\n    // your custom colors\n    \"brand-blue\": [\n      \"#e6f7ff\",\n      \"#bae7ff\",\n      \"#91d5ff\",\n      \"#69c0ff\",\n      \"#40a9ff\",\n      \"#1890ff\",\n      \"#096dd9\",\n      \"#0050b3\",\n      \"#003a8c\",\n      \"#002766\",\n    ],\n  },\n  breakpoints: {\n    // your custom breakpoints\n    xs: \"360px\",\n    sm: \"480px\",\n    md: \"768px\",\n    lg: \"960px\",\n    xl: \"1200px\",\n  },\n  // other theme customizations\n});\n\nexport default theme;\n```\n\n2. Generate the CSS using our CLI:\n\n```bash\nnpx tailwind-preset-mantine theme.js -o theme.css\n```\n\nOptions:\n- `-o, --output`: Output file name/location (default: \"theme.css\")\n\n3. Import the generated CSS file in your application:\n\n```css\n@import \"tailwind-preset-mantine\";\n@import \"./theme.css\"; /* \u003c-- add the generated theme */\n```\n\n## Minimal template\n\nHere's a minimal template that you can use to get started:\n\n\u003chttps://github.com/songkeys/next-app-mantine-tailwind-template\u003e\n\n## License\n\nMIT\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsongkeys%2Ftailwind-preset-mantine","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsongkeys%2Ftailwind-preset-mantine","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsongkeys%2Ftailwind-preset-mantine/lists"}