一些 Tailwind CSS 和 Ant Design Vue 搭配使用的坑

Ant Design Vue Dec 23, 2022

當搭配使用 Tailwind CSS 和 Ant Design Vue,會遇到一些樣式表上的衝突,這裏記錄如下:

Image

由於 Tailwind CSS 將所有的 <img> 元素設置爲 display: block;,而 AImagePreview 中的圖片置中依賴 imgdisplay: inline; 的默認實現,故需要爲 .ant-image-preview-img 手動設置 display: inline;

SVG

當配合使用時,會出現 anticon 在 button 中未豎直居中的情況,為修復該情況,可在全局 CSS 中增加以下內容:

.anticon svg {
    display: block !important;
}

Select

Tailwind 會爲 input 增加 box-shadow 這一屬性。當 ASelect 設置爲可輸入時,需要增加下列代碼以清除 box-shadow

.ant-select-selection-search-input {
    box-shadow: none !important;
}

Tags

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.