Recently, I am learning vue3, and introduced Tailwind CSS and antDesign Vue third-party components into the project built with Vue3.
When using message, there is a problem that the icon and text style are not aligned in the pop-up box.
Directly on the picture:
The icon is lower and not aligned with the text
It is the style of the imported Tailwind CSS that affects the
@tailwind base;
@tailwind components;
@tailwind utilities;After checking their official website, the problem has been solved.
Solution:
Way 1: Disable Tailwind CSS Preflight
// tailwind.config.js
module.exports = {
...
corePlugins: {
preflight: false,
},
}
As for what Preflight is, refer to the official website:
Method 2: In the imported Tailwind CSS style, some basic styles of Tailwind CSS that affect the Ant Design style can be overwritten.
@tailwind base;
@tailwind components;
@tailwind utilities;
// 覆盖影响antd的样式
svg {
vertical-align: initial;
}The above is the solution.
After solving:
