How to create a JavaScript-Free dismissible notification with only Tailwind CSS

Let’s create a JavaScript-free dismissible notification using only Tailwind CSS. This is a great way to add interactivity to your website without using JavaScript.

Why a Dismissible Notification Without JavaScript?

1. Performance Optimization: Reducing reliance on JavaScript can improve page load times and performance, especially for simpler interactions that don’t require complex scripting.

2. Accessibility and Simplicity: Using only CSS ensures that your solution is more accessible and easier to understand for users with limited interaction capabilities. It simplifies the codebase, making it easier to maintain and debug.

3. Reduced Complexity: For static or less interactive sites, adding JavaScript may be overkill. Tailwind CSS provides enough utility classes to create interactive components like notifications without needing additional scripts.

4. Compatibility: CSS-based solutions are universally supported across modern browsers, reducing the risk of compatibility issues that can sometimes arise with JavaScript libraries.

5. Fast Prototyping: Ideal for quickly prototyping features or when working with static content where advanced scripting isn’t necessary.

Use Cases

1. Form Submissions: Displaying success or error messages after form submissions on a static website. Users can dismiss the notification with a simple close button.

2. System Alerts: Informing users of changes or updates in a user interface where JavaScript is not preferred or necessary. For example, a system alert or confirmation message on a simple dashboard.

3. Single-Page Applications (SPAs): In SPAs where JavaScript is heavily used, CSS-only notifications can still be useful for quick messages or confirmations without adding extra JavaScript logic.

4. Educational or Documentation Sites: On documentation or educational sites where instructional messages or alerts are needed. These notifications can guide users or provide feedback without extra scripting.

5. Error Messages: Displaying error or informational messages on static pages or during interactive sessions without the need for dynamic content changes.

Let’s create the notification

This notification is a simple HTML structure that consists of a hidden checkbox, a label for the checkbox, and a notification element that is hidden by default.

The hidden checkbox

The hidden checkbox is used to toggle the visibility of the notification.

Attributes:

• type="checkbox": This is a HTML attribute that specifies the type of input element.
• id="notification-toggle": This is an HTML attribute that specifies the unique identifier of the input element.

Classes:

• hidden: This is a Tailwind CSS utility class that sets the element to be hidden.
• peer: This is a Tailwind CSS utility class that sets the element to be positioned relative to its peer element.

<input type="checkbox" id="notification-toggle" class="hidden peer"/>

The notification wrapper

The notification is visible by default, and we will be able to control its visibility by chekcing the checkbox.

The full markup for the notification

Visual styling classes are omitted for brevity, just can add your own styles or grab the ones from the code file.

• peer-checked:hidden: This is a Tailwind CSS utility class that sets the element to be hidden when the checkbox is checked.

The button to close the notification

The button to close the notification is actually a label, that when clicked, will hide the notification.

Attributes:

• for="notification-toggle": This is an HTML attribute that specifies the id of the checkbox that controls the visibility of the notification.

<label for="notification-toggle">
  <!-- Close button goes here, you can wrtie something or add an SVG icon -->
</label>

```html
<div>
  <!-- Hidden checkbox to control visibility -->
  <input
    type="checkbox"
    id="notification-toggle"
    class="hidden peer"
  />
  <!-- Notification -->
  <div
    class="peer-checked:hidden">
    <div>
      <div>
        <!--Notification icon-->
        <div>
          <!-- Notification content goes here -->
        </div>
        <div>
          <label for="notification-toggle">
            <!-- Close button goes here, you can wrtie something or add an SVG icon -->
          </label>
        </div>
      </div>
    </div>
  </div>
</div>

Conclusion

This is a how you can create a JavaScript-free dismissible notification using only Tailwind CSS, you can also do this with also CSS and call it a day, but if are using Tailwind CSS you can take advantage of the peer and peer-checked:hidden classes to control the notification’s visibility without JavaScript.

Hope you enjoyed this tutorial and have a great day!