开发者

How to override the default TailWind preflight setup for img and svg tags?

Based on the official TailWind docs, img 开发者_开发知识库and svg (and some other) elements use display: block. Is there a way to override this default behavior so that I change it to display: inline?

My project is quite new, so tailwind.config.js file looks like this:

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


Can you set in a .css file :

img, svg {
   display: inline;
}


Please try with this:

<style module>
img, svg {
   display: inline;
}
</style>

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

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜