Toast isn't styled upon display (using Tailwind).

[ashl]

As the title mentions, I'm using Tailwind. This is the outcome I'm experiencing:

https://imgur.com/Bu5Qoo5

My .jsx:

Code: Select all

import "./SignUp.css";
import { React, useRef } from "react";
import Button from "../../components/Button/Button";
import "primeicons/primeicons.css";
import { Toast } from "primereact/toast";

function Test() {
	const toast = useRef(null);

	const showMessage = (label, ref, severity) => {
		ref.current.show({
			severity: severity,
			summary: "Oops!",
			detail: label,
			life: 3000,
		});
	};

	const notChecked = () => {
		showMessage("You haven't agreed to the terms.", toast, "warn");
	};

	return (
		<div className="flex min-h-screen flex-col justify-center items-center w-full pt-10 bg-stdblue">
			<Toast ref={toast} />
			<Button text={"NEXT"} func={notChecked} />
		</div>
	);
}

export default Test; 

The css:

Code: Select all

@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

* {
	-webkit-tap-highlight-color: transparent;
}

I do have primereact installed and I've tried reinstalling it. I have no idea what's causing this.

[Melloware]

Do you need to wait until Unstyled mode is released in 10.0.0 which will support Tailwind?