bug 截图
图中可以看到 图标靠下了.
(其他地方的 icon 其实都靠下 , 这里用 button 来举例)
解决方案
方案一
在你的 css 中添加css 覆盖掉tw默认的值
@tailwind base;
@layer base {
svg {
display: inline;
vertical-align: baseline;
}
}
@tailwind components;
@tailwind utilities;
方案二:
@tailwind base;
@tailwind components;
@tailwind utilities;
/* 添加下面的代码 */
svg {
vertical-align: baseline;
}
题外话:
禁用 清除浏览器默认样式
设置
preflight: false
这样就不会发生任何冲突了. (手动狗头)
( 不要去删除@tailwind base
, 这样会造成 tw 功能上的一些 bug)
module.exports = {
content: [
"./pages/**/*.{js,ts,jsx,tsx}",
"./src/**/*.{js,ts,jsx,tsx}",
"./components/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
// 添加下面的代码,禁用 `清除浏览器默认样式`
// (这样 `@tailwind base` 就只会添加一些默认的 tw 变量.不会去清除浏览器默认样式了.)
corePlugins: {
preflight: false,
},
};
给工具类加上 !important
覆盖 antd 样式
由于 antd 和 tailwind 都是class, 是同级. 无法达到覆盖的效果, 所以必须加上 !important
工具类就是 @tailwind utilities ,平时写的 w-1 h-full 等等 都是 utilities .
所以 important 只会给自己写的工具类加上,不会影响其他部分
@tailwind components
是一些插件组件之类的, 比如 daisyUI
@tailwind base
是一些 tw 默认变量和清除浏览器默认样式 (可通过 preflight: false 移除).
module.exports = {
// 省略一些代码
// 开启 ( true 或 "#MyBox" ) 具体说明看官方文档
important: true,
};