Lesson #3 of 8 in Making Tailwind Components

Making Alerts with Tailwind CSS

Making Alerts with Tailwind CSS

Alerts are used to draw attention to a particular item that you want your users to see. This could be in (but not limited to) a section or a popup. We'll taking Bootstrap's eight alerts as inspiration and creating it using Tailwind CSS.

<div class="p-24 bg-green-500 space-y-5">
   <h3 class="pb-10 font-bold text-4xl text-green-900 text-center">Simple Alerts</h3>
   <!-- simple alerts -->
   <div class="p-5 rounded-lg border border-blue-400 bg-blue-300 text-blue-900">Primary Alert</div>
   <div class="p-5 rounded-lg border border-gray-500 bg-gray-400 text-gray-900">Secondary Alert</div>
   <div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900">Success Alert</div>
   <div class="p-5 rounded-lg border border-red-400 bg-red-300 text-red-900">Danger Alert</div>
   <div class="p-5 rounded-lg border border-yellow-400 bg-yellow-300 text-yellow-900">Warning Alert</div>
   <div class="p-5 rounded-lg border border-blue-200 bg-blue-100 text-blue-900">Info Alert</div>
   <div class="p-5 rounded-lg border border-gray-200 bg-gray-100 text-gray-600">Light Alert</div>
   <div class="p-5 rounded-lg border border-gray-600 bg-gray-500 text-gray-900">Dark Alert</div>
</div>
<div class="p-24 bg-green-400 space-y-5">
  <h3 class="pb-10 font-bold text-4xl text-green-900 text-center">Headings, Paragraphs, Dividers, and Links</h3>
  <!-- headings, paragraphs, dividers -->
<div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900 divide-y-2 divide-solid divide-green-400">
  <h2 class="font-bold text-xl pb-2">Congratulations!</h2>
  <p class="pt-2">
    You have successfully recreated Bootstrap's alert box in
    <a href="https://tailwindcss.com/" class="font-bold underline">
      Tailwind CSS
    </a>.
  </p>
</div>
  <div class="p-5 rounded-lg border border-yellow-400 bg-yellow-300 text-yellow-900 divide-y-2 divide-solid divide-yellow-400">
    <h2 class="font-bold text-xl pb-2">Warning!</h2>
    <p class="pt-2">May cause excessive fun when using <a href="https://tailwindcss.com/" class="font-bold underline">Tailwind CSS</a>.</p>
  </div>
</div>
<div class="p-24 bg-green-800 space-y-5">
  <h3 class="pb-10 font-bold text-4xl text-green-200 text-center">Adding Icons on Alerts</h3>
  <!-- adding icons -->
  <div class="p-5 rounded-lg border border-blue-400 bg-blue-300 text-blue-900 flex">
    <span class="mr-2">
      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
    </span>
      Primary Alert
   </div>
   <div class="p-5 rounded-lg border border-gray-500 bg-gray-400 text-gray-900 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
      </span>
      Secondary Alert
   </div>
   <div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5" />
         </svg>
      </span>
      Success Alert
   </div>
   <div class="p-5 rounded-lg border border-red-400 bg-red-300 text-red-900 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
      </span>
      Danger Alert
   </div>
   <div class="p-5 rounded-lg border border-yellow-400 bg-yellow-300 text-yellow-900 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
         </svg>
      </span>
      Warning Alert
   </div>
   <div class="p-5 rounded-lg border border-blue-200 bg-blue-100 text-blue-900 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
      </span>
      Info Alert
   </div>
   <div class="p-5 rounded-lg border border-gray-200 bg-gray-100 text-gray-600 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
         </svg>
      </span>
      Light Alert
   </div>
   <div class="p-5 rounded-lg border border-gray-600 bg-gray-500 text-gray-900 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" />
         </svg>
      </span>
      Dark Alert
   </div>
</div>

These alerts are made of a solid box with text color that matches the background color of the alert.

In Tailwind, we'll start by making the alert box

  • w-full: Allows the alert to take full width of the parent div
  • rounded-lg: Slightly rounds the border radius.
  • p-5: Increases the padding for space between the text and the edge of the alert
HTML
<div class="p-5 rounded-lg"></div>

Boostrap's popularity comes from it's prebuilt components and their alerts comes with eight predefiend colors that correspond to each different alert.

  • Primary, blue
  • Secondary, light gray
  • Success, green
  • Danger, red
  • Warning, yellow
  • Info, teal
  • Light, lightest gray
  • Dark, medium gray
Bootstrap Alerts

We can use these colors in Tailwind's alerts by customizing its border-{color}, bg-{color], and text-{color} classes.

html
<div class="border border-blue-400 bg-blue-300 text-blue-900">
  Primary Alert
</div>

<div class="border border-gray-500 bg-gray-400 text-gray-900">
  Secondary Alert
</div>

<div class="border border-green-400 bg-green-300 text-green-900">
  Success Alert
</div>

<div class="border border-red-400 bg-red-300 text-red-900">Danger Alert</div>

<div class="border border-yellow-400 bg-yellow-300 text-yellow-900">
  Warning Alert
</div>

<div class="border border-blue-300 bg-blue-200 text-blue-900">Info Alert</div>

<div class="border border-gray-200 bg-gray-100 text-gray-600">Light Alert</div>

<div class="border border-gray-600 bg-gray-500 text-gray-900">Dark Alert</div>
<div class="p-24 bg-green-500 space-y-5">
   <h3 class="pb-10 font-bold text-4xl text-green-900 text-center">Simple Alerts</h3>
   <div class="p-5 rounded-lg border border-blue-400 bg-blue-300 text-blue-900">Primary Alert</div>
   <div class="p-5 rounded-lg border border-gray-500 bg-gray-400 text-gray-900">Secondary Alert</div>
   <div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900">Success Alert</div>
   <div class="p-5 rounded-lg border border-red-400 bg-red-300 text-red-900">Danger Alert</div>
   <div class="p-5 rounded-lg border border-yellow-400 bg-yellow-300 text-yellow-900">Warning Alert</div>
   <div class="p-5 rounded-lg border border-blue-300 bg-blue-200 text-blue-900">Info Alert</div>
   <div class="p-5 rounded-lg border border-gray-200 bg-gray-100 text-gray-600">Light Alert</div>
   <div class="p-5 rounded-lg border border-gray-600 bg-gray-500 text-gray-900">Dark Alert</div>
</div>

Cusomizing the text inside alerts can be fun! We'll use Tailwind's custom classes to add headers, paragraphs, dividers and links.

We'll start to build on the success alert. The content or text of the alert will go inside of the alert div.

HTML
<div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900">

<!-- content goes here -->

</div>

When adding headings and paragraphs to your alert, use the basic html heading tags (h1, h2, h3, etc.) and paragraph tags (p).

These are the Tailwind classes for our heading and paragraph to create the body of our alert.

  • font-bold: Increases the heading's font weight of the text.
  • text-xl: Increases the heading's text size.
  • pb-2 & pt-2: Increases the heading and paragraph's padding bottom and top respectively.
html
<div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900">
  <h2 class="font-bold text-xl pb-2">Congratulations!</h2>
  <p class="pt-2">
    You have successfully recreated Bootstrap's alert box in Tailwind CSS.
  </p>
</div>
<div class="p-24 h-screen bg-green-400 space-y-5">
   <div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900">
      <h2 class="font-bold text-xl pb-2">Congratulations!</h2>
      <p class="pt-2">You have successfully recreated Bootstrap's alert box in Tailwind CSS.</p>
   </div>
</div>

Dividers are very useful to create a separation between sections. In this case, we're going to separate our heading from our paragraph. Tailwind actually has a class for this called divide. By adding this class to the alert div, a divider will be created to separate each child.

html
<div class="divide-y-2 divide-solid divide-green-400">
  <h2>Congratulations!</h2>
  <p>You have successfully recreated Bootstrap's alert box in Tailwind CSS.</p>
</div>
<div class="p-24 h-screen bg-green-400 space-y-5">
   <div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900 divide-y-2 divide-solid divide-green-400">
      <h2 class="font-bold text-xl pb-2">Congratulations!</h2>
      <p class="pt-2">You have successfully recreated Bootstrap's alert box in Tailwind CSS.</p>
   </div>
</div>

To add a link in your alert, simply add an <a> tag to route your link. I'm going to link "Tailwind CSS" by adding the <a> tag inside of the paragraph and increasing the font weight and underlining the link text.

HTML
<a href="https://tailwindcss.com/" class="font-bold underline">Tailwind CSS</a>

Take a look at our completed alert with the heading, paragraph, divder, and link! You can also use different alert boxes to suit the style you're looking for or completely change out the color to fit your needs.

<div class="p-24 bg-green-400 space-y-5">
   <div class="p-5 rounded-lg border border-green-400 bg-green-300 text-green-900 divide-y-2 divide-solid divide-green-400">
      <h2 class="font-bold text-xl pb-2">Congratulations!</h2>
      <p class="pt-2">You have successfully recreated Bootstrap's alert box in <a href="https://tailwindcss.com/" class="font-bold underline">Tailwind CSS</a>.</p>
   </div>
   <div class="p-5 rounded-lg border border-yellow-400 bg-yellow-300 text-yellow-900 divide-y-2 divide-solid divide-yellow-400">
      <h2 class="font-bold text-xl pb-2">Warning!</h2>
      <p class="pt-2">May cause excessive fun when using <a href="https://tailwindcss.com/" class="font-bold underline">Tailwind CSS</a>.</p>
   </div>
</div>

Icons is a strong visual identifier for text. We see it almost regularly. It's also a fun way to vamp up text, especially alerts.

Tailwind offers heroicons which are free to use and created with high SVG quality. You can find all sorts of icons here.

☝️Pro Tip
Use SVG for high quality vector images. It supports scalability without losing its quality.

We'll use the danger alert as an example. To add icons inline with the alert text, we'll have to first create a span which allows us to cusomize a part of a text.

The span will go inside of the alert div and in front of the text, "Danger Alert." To create a little spacing between the icon and the text, we'll add mr-2 to give a right margin of 0.5rem.

HTML
<div class="p-5 rounded-lg border border-red-400 bg-red-300 text-red-900 flex">
  <span class="mr-2">

  <!-- icon will go here -->

  </span>
  Danger Alert
</div>

Heroicons consists of two types of icons to choose from: outline or solid. Icons are searchable and have the option to copy the icon as a SVG or JSX.

We'll search for an exclamation mark.

Searching heroicons

After finding which icon to use, we'll hover and copy the SVG right into the clipboard. Then, paste the copied SVG into our span.


  <div class="p-24 h-screen bg-green-800 space-y-5">
    <div class="p-5 rounded-lg border border-red-400 bg-red-300 text-red-900 flex">
      <span class="mr-2">
         <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
         </svg>
      </span>
      Danger Alert
    </div>
  </div>

Access to alerts is very important. After all, an alert communicates key information to the user. For example, a field on a form filled out incorrectly, a session that is expiring, a lost connection or error pages, etc.

The way we can make our alert messages accesible for testing or for users who are visually impaired or use screen readers is to add role="alert" to the parent div of the alert or the text of the key information itself.

HTML
    <p role="alert" class="p-5 rounded-lg border border-red-400 bg-red-300 text-red-900 flex">
      Your session is expiring.
    </p>

And look what we did! We learned to create alerts, add text in them with headings and paragraphs, add links, dividers and icons. All in Tailwind!

Alert boxes can really help to move users' eyes anywhere you feel needs attention. Bootstrap predefined alert boxes are awesome and Tailwind just made it easy to replicate with custom classes.

I hope you had fun! Want to learn more about Tailwind CSS? Check out Better Dev's Getting Started with Tailwind course.

Lynne

Lynne

Lynne Buencamino is an UI/UX Designer. Solves problems to create purposeful designs. Enjoys finding that perfect mesh between business goals and user experience.

Comments

What did you think of the article? Let us know!
(these comments are powered by GitHub issues and use 0 trackers)