Skip to content
Bulma modals for TailwindCSS
JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
.npmignore
.npmrc
index.js
modal-example.png
package.json
readme.md

readme.md

TailwindCSS Modals Plugin

This plugin allows you to use Bulma modals (and their styles) in your TailwindCSS projects.

Installation

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 tailwind.js.

plugins: [
    require('tailwindcss-bulma-modals')(),
    // ...
]

Examples

<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.

Bulma modal example

If you want to you can use Tailwind classes inside the modal. It's as customisable as you want it to be!

Issues

If you have any issues with the package, please add them on here and I'll try to help out.

You can’t perform that action at this time.