svelte-add: Tailwind's classes do not work in html elements (SvelteKit v1.0.0-next.102)

Is there a workaround for this in the meantime?

Apply the current version of this preset with pnpx svelte-add tailwindcss --jit.

Create (or edit) a src/routes/__layout.svelte with these contents:

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

<slot />

and an src/app.postcss with these contents:

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

I, too, am baffled by why this isn’t working as expected right now (without manual intervention). Slating this as something to fix with the rewrite and giving up on the existing preset because it’s somehow broken beyond repair.

This is a bug with this project attributed to the recent $layout.svelte -> __layout.svelte change in SvelteKit. Hold tight while I fix this.

Is there an ETA on this fix?

Not quite. I have some local / unpushed and uncommitted changes as I’ve been encountering obstacles.

🎉 This has been fixed! 🎉

Due to the current state of svelte-add, you may encounter a different issue when using this tool. Please feel free to find an existing issue at https://github.com/svelte-add/svelte-add/issues or open a new one for whatever problem you encounter.

Thank you everyone for your patience and continued interest in the project!

Your colors are overriding the defaults rather than being added to them: https://tailwindcss.com/docs/customizing-colors#extending-the-defaults

const { tailwindExtractor } = require("tailwindcss/lib/lib/purgeUnusedStyles");

module.exports = {
	mode: "jit",
	purge: {
		content: [
			"./src/**/*.{html,js,svelte,ts}",
		],
		options: {
			defaultExtractor: (content) => [
				// If this stops working, please open an issue at https://github.com/svelte-add/tailwindcss/issues rather than bothering Tailwind Labs about it
				...tailwindExtractor(content),
				// Match Svelte class: directives (https://github.com/tailwindlabs/tailwindcss/discussions/1731)
				...[...content.matchAll(/(?:class:)*([\w\d-/:%.]+)/gm)].map(([_match, group, ..._rest]) => group),
			],
		},
		safelist: [/^svelte-[\d\w]+$/],
	},
	theme: {
		extend: {
			colors: {

			},
		},
	},
	variants: {
		extend: {},
	},
	plugins: [],
};

For some reason I have noticed that although this issue appears to be fixed, it might not be. Adding custom colors to your tailwind config immediately breaks roughly half the styles in tailwind, and worse yet, even adding

colors: {}

still breaks it! Very strange bug worth investigating!

It seems to work with the default

npm init svelte@next appName
npx svelte-add tailwindcss
npm i

followed by adding to app.css

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