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.
Since you have Vite in the webapp folder, that would be the “root” of the project in terms of its build/compilation. Consider moving the postcss.config.js and tailwind.config.cjs into the webapp folder.
Then, consider changing the content paths in tailwind.config.cjs to something like:
module.exports = {
content: ['./src/**/*.{svelte,html,ts}'],
Ensure you run the vite command from within the webapp folder.
1