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: [],
};
精彩评论