tailwindcssでテキストをマーカーで引いたようなスタイルを今回は作っていきます!
めちゃくちゃ簡単なので、一瞬で終わります。
目次
前提
- tailwindcssが使える状態であること
実装方法
![](https://engineer-daily.com/wp-content/uploads/2024/07/スクリーンショット-2024-07-18-13.16.44-1024x169.png)
完成系はこんな感じのイメージ。文章の中にマーカーを引くことができます。
ちなみに、改行しても良い感じです。
<span class="bg-blue-100 px-1">青色の文章です。青色の文章です。</span>
<span class="bg-yellow-100 px-1">黄色の文章です。黄色の文章です。</span>
<span class="bg-red-100 px-1">赤色の文章です。赤色の文章です。</span>
コードはこれだけです!!
bg-{color}-100
←{color}の部分をお好きな色にして試してみて下さい。
Customizing Colors を参照するとtailwindcssで使用できるカラーが見れます。
![](https://engineer-daily.com/wp-content/uploads/2024/07/スクリーンショット-2024-07-18-21.38.15-1024x520.png)
まとめ tailwindcss でマーカー風なスタイルを作る(小ネタ)
まとめると、めっちゃ簡単にできました!
tailwind使うと、cssに戻れなくなりそうです。