On 2021-03-02, SvelteKit switched from Snowpack to Vite. I saw someone asking on the Svelte Discord if anyone had gotten TailwindCSS to work with the new npm init svelte@next template so I set this up. I only ran into one hiccup on the way.
To recreate yourself as the SvelteKit template changes, here are the steps:
Run npm init svelte@next my-sveltekit-tailwind-project
Open the new project and generally follow the steps in Tailwind's Vue3 / Vite installation guide. There are differences in purge and where you import the CSS.
Install dependencies
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
Initialize Tailwind and PostCSS configs
npx tailwindcss init -p
Setup the content Tailwind should watch for CSS classes:
// tailwind.config.js
module.exports = {
content: ['src/app.html', 'src/**/*.svelte'],
...
}Create a new CSS file with the Tailwind directives. I put it in ./src/style.css but you can organize however.
// ./src/style.css
@tailwind base;
@tailwind components;
@tailwind utilities;Then add that CSS file to the project build.
First, I tried importing the CSS into ./src/app.html (<link rel="stylesheet" ...) as Vite docs imply that the main html file is the entrypoint of the project. I'm not sure if there's a way to get that to work, but it didn't work for me.
What does work is importing the CSS in a <script> block on a Svelte component. The SvelteKit scaffold may not have a layout setup out of the box and you probably want to use Tailwind throughout the project.
Add a new __layout.svelte file at ./src/routes/__layout.svelte if you need to:
// ./src/routes/__layout.svelte
<script>
import '../style.css';
</script>
<slot />That should get you going. Suggestions for better setups welcome!