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

當搭配使用 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;
}