Molecule.dev

← All @molecule/* packages · App templates

@molecule/app-ui-tailwind-glass

Provider bond · ui · App (browser) · v1.0.1 · Apache-2.0

Liquid glass ClassMap extension with backdrop-filter effects

npm install @molecule/app-ui-tailwind-glass

npm · Source on GitHub · Implements @molecule/app-ui

How it works

@molecule/app-ui-tailwind-glass is a provider bond on the app (browser) side: it implements the ui core interface (@molecule/app-ui) with a concrete vendor or library behind it.

Your code calls the core; you wire this provider once at startup. Swapping vendors later is one line in that wiring, not a rewrite.

import { setClassMap } from '@molecule/app-ui'
import { classMap } from '@molecule/app-ui-tailwind-glass'

// Use instead of @molecule/app-ui-tailwind's classMap
setClassMap(classMap)

Works with: @molecule/app-styling, @molecule/app-ui, @molecule/app-ui-tailwind

Reference

Auto-generated, AI-first package reference for the molecule.dev ecosystem. It is written to be read by coding agents as much as by people, and is generated from this package's source — edit src/index.ts JSDoc, not this file.

Liquid glass ClassMap extension for Tailwind CSS.

Extends the base Tailwind ClassMap with backdrop-filter blur and saturation effects on surface components (cards, modals, headers, dropdowns, tooltips, toasts, drawers). Designed to pair with translucent theme colors for a frosted glass appearance.

Quick Start

import { setClassMap } from '@molecule/app-ui'
import { classMap } from '@molecule/app-ui-tailwind-glass'

// Use instead of @molecule/app-ui-tailwind's classMap
setClassMap(classMap)

Type

provider

Installation

npm install @molecule/app-ui-tailwind-glass @molecule/app-styling @molecule/app-ui @molecule/app-ui-tailwind

API

Functions

glassOverrides(base)

Glass effect ClassMap overrides.

Layers backdrop-filter blur and saturation boost onto surface components. Designed to pair with translucent theme colors (rgba surfaces with alpha).

function glassOverrides(base: UIClassMap): {
  card: (opts: CardClassOptions | undefined) => string
  modal: (opts: ModalClassOptions | undefined) => string
  toast: (opts: ToastClassOptions | undefined) => string
  tooltip: () => string
  headerBar: string
  drawer: string
  dropdownContent: string
  tabsList: (opts: TabsClassOptions | undefined) => string
  actionSheet: string
  dialogOverlay: string
}
  • base — The base UIClassMap to extend with glass effects.

Returns: An object of class overrides applying frosted glass backdrop filters.

Constants

classMap

Complete glass ClassMap — base Tailwind classMap extended with glass overrides.

Wire at app startup:

import { setClassMap } from '@molecule/app-ui'
import { classMap } from '@molecule/app-ui-tailwind-glass'
setClassMap(classMap)

const classMap: UIClassMap

Core Interface

Implements @molecule/app-ui interface.

Injection Notes

Requirements

Peer dependencies:

  • @molecule/app-styling ^1.0.1
  • @molecule/app-ui ^1.0.1
  • @molecule/app-ui-tailwind ^1.0.1

Runtime Dependencies

  • @molecule/app-styling
  • @molecule/app-ui
  • @molecule/app-ui-tailwind

This package extends (not replaces) the base Tailwind ClassMap. All component classes remain identical — only surface components gain backdrop-filter effects. Pair with a translucent theme preset (e.g. @molecule/app-theme-css-variables-liquid-glass) for the full effect.

Tailwind must SCAN this package or every backdrop-* class it adds is purged from the compiled CSS (the classes appear in the DOM but style nothing): add @source "../node_modules/@molecule/app-ui-tailwind-glass/dist"; to the app's Tailwind CSS entry (scaffolded apps scan only app-ui-tailwind / app-styling-tailwind / the framework UI dist by default, which does NOT cover this bond).