TailwindCSS Modals Plugin
This plugin allows you to use Bulma modals (and their styles) in your TailwindCSS projects.
You'll firstly need to install the package from npm.
npm install tailwindcss-bulma-modals --save
Then you'll need to require the package from within your tailwind configuration files
plugins: [ require('tailwindcss-bulma-modals')(), // ... ]
<div class="modal is-active"> <div class="modal-background"></div> <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">Modal title</p> <button class="delete" aria-label="close"></button> </header> <section class="modal-card-body"> <!-- Content ... --> </section> <footer class="modal-card-foot"> <button class="button is-success">Save changes</button> <button class="button">Cancel</button> </footer> </div> </div>
With the above example, from the Bulma documentation, it will look like this.
If you want to you can use Tailwind classes inside the modal. It's as customisable as you want it to be!
If you have any issues with the package, please add them on here and I'll try to help out.