Tailwind CSS v4
Import the CSS into a layer so utilities win, or go unstyled.
Keep the default CSS and add utilities, or drop it and style each slot.
Default CSS plus utilities
Import the library CSS into the components layer, in your main CSS file. Tailwind's utilities layer then wins without !important.
@import 'tailwindcss';
@import 'react-confirm-alert/style.css' layer(components);Import it from CSS, not from JavaScript. A CSS file loaded after Tailwind's layer order would beat the utilities.
'use client'
import { confirm } from 'react-confirm-alert'
export function RoundButtons() {
return (
<button
onClick={() =>
confirm({
title: 'Publish this post?',
confirmLabel: 'Publish',
classNames: { button: 'rounded-full px-4' },
})
}
>
Publish
</button>
)
}
Tailwind only
unstyled: true drops the default CSS, and classNames styles each slot. Pass the same options to configureDialogs to use them for every dialog.
'use client'
import { confirm } from 'react-confirm-alert'
export const classNames = {
// open:grid, not grid: a display class would also show the dialog
// while it is closed.
dialog: `fixed inset-0 m-0 size-full max-h-none max-w-none open:grid
place-items-center bg-transparent p-4 backdrop:bg-black/40`,
panel: 'w-full max-w-sm rounded-2xl bg-white p-6 shadow-2xl',
title: 'text-lg font-semibold text-zinc-950',
message: 'mt-1 text-sm text-zinc-500',
actions: 'mt-6 flex justify-end gap-2',
button: `rounded-lg px-4 py-2 text-sm font-medium text-zinc-700
data-[variant=primary]:bg-emerald-600
data-[variant=primary]:text-white`,
}
export function TailwindOnly() {
return (
<button
onClick={() =>
confirm({
title: 'Invite 3 people?',
message: 'They get an email with a link to join.',
confirmLabel: 'Send invites',
unstyled: true,
classNames,
})
}
>
Invite
</button>
)
}
Use open:grid, not grid. A display class beats the browser rule that hides a closed dialog.