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

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

Image

由於 Tailwind CSS 將所有的 <img> 元素設置爲 display: block;，而 AImagePreview 中的圖片置中依賴 img 爲 display: 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

• Ant Design Vue
• Frontend
• Vue.js
• Tailwind CSS