如何覆盖TailWind默认Preflight中img与svg标签的设置？

当然可以覆盖Tailwind默认给img和svg元素设置的display: block行为，以下是几种可行方案：

方法一：添加全局自定义样式 #

在项目的全局样式文件（比如src/index.css）里，放在Tailwind指令之后添加自定义样式，这样会覆盖Preflight的默认规则：

@tailwind base;
@tailwind components;
@tailwind utilities;

/* 覆盖img和svg的默认display属性 */
img, svg {
  display: inline;
}

方法二：通过配置修改Preflight #

如果需要更灵活的控制，可以先禁用默认Preflight，再按需自定义基础样式：
修改你的tailwind.config.js：

module.exports = {
  content: ["./src/**/*.{js,jsx,ts,tsx}"],
  // 关闭默认Preflight
  corePlugins: {
    preflight: false,
  },
  theme: {
    extend: {
      backgroundImage: {
        "search-icon": "url('images/search_black.svg')",
      },
      colors: {
        "ef-purple-100": "#ebdbf8", // ...
      },
      borderWidth: {
        6: "6px",
      },
    },
  },
  plugins: [],
};

之后可以在全局样式中手动引入调整后的基础规则，保留Preflight的其他特性，只修改img/svg的display属性。

方法三：内联类名临时调整 #

如果只是个别元素需要改为inline显示，直接给元素加上Tailwind的inline类即可：

<img src="your-image.jpg" class="inline" alt="示例图片">
<svg class="inline">...</svg>

内容的提问来源于stack exchange，提问作者Mladen