Code
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
tailwind.config.cjs
module.exports = {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
}
Create a ./src/app.css
file and add Tailwind directives to app CSS
app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Create a ./src/routes/__layout.svelte
and import the CSS file recently created.
__layout.svelte
<script>
import "../app.css"
</script>
<slot />
Run the App with npm run dev