Movatterモバイル変換


[0]ホーム

URL:


Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

Sign up
Appearance settings

Adding Tailwind CSS Classes within CustomClass #2769

Open
@RobHowdle

Description

@RobHowdle

New feature motivation

I used Tailwind CSS, I read a previous issue about problems on Tailwinds side of things. I managed to get some work arounds by adding tailwind classes in the custom classes part and for the mos part this worked however it would be handy if the custom classes could overwrite default swal styling. I had a look through the docs and other issues and couldn't see anything specific for Toast customisation although I feel like the standard 'popup, title' etc should work.

New feature description

Swal.fire({ showConfirmButton: false, toast: true, position: "top-end", timer: 3000, timerProgressBar: true, customClass: { popup: "bg-my-custom-background-color rounded-lg font-heading", title: "text-white", html: "text-white", }, icon: "error", title: "Oops!", text: message, });

This example doesn't work because whilst itdoes add the classes and and calls the correct tailwind class, there is default styling that is applied which overrides my class. Specifically below:
.swal2-popup.swal2-toast { box-sizing: border-box; grid-column: 1 / 4 !important; grid-row: 1 / 4 !important; grid-template-columns: min-content auto min-content; padding: 1em; overflow-y: hidden; background: #fff; box-shadow: 0 0 1px rgba(0, 0, 0, .075), 0 1px 2px rgba(0, 0, 0, .075), 1px 2px 4px rgba(0, 0, 0, .075), 1px 3px 8px rgba(0, 0, 0, .075), 2px 4px 16px rgba(0, 0, 0, .075); pointer-events: all;

It'd be handy if something could be done so that when a custom class is applied any in the custom tailwind class overrides any default styling there is.

New feature implementation

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions


      [8]ページ先頭

      ©2009-2026 Movatter.jp