I am building a Blazor WebApplication using Tailwind. So Tailwind is already installed and set up in my application. I even have a basic input.css started:
@import "tailwindcss";@source "../../../**/*.{razor,cshtml,html,js,ts}";@theme { --color-bjh: #35530e; --color-primary: #35530e; /* green-900 */ --color-primary-light: #497d00; /* green-700 */ --color-warning: #fdc700; /* yellow-400 */ --color-warning-light: #ffdf20; /* yellow-300 */ --color-danger: #ca3500; /* red-700 */ --color-danger-light: #f54900; /* red-600 */}@layer base { h1 { @apply text-xl lg:text-6xl text-primary font-bold mb-6; } p { @apply text-sm lg:text-lg text-gray-900 mb-2 }}I decided I would build some of my application using components from the excellent Blazorise library, which I have used before with Bootstrap.
I followed the instructions, here, to set up Blazorise with Tailwind in my application:https://blazorise.com/docs/usage/tailwind
The problem is that all my theme colours are being over-ridden, and some of my styling is being messed up as well. It's either being over-ridden by Blazorise, or Flowbite - which Blazorise with Tailwind depends on.
In my App.Razor I have my stylesheet (the one Tailwind outputs to) declared last, which I thought would give it priority. But this is not so:
<!DOCTYPE html><html lang="en"><head><meta charset="utf-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><base href="/" /><link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://unpkg.com/flowbite@1.5.4/dist/flowbite.min.css" /><link href="_content/Blazorise.Icons.FontAwesome/v6/css/all.min.css" rel="stylesheet"><link href="_content/Blazorise/blazorise.css?v=1.8.4.0" rel="stylesheet" /><link href="_content/Blazorise.Tailwind/blazorise.tailwind.prod.css?v=1.8.4.0" rel="stylesheet" /><link rel="stylesheet" href="@Assets["tailwind.css"]" /><ImportMap /><link rel="icon" type="image/png" href="favicon.png" /><HeadOutlet /></head><body class="font-sans antialiased"><Routes /><script src="https://unpkg.com/flowbite@1.5.4/dist/flowbite.js"></script><script type="module" src="@("https://cdn.jsdelivr.net/npm/@tailwindplus/elements@1")"></script><script src="_framework/blazor.web.js"></script> </body></html>I thought that Blazorise would just provide components that use Tailwind utility classes, and there should be nothing in their packages that would interefere with styling on my side.
Since this is not the case, I am wondering if maybe Blazorise brings in Tailwind itself and that I am duplicating it with my previous setup of Tailwind?
I guess the question boils down to: How should I set up Blazorise/Tailwind with a Blazor WebApp? And since Blazorise is overiding styles such as "color-primary", where is it doing this? Presumably there should be somewhere that I can configure it?
Many thanks!