# npm create svelte@latest .
> skeleton project
Install Tailwind CSS
# npm install -D tailwindcss postcss autoprefixer
# npx tailwindcss init -p
# vim svelte.config.js
# vim tailwind.config.js
# vim ./src/app.css
# vim ./src/routes/+layout.svelte
Add code in svelte.config.js
import adapter from '@sveltejs/adapter-auto';
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
const config = {
kit: {
adapter: adapter()
},
preprocess: vitePreprocess()
};
export default config;
Edit file: tailwind.config.js
export default {
content: ['./src/**/*.{html,js,svelte,ts}'],
theme: {
extend: {}
},
plugins: []
};
Modify file ./src/app.css
@tailwind base;
@tailwind components;
@tailwind utilities;
Add Tailwind in +layout.svelte
<script>
import "../app.css";
</script>
<slot />
Sample +page.svelte code
<div class="text-3xl w-[300px] text-gray-600 bg-white p-10 mx-auto mt-10 shadow-lg rounded text-center">
Coming soon!
</div>
<style lang="postcss">:global(html) { background-color: theme(colors.gray.300) }</style>
Push to git (optional)
# git init && git add -A && git commit -m "Initial commit"
# git branch -M master
# git remote add origin
[email protected]:project/gitname.git
# git push -u origin master
Ref: https://tailwindcss.com/docs/guides/sveltekit