Bootstrap 4 Modal With Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. I like to think of it as a cool way to write inline styling and achieve an awesome interface without writing a single line of your own CSS.

First include bootstrap js in your HTML

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

Modal HTML With Tailwind Class

  <div class="modal fade" id="myModal">
    <div class="modal-dialog">
      <div class="modal-content">
        <!-- Modal Header -->
        <div class="modal-header">
          <h4 class="modal-title  font-medium">Modal Heading</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <!-- Modal body -->
        <div class="modal-body">
          Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quaerat obcaecati perspiciatis neque hic eaque.
          Cupiditate veritatis dolorum officia provident quae minima quos alias sint repellendus? Deleniti architecto
          corporis voluptates veniam?
        </div>
        <!-- Modal footer -->
        <div class="modal-footer">
          <button type="button" class="modal-btn" data-dismiss="modal">Close</button>
        </div>

      </div>
    </div>

  </div>

Modal Button

  <!-- The Modal -->
  <button type="button" class="modal-btn" data-toggle="modal" data-target="#myModal">
    Launch modal
  </button>

Add Modal css in tailwind css

/* ######### modal css */

.modal {
    z-index: 1072;
    @apply hidden fixed top-0 left-0 w-full h-full outline-none;
}

.modal-dialog {
    @apply relative w-auto pointer-events-none max-w-lg my-8 mx-auto px-4 sm:px-0;
}

.modal-content {
    @apply relative flex flex-col w-full pointer-events-auto bg-white border border-gray-300 rounded-lg;
}

.modal-header {
    @apply flex items-start justify-between p-4 border-b border-gray-300 rounded-t;
}

.modal-footer {
    @apply flex items-center justify-end p-4 border-t border-gray-300;
}

.modal-body {
    @apply relative p-4;
}

.modal-btn {
    @apply inline-block font-normal text-center px-3 py-2 leading-normal text-base rounded cursor-pointer text-white bg-blue-600;
}

.modal.show {
    @apply block;
}

.modal-backdrop {
    z-index: 1040;
    width: 100vw;
    height: 100vh;
    @apply fixed bg-black top-0 left-0;
}

.modal-backdrop.fade {
    @apply opacity-0;
}

.modal-backdrop.show {
    @apply opacity-50;
}

.modal.fade .modal-dialog {
    transition: -webkit-transform 0.3s ease-out;
    transition: transform 0.3s ease-out;
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out;
    -webkit-transform: translate(0, -50px);
    transform: translate(0, -50px);
}

.modal.show .modal-dialog {
    -webkit-transform: none;
    transform: none;
}