4

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 Tailwind CSS

with the link removed:

<link href="tailwind.css" rel="stylesheet">

it produces:

Without Tailwind CSS

What is needed to get the Tailwind CSS version to match the original where the text and image are on the same line?

CW Holeman II
  • 155
  • 1
  • 1
  • 7

1 Answers1

6

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>
Stephen Ostermiller
  • 98,758
  • 18
  • 137
  • 361
  • class=i'nline' is what I am looking for. – CW Holeman II Apr 29 '21 at 04:20
  • Just to clarify, Tailwind does (quite rudely) change all 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. – machineghost Oct 15 '23 at 21:47