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

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

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

app.css
@tailwind base;
@tailwind components;
@tailwind utilities;

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

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

<slot />

Run the App with npm run dev


Return to all snippets