I prefer a third-party styles solution, can I use Mantine with it?
All Mantine components are fully compatible with any third-party styling solution and native CSS. There are two main strategies to apply styles with a third-party library:
className
,classNames
,style
andstyles
props- with static selectors, for example
.mantine-Text-root
Example of applying styles with a utility CSS library:
Example of applying styles with global CSS:
You can combine both approaches to achieve desired results, for example,
@emotion/styled
and styled-components
packages will pass className
prop to
a given component, and you can use static selectors to style inner elements:
Is there any specific setup for Tailwind CSS?
Usually it is enough to disable preflight to prevent global styles from affecting Mantine components. If preflight is required in your project, follow one of the guides in the GitHub discussion.