Webmasters Stack Exchange is a question and answer site for webmasters. It only takes a minute to sign up.
Sign up to join this community
Using Tailwind CSS
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<link href="tailwind.css" rel="stylesheet">
</head>
<body>
<p>With TailwindCss before<img src='at.png'>after.com</p>
</body>
</html>
Produces:
with the link removed:
<link href="tailwind.css" rel="stylesheet">
it produces:
What is needed to get the Tailwind CSS version to match the original where the text and image are on the same line?
They must include a rule to make images display as block elements. The rule would look something like:
img {display:block}
If you wanted to override this, you could include your own custom rule to set images back to inline display:
img {display:inline}
Alternately, you could use a tailwinds defined class on your image to make that particular image inline:
<p>With TailwindCss before<img class=inline src='at.png'>after.com</p>
img tags ... and all svg, video, canvas, audio, iframe, embed, and object tags ... to be display:block. You can find the code in node_modules/tailwindcss/src/css/preflight.css.
Oct 15 at 21:47