Is there a reason why I am facing difficulties accessing main.css from app.html to enable Tailwind CSS? When I try putting it in the style brackets in the .svelte file itself, it throws an error. Can anyone explain why this is happening?
<link rel="stylesheet" href="./routes/main.css">Why doesn't this code snippet work properly?
This is the HTML where I am attempting to access the CSS:
<head>
<meta charset="utf-8" />
<link rel="icon" href="/favicon.png" />
<link rel="stylesheet" href="./routes/main.css">
<meta name="viewport" content="width=device-width, initial-scale=1" />
%svelte.head%
</head>If there's any correlation with the CSS file, it looks like this:
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.nav-btn {
@apply font-medium
dark:hover:bg-gray-300 hover:bg-gray-800
hover:text-white dark:hover:text-black
rounded-lg transition-colors duration-300
px-3 py-1;
}
}
.h1{
color: aqua;
}