tailwindcss config for svelte

additional plugins:

• css import
• css modules
• nested css

dev dependencies

tailwindcss postcss autoprefixer postcss-import postcss-load-config postcss-nested svelte-preprocess svelte-preprocess-cssmodules

tailwind init command:

npx tailwindcss init -p

svelte.config.js:

import adapter from '@sveltejs/adapter-auto';
import preprocess from 'svelte-preprocess';
import { cssModules, linearPreprocess } from 'svelte-preprocess-cssmodules';
const { postcss, typescript, globalStyle } = preprocess;

/** @type {import('@sveltejs/kit').Config} */
const config = {
	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
	// for more information about preprocessors
	preprocess: linearPreprocess([typescript(), postcss(), globalStyle(), cssModules()]),

	kit: {
		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
		adapter: adapter()
	}
};

export default config;

postcss.config.js:

export default {
	plugins: {
		'postcss-import': {},
		'postcss-nested': {},
		'tailwindcss/nesting': 'postcss-nested',
		tailwindcss: {},
		autoprefixer: {}
	}
};

tailwind.config.js:

/** @type {import('tailwindcss').Config} */
export default {
	content: ['./src/**/*.{html,js,svelte,ts}'],
	theme: {
		extend: {}
	},
	plugins: []
};

src/lib/configs/globals.css:

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

src/routes/+layout.svelte:

<script lang="ts">
	import '$lib/configs/globals.css';
</script>

<slot />

additionally, if you are using vscode, you can install headwind extension to sort tailwind classnames.

docs:

• svelte preprocss
• css modules plugin
• postcss nested
• postcss import