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!

Subscribe to my newsletter!

A weekly round-up of new blog posts and updates to projects I’m working on.