Unable to get access of css file trough html

user_17286169 0
Viewed 89

I'm trying to access main.css from app.html in order to make Tailwind CSS 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;
}

folder structure

tailwind-css svelte css html
1 Answers

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/

user_101961880
Related