TailwindCSS about sweetalert2-themes HOT 3 CLOSED

@KevinBatdorf is totally right. Just use customClass with the desired classes:

Swal.fire({
  title: 'Test modal with input',
  input: 'text',
  icon: 'success',
  showCancelButton: true,
  buttonsStyling: false,
  customClass: {
    popup: 'p-2 rounded-lg bg-gray-600 shadow-lg sm:p-3',
    title: 'ml-3 font-medium text-white truncate',
    input: 'bg-white text-center',
    confirmButton: 'bg-blue-500 hover:bg-blue-400 text-white font-bold py-2 px-4 border-b-4 border-blue-700 hover:border-blue-500 rounded mx-2',
    cancelButton: 'bg-gray-500 hover:bg-gray-400 text-white font-bold py-2 px-4 border-b-4 border-gray-700 hover:gray-blue-500 rounded mx-2',
  }
})

Docs: https://sweetalert2.github.io/#custom-class

from sweetalert2-themes.

How would this work with Tailwind being a utility framework with no opinionated style default?

Probably better to just add your Tailwind generated class names directly, which I think can be done via customClass in SweetAlert2?

from sweetalert2-themes.

@KevinBatdorf I won't lie I've never used themes with SweetAlert2, working on a new project which is my first time really using Tailwind CSS. and while yes there is no opinionated style, thats the important part, being able to add bg-gray-400 for example. little things like that. Maybe customClass would work. Will look into it more I just wanted to throw the idea out there incase anybody else had thoughts/ideas or already did it.

from sweetalert2-themes.