Missing steps on the installation guide

[MrAmericanMike]

Maybe the problem is that the guide assumes certain things will already be there, or because svelte-add isn't doing all it's supposed to do, but after the step that says to add tailwind using:

npx svelte-add@latest tailwindcss
npm install

We are left with an app.postcss file in our project and there is no mention about what to do with it.

I did call it from +layout.svelte on my routes folder like so: import "../app.postcss";

I believe this step should be mentioned on the guide, or even better, a description on how to add tailwind to the project, not relaying on svelte-add

Thanks in advance...

[MrAmericanMike]

Ok I will add this to confirm what I though. svelte-add makes assumptions on our project, and just noticed that it created a routes folder in my src folder and inside of it, a +layout.svelte file with this content:

<script>
  import "../app.postcss";
</script>

<slot />

In my case my routes and svelte project in general is in src/svelte so this is why using svelte-add isn't the best alternative and it would be better to describe adding tailwind in a step by step.

[endigo9740]

@MrAmericanMike it's not an assumption, this is how SvelteKIt's default file structure in generated. It's standardized and I wouldn't advise going outside of that standard. Skeleton only supports SvelteKit at this time, if you're trying to create a Svelte project with Vite or another metaframework, then this is not something we provide help with.

If you encounter a scenario where Svelte-Add is not providing the import statement for a standard SvelteKit project, please feel free to file a GitHub issue to notify us on this. As this would be a breaking change from their end and we would need to update our instruction.

[MrAmericanMike]

I understand that, but Sveltekit also provides a svelte.config.js file and that's where svelte-add should be looking first, to decide where to place the necesary things.

in my case svelte.config.js looks like this:

import { vitePreprocess } from "@sveltejs/kit/vite";
import adapter from "@sveltejs/adapter-static";

/** @type {import("@sveltejs/kit").Config} */
const config = {
	kit: {
		adapter: adapter({
			pages: "src/electron/songzilla",
			assets: "src/electron/songzilla",
			fallback: "index.html"
		}),
		files: {
			routes: "src/svelte/routes",
			assets: "src/svelte/static",
			appTemplate: "src/svelte/index.html"
		},
		prerender: { entries: [] }
	},
	preprocess: [vitePreprocess({})]
};

export default config;

svelte-add should use that as a reference and find out where my routes are and not make an assumption.

Anyway, going a bit off topic here, I will report this on the svelte-add repository to see if they can make something about it.

Thanks.

[endigo9740]

Understood, I agree this is likely something to report upstream to Svelte-Add. Feel free to share said post here in case others are traversing the same path and would like to monitor the outcome. Thanks.

[MrAmericanMike]

As a reference, my report on svelte-add is here. svelte-add/svelte-add#312