Enhance your pwa's ui/ux with tailwindcss-displaymodes Plugin

Introduction

Have you ever wanted to dynamically adjust content and customize the visibility of UI elements based on the display mode of a website? Look no further! I'm thrilled to introduce you to the tailwindcss-displaymodes plugin, a powerful extension for Tailwind CSS that simplifies responsive web design by providing additional variants for specific display modes.

In this article, we'll explore how this plugin can revolutionize your development process and help you create adaptive user experiences effortlessly.

Motivation

Throughout my journey as a developer, I faced a particular challenge when building a Progressive Web App (PWA). I needed a seamless way to modify content and adjust styles of an UI element based on different display modes. Despite searching for a Tailwind CSS plugin that offered this functionality, I couldn't find a suitable solution. Realizing the potential benefits for fellow developers facing the same dilemma, I embarked on a mission to create tailwindcss-displaymodes.

Understanding Display Modes

The tailwindcss-displaymodes plugin supports four display modes: standalone, minimal-ui, browser, and fullscreen.
For a detailed understanding of the functionality of each display mode, you can refer to the documentation available on MDN.

Installing the plugin

Run the following command to add this plugin to your project.

npm i tailwindcss-diaplaymodes

Now register this plugin in your tailwind.config.js/ts file.

// tailwind.config.js
module.exports = {
  // ...
  plugins: [
    // ...
    require('tailwindcss-displaymodes'),
  ],
};

Leveraging Display Mode Variants

One of the common challenges in building Progressive Web Apps (PWAs) is deciding what to show as the root URL, especially when it serves as a landing page that highlights the capabilities of your app. However, once users have installed your PWA on their mobile devices or desktops, you may not want to continuously show them the landing page. With this plugin, achieving this level of control becomes effortless.

By utilizing the display mode variants offered by the plugin, you can easily hide your landing page for users who have already installed your PWA. Instead, you can present them with quick links to navigate directly to specific sections or even show them their personalized dashboard upon launch.

This flexibility allows you to tailor the experience based on the user's device and their interaction history with your app.

These display modes variants act just like normal variants like hover: or focus: in tailwind. So if you add standalone:hidden class to an element then that element gets hidden when a user opens your pwa after installing.

<div class="standalone:hidden">
  This content will be hidden in standalone mode.
</div>

You can find a working demo on Hex Cal, a pwa that I am currently working on. And here is the source code.

Conclusion

With the this plugin, you have a powerful tool at your disposal to create responsive websites that seamlessly adapt to various display modes. Say goodbye to manual adjustments and hello to a more efficient development workflow.

Remember, in the world of modern web development, delivering exceptional user experiences across different devices and display modes is crucial. With tailwindcss-displaymodes, you're equipped with the right tools to accomplish just that.

Happy Hacking