文繞圖為實務上常見需求，若只使用 <img> 與 <div>，則 <img> 與 <div> 會各自一行顯示，可使用 Tailwind CSS 對 <img>設定 float-left 達成文繞圖。
Version
Tailwind CSS 2.0.2
Text with Image
一行圖片一行文字，沒有達成文繞圖。
<template>
<img src="https://picsum.photos/300/200/?random=10">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet consectetur.ipsum dolor sit amet consectetur.</p>
<img src="https://picsum.photos/300/200/?random=10">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet consectetur.ipsum dolor sit amet consectetur.</p>
</template>
<img> 在 <div> 之前且沒有搭配任何 CSS，由於 <div> 是 block element，因此文字會換行，無法達成文繞圖。
float-left
希望能文繞圖，且將圖片放在文字左側或右側。
<template>
<img class="float-left mx-1 mt-1" src="https://picsum.photos/300/200/?random=10">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet consectetur.ipsum dolor sit amet consectetur.</p>
<img class="float-right mx-1 mt-1" src="https://picsum.photos/300/200/?random=10">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci deserunt laudantium optio, quidem reprehenderit sed soluta vitae? Accusamus aspernatur ea laboriosam modi, nihil obcaecati possimus quam ratione, tempore, tenetur voluptate? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio itaque iusto labore molestiae nostrum totam, voluptatum! Aperiam cum debitis deleniti dolorem error, in labore magnam minus molestias nihil placeat Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium aspernatur aut dignissimos explicabo laboriosam maiores minima necessitatibus numquam odit pariatur placeat possimus qui recusandae rem, sapiente totam ut voluptas. Temporibus!Lorem ipsum dolor sit amet consectetur.ipsum dolor sit amet consectetur.</p>
</template>
第 2 行
<img class="float-left mx-1 mt-1" src="https://picsum.photos/300/200/?random=10">
float-left：圖片的空間會消失，變成浮在畫面左側，因此達成文繞圖mx-1：設定水平 margin，讓圖片與文字有間隔增加美觀mt-1：設定 top margin，讓圖片與文字有間隔增加美觀
Conclusion
- 當設定文繞圖時，別忘了
<img>要放在<div>之前