Sveltekit setup with Tailwind CSS

Code

Sveltekit app setup

Create Sveltekit app

$ npm init svelte@next my-app
$ cd my-app
$ npm install
$ npm run dev

Add Tailwind CSS

$ npm install -D tailwindcss postcss autoprefixer
$ npx tailwindcss init tailwind.config.cjs -p
$ mv postcss.config.js postcss.config.cjs

Configure templates path

module.exports = {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {},
	},
	plugins: [],
};

Create a ./src/app.css file and add Tailwind directives to app CSS

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

Create a ./src/routes/__layout.svelte and import the CSS file recently created.

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

<slot />

Run the App with npm run dev