Quantcast
Channel: Active questions tagged svelte - Stack Overflow
Viewing all articles
Browse latest Browse all 1541

Tailwind CSS styles not rendering in Svelte app

$
0
0

I have setup a svelte app using "npm create vite@latest" choosing to use Svelte and TypeScript. I'm using Vite as the server, and I have also installed TailWind CSS per the instructions here.

My tailwind.config.cjs code:

/** @type {import('tailwindcss').Config} */module.exports = {  content: ['./webapp/**/*.{svelte,html,ts}'],  theme: {    extend: {},  },  plugins: [],}

My current app.css code:

@tailwind base;@tailwind components;@tailwind utilities;

I've created a routes folder within the src folder which code is:

<script>  import "../app.css";</script><slot />

I keep receiving this error:

warn - The `content` option in your Tailwind CSS configuration is missing or empty.warn - Configure your content sources or your generated CSS will be missing styles.warn - https://tailwindcss.com/docs/content-configuration

I've stopped the server and ran it again, with the same issues. I've checked the content directory a million times, even trying to use specific file paths. I can't seem to get it to work. Can anyone help me out with this? I've included an image of my working folder, as well. I really appreciate any insight given. working folder

More or less described above; I'm not sure what I'm doing wrong after reading a lot of documentation and watching countless videos. The developers I'm working with are using Svelte, TS, and Tailwind CSS, otherwise I would try a different approach.


Viewing all articles
Browse latest Browse all 1541

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>