Using Tailwind CSS

<!doctype html>
  <meta charset="UTF-8" />
  <link href="tailwind.css" rel="stylesheet">
<p>With TailwindCss before<img src='at.png'>after.com</p>


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


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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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