This repo is a working skeleton project that integrates Tailwind's JIT mode with SvelteKit. You can name and organize your CSS files however you like—the styles
directory is just personal preference.
- Set up the project structure, and rename Tailwind and PostCSS config files to
.cjs
format:
npm init svelte@next my-app
cd my-app
npm install
npm install --save-dev autoprefixer@latest postcss@latest tailwindcss@latest
npx tailwindcss init -p
mv tailwind.config.js tailwind.config.cjs
mv postcss.config.js postcss.config.cjs
mkdir src/styles
touch src/styles/styles.css
touch src/routes/__layout.svelte
- Edit the Tailwind config to use JIT mode and purge appropriate files:
// tailwind.config.cjs
module.exports = {
mode: 'jit',
purge: [
'./src/**/*.{html,js,jsx,svelte,ts,tsx}'
],
//...
}
- Set the
TAILWIND_MODE
environment variable towatch
inside thedev
script:
// package.json
//...
"scripts": {
"dev": "TAILWIND_MODE=watch svelte-kit dev",
//...
},
//...
- Add base Tailwind styles:
/* styles/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
- Import Tailwind styles to
__layout.svelte
:
<!-- src/routes/__layout.svelte -->
<script>
import '../styles/styles.css';
</script>
<div id="test-div" class="bg-blue-500">Edit the classes on this div in <code>__layout.svelte</code> to test HMR</div>
- Start the dev server and visit http://localhost:3000/:
npm run dev