https://github.com/chillfish8/sturdy-umbrella
https://github.com/chillfish8/sturdy-umbrella
Last synced: 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/chillfish8/sturdy-umbrella
- Owner: ChillFish8
- Created: 2022-05-27T09:34:40.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2022-05-27T10:57:45.000Z (about 3 years ago)
- Last Synced: 2025-02-01T14:32:10.626Z (4 months ago)
- Language: Svelte
- Size: 133 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# SvelteKit with TailwindCSS Setup
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](https://tailwindcss.com/docs/guides/vue-3-vite). 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:
```js
// 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.
```css
// ./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 (`` 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](https://github.com/mattlehrer/sveltekit-vite-tailwind/blob/main/src/routes/__layout.svelte) at ./src/routes/\_\_layout.svelte if you need to:
```svelte
// ./src/routes/__layout.svelte
import '../style.css';
```
That should get you going. Suggestions for better setups welcome!