DEV Community

Cover image for Enhance your pwa's ui/ux with tailwindcss-displaymodes Plugin
Jyothikrishna
Jyothikrishna

Posted on • Edited on

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
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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

Speedy emails, satisfied customers

Postmark Image

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay