I'm trying to access main.css from app.html in order to make TailWindCSS work because if I put it in style brackets in .svelte file its self then it just gives me an error, dose any one know why <link rel="stylesheet" href="./routes/main.css">
doesn't work?
HTML in which I'm trying to access 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>
CSS file if it has to do anything with it
@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;
}
CodePudding user response:
Only files inside static
can be referenced inside your app.html
. If you move the file there, it can be found.
However, in your case, this might not work since the CSS file is not final (TailwindCSS likely needs to process it first), and stuff inside static
is, well, static. To solve your specific problem, import the css file inside the script tag of your index.svelte
or main __layout.svelte
:
<script>
import './path/to/your/main.css';
</script>
This article gives a good overview of how to setup TailwindCSS and SvelteKit: https://codechips.me/tailwindcss-sveltekit-the-easy-way/