Sveltekit setup with Tailwind CSS


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.

	import "../app.css"

<slot />

Run the App with npm run dev

Return to all snippets