https://github.com/scottbedard/tailwindcss-dialogs

https://github.com/scottbedard/tailwindcss-dialogs

Last synced: 18 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/scottbedard/tailwindcss-dialogs
• Owner: scottbedard
• License: mit
• Created: 2024-06-29T21:29:01.000Z (6 months ago)
• Default Branch: main
• Last Pushed: 2024-06-30T00:28:51.000Z (6 months ago)
• Last Synced: 2024-12-08T18:49:45.559Z (25 days ago)
• Language: HTML
• Size: 69.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# `@bedard/tailwindcss-dialogs`

[![Build](https://github.com/scottbedard/tailwindcss-dialogs/actions/workflows/build.yml/badge.svg)](https://github.com/scottbedard/tailwindcss-dialogs/actions/workflows/build.yml)

[![NPM](https://img.shields.io/npm/v/%40bedard%2Ftailwindcss-dialogs)](https://www.npmjs.com/package/@bedard/tailwindcss-dialogs)

[![License](https://img.shields.io/badge/license-MIT-blue)](https://github.com/scottbedard/tailwindcss-dialogs/blob/main/LICENSE)

Tailwind CSS utilities for styling and animating dialog elements.

[View sandbox →](https://main--tailwindcss-dialogs.netlify.app/)

## Installation

First, install the package from NPM.

```sh

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

```

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

```js

import dialogs from '@bedard/tailwindcss-dialogs'

export default {

  plugins: [

    dialogs

  ]

}

```

## Basic usage

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

1. The [`allow-discrete`](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-behavior#discrete_animation_behavior) 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`](https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style)

## License

[MIT](https://github.com/scottbedard/tailwindcss-dialogs/blob/master/LICENSE)

Copyright (c) 2024-present, Scott Bedard