CODEWITHSUNDEEP
csswebpacklesstailwind-cssant-design-pro
Masih Jahangiri
Masih Jahangiri

Reputation: 10897

How to solve "ant design base css" and "tailwindcss base css" alignments problem? How to avoid antd modifying global styles?

I prefer create project style and components style with tailwind css framework. I want to use a few ant design component. Tailwindcss and ant.design have problems together. Ant design alignment loses when we import @import 'tailwindcss/base' to the project and when we delete it ant design alignment will work fine. ant design modify global styles and according of document I try to prevent this but not work this method for me! My babel.config.js:

['import', { libraryName: 'antd', libraryDirectory: 'es', style: true }],

I add this plugin to my webpack config:

new webpack.NormalModuleReplacementPlugin(
  /node_modules\/antd\/lib\/style\/index\.less/,
  path.resolve(__dirname, './src/antd.less'),
),

and antd.less file:

#antd {
  @import '~antd/es/style/core/index.less';
  @import '~antd/es/style/themes/default.less';
}

Upvotes: 15

Views: 8420

Answers (5)

Yashas
Yashas

Reputation: 999

I first disabled the preflight styles from tailwind by following the instructions on tailwind website.

In your tailwind.config.js file, disable the preflight by adding this code:

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

This worked, and ant design wasn't breaking anymore. But it also removed the essential css reset that came with the preflight. As per the tailwind website, they built the preflight styles on top of modern-normalize. So I just installed that package directly, and everything worked fine.

Upvotes: 0

Rahul Bhooteshwar
Rahul Bhooteshwar

Reputation: 1955

This is how you can use Ant Design along with tailwind css, without conflicting :

Create AntThemeCustomizationProvider component.

import { StyleProvider } from '@ant-design/cssinjs';
import { ConfigProvider } from 'antd';
import React from 'react';

function AntThemeCustomizationProvider({ children }) {
  return (
    <ConfigProvider
      theme={{
        cssVar: true,
        token: {
          // Seed Token
          colorPrimary: '#7855FA',
          borderRadius: 6,
        },
      }}
    >
      {/* Wrap in  StyleProvider so it doesn't conflict with tailwind css */}
      <StyleProvider hashPriority='high'>{children}</StyleProvider>
    </ConfigProvider>
  );
}

export default AntThemeCustomizationProvider;

ConfigProvider is for theme customization StyleProvider is for specifying the priority of Ant styles.

Now wrap your App inside AntThemeCustomizationProvider

 <AntThemeCustomizationProvider>
    <YourAppCode/>
 </AntThemeCustomizationProvider>

changing preflight: false in tailwind.config.js removes important tailwind CSS styles so Ant component will look good but other stuff might break! Avoid doing that!

Tested with "antd": "^5.20.6",

Upvotes: 0

shubh jain
shubh jain

Reputation: 1

    module.exports = {
          content: [
            "./src/**/*. 
        {js,jsx,ts,tsx}",
           ],
          theme: {
             extend: {},
          },
          plugins: [
             // ...
          ],
          corePlugins: {
               preflight: false 
                 // <== disable 
           this!
           },
        }

Upvotes: -1

Arun_Venkata
Arun_Venkata

Reputation: 157

TailwindCSS applies certain base styles to smoothen the cross-browser experience.

Since you are also using Ant Design, which applies some base styles of its own, setting preflight to false in your tailwind config should work:

module.exports = {
  corePlugins: {
    preflight: false,
  }
}

Upvotes: 14

TripleJ
TripleJ

Reputation: 151

I would recommend overriding some of Tailwind's base styles that are causing problems with Ant Design. For me, Ant Design icons did not have the correct vertical alignment when including Tailwind, so I replaced their default svg style in my global css file.

@tailwind base;

/* Override base SVG style to work with Ant Design */
svg {
  vertical-align: initial;
}

Upvotes: 15

Related Questions