PostCSS plugin tries to fix all issues about antd with any others global CSS reset
Note
If your antd version >=5, you can use @layer to fix. Also you may have a quesion: Can I use @layer?
- support antd + TailwindCSS preflight.css
- fix button style conflict, ref: ant-design/ant-design#38794
- support anchor tags with
colorPrimaryunder any antd components
// postcss.config.js
module.exports = {
plugins: {
'tailwindcss': {},
'autoprefixer': {},
'postcss-antd-fixes': {
// Support multiple prefixes, if you do not custom antd class name prefix, it's not necessary option.
prefixes: ['vp-antd', 'ant'],
},
},
}button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}
/* => */
button:where(:not([class^='ant'])),
[type='button']:where(:not([class^='ant'])),
[type='reset']:where(:not([class^='ant'])),
[type='submit']:where(:not([class^='ant'])) {
-webkit-appearance: button; /* 1 */
background-color: transparent; /* 2 */
background-image: none; /* 2 */
}:where([class^='ant']) a {
/* colorPrimary */
color: #1677ff;
text-decoration: none;
}npm run buildnpx changesetnpx changeset versiongit commitnpx changeset publishgit push --follow-tags