Tailwind CSS utilities for styling and animating dialog elements.

View sandbox →

First, install the package from NPM.

npm install --save-dev @bedard/tailwindcss-dialogs

Next, add the following to your tailwind.config.js file.

import dialogs from '@bedard/tailwindcss-dialogs'

export default {
  plugins: [
    dialogs
  ]
}

This plugin provides one utility class, and three variant utilities.

1. The allow-discrete class enables entry / exit transitions
2. backdrop targets a dialog's backdrop pseudo element
3. open targets the the open state
4. from targets a dialog's starting-style

MIT

Copyright (c) 2024-present, Scott Bedard