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

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: [],
};

CodePudding user response：

Can you set in a .css file :

img, svg {
   display: inline;
}

CodePudding user response：

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: [],
};