https://github.com/yunsii/postcss-antd-fixes
PostCSS plugin tries to fix all issues about antd with any others global CSS reset
https://github.com/yunsii/postcss-antd-fixes
ant-design antd postcss postcss-plugin tailwindcss
Last synced: 7 months ago
JSON representation
PostCSS plugin tries to fix all issues about antd with any others global CSS reset
- Host: GitHub
- URL: https://github.com/yunsii/postcss-antd-fixes
- Owner: yunsii
- License: mit
- Created: 2023-08-16T12:57:33.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2024-07-04T13:42:40.000Z (over 1 year ago)
- Last Synced: 2025-08-13T15:36:11.837Z (7 months ago)
- Topics: ant-design, antd, postcss, postcss-plugin, tailwindcss
- Language: TypeScript
- Homepage: https://stackblitz.com/edit/postcss-antd-fixes?file=postcss.config.js
- Size: 290 KB
- Stars: 34
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# postcss-antd-fixes
[](https://www.npmjs.com/package/postcss-antd-fixes) [](https://www.npmjs.com/package/postcss-antd-fixes)
PostCSS plugin tries to fix all issues about [antd](https://www.npmjs.com/package/antd) with any others global CSS reset
## Features
> [!Note]
> If your antd version >=5, you can use [`@layer`](https://ant.design/docs/react/compatible-style#tailwindcss-arrange-layer) to fix. Also you may have a quesion: [Can I use `@layer`?](https://caniuse.com/?search=%40layer)
- support antd + [TailwindCSS preflight.css](https://github.com/tailwindlabs/tailwindcss/blob/master/src/css/preflight.css)
- fix button style conflict, ref: [ant-design/ant-design#38794](https://github.com/ant-design/ant-design/issues/38794)
- support anchor tags with `colorPrimary` under any antd components
## Usage
```js
// 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'],
},
},
}
```
## Transforms
### Transform `button` styles
```css
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 */
}
```
### Add `anchor` styles
```css
:where([class^='ant']) a {
/* colorPrimary */
color: #1677ff;
text-decoration: none;
}
```
## Build & Publish
- `npm run build`
- `npx changeset`
- `npx changeset version`
- `git commit`
- `npx changeset publish`
- `git push --follow-tags`
> [`changeset` prerelease doc](https://github.com/changesets/changesets/blob/main/docs/prereleases.md)
## License
[MIT](./LICENSE) License © 2023 [Yuns](https://github.com/yunsii)