Ben Borgers

How to do a wavy underline with Tailwind CSS

February 15, 2022

Tailwind CSS has the necessary utility classes to do a wavy text underline, like this:

All you need to do is add the usual underline class, and then add the decoration-wavy class in addition.

For example, these classes produce the image above:

<p class="underline decoration-wavy decoration-cyan-400 text-xl font-bold">
  Hello, world!
</p>

More blog posts

Subscribe to my newsletter for a monthly round-up of new blog posts and projects Iā€™m working on!

Twitter ↗ RSS feed ↗