TailwindCSS Dynamic Viewport

Extended dynamic viewport support.

Dynamic viewport scaling has been widely supported by most browsers since 2022. It is challenging to provide legacy support for older browsers or browsers that do not support the dynamic viewport units (dvh, lvh, svh) introduced in TailwindCSS v3.4, such as h-dvh, h-lvh, and h-svh. To achieve this, every project would require an additional supplement, leading to lengthy and unnecessary code repetition. The goal of this package is to add this support to TailwindCSS. The package was inspired by the StackOverflow question TailwindCSS fallback for new screen length types such as "dvh", "lvh", "svh".

Installation

Supports

• Vite >=5
• Node >=21

npm install @datarose/tailwindcss-dynamic-viewport --save-dev

Startup

tailwind.config.js

import { dynamicViewport } from '@datarose/tailwindcss-dynamic-viewport'

/** @type {import('tailwindcss').Config} */
export default {
  plugins: [
    dynamicViewport(),
  ],
}

Configurations

No configuration is required. The package detects the TailwindCSS version.

• If it's v3.4 or higher, it only adds support for older browsers by using vh as a fallback value when dvh, lvh, or svh are not supported.
• If it's v3.3 or lower, it also adds the three classes (h-dvh, h-lvh, h-svh) to your project.

Early Access

The package is still very primitive, and we have many more plans for the future. We aim to provide legacy support for all browsers and TailwindCSS versions, ensuring seamless usage of the h-dvh, h-lvh, and h-svh classes, replacing the old h-screen usage.

Open Source Repository

While we haven't opened the plugin's repository to the public yet, we are actively working towards doing so and fostering an active community to improve the package's quality.

License

All rights reserved as specified in the LICENSE file! This project can be considered reusable, copyable, and/or distributable, provided that the original public repository link is included in the source code and made visible to those who use the product that incorporates this source code/package.