Sveltekit init project

aizu

# 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