3

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?

1 Answer 1

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>
2
  • class=i'nline' is what I am looking for. Apr 29, 2021 at 4: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. Oct 15 at 21:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.