Read this in other languages: English, 한국어

SvelteKit + Tailwind CSS Starter Template

A baseline template for starting new SvelteKit web projects, pre-configured with modern tooling for a productive development experience.

✨ Features / Tech Stack

• SvelteKit (Latest)
• TypeScript syntax support
• Tailwind CSS (v4 configured via @tailwindcss/postcss) utility-first CSS framework
• ESLint for code linting (with TypeScript and Svelte support)
• Prettier for code formatting (integrated with ESLint)
• Lucide Svelte icon library ready to use
• @sveltejs/adapter-auto for flexible deployment to various platforms (Vercel, Netlify, Cloudflare Pages, etc.)
• Basic configuration files included (.prettierrc.json, .eslintrc.cjs, tailwind.config.js, postcss.config.js)
• Global CSS setup (src/app.css) applied via root layout (src/routes/+layout.svelte)

🚀 Getting Started

Plan A : to use this template is via GitHub Templates.

1. Click the "Use this template" button on the GitHub repository page.
2. Choose a name and create your new repository.
3. Clone your newly created repository to your local machine:

   git clone https://github.com/YOUR_USERNAME/YOUR_NEW_REPOSITORY_NAME.git my-awesome-project
   cd my-awesome-project
   

Plan B : you can clone this template directly:

git clone https://github.com/YOUR_USERNAME/sveltekit-tailwind-template.git my-awesome-project
cd my-awesome-project
# Optional: Remove the template's Git history and start fresh
# rm -rf .git
# git init
# git add .
# git commit -m \"Initial commit from template\"

‼️Essential Next Step: Install Dependencies

Navigate into your new project's directory (if you haven't already) and install the required dependencies using npm (or your preferred package manager like yarn or pnpm):

npm install

(This step is crucial! It downloads all the necessary libraries defined in package.json, such as SvelteKit, Tailwind CSS, Lucide icons, etc., into the node_modules folder, making the project runnable.)

🛠️ Available Scripts

Inside the project directory, you can run several commands:

• npm run dev: Starts the development server (usually on localhost:5173) with Hot Module Replacement (HMR).
• npm run build: Builds the application for production. The output location depends on the adapter used (see .svelte-kit/ folder).
• npm run preview: Runs the built application locally. Useful for testing the production build before deployment. Requires npm run build first.
• npm run check: Runs svelte-check against your project, validating your Svelte components and TypeScript code.
• npm run lint: Checks your codebase for potential errors and code style issues using ESLint and Prettier (check mode).
• npm run format: Automatically formats your codebase using Prettier (write mode).

⚙️ Configuration Notes

• Tailwind CSS: Configured in tailwind.config.js (content paths, theme) and postcss.config.js (plugin usage). Global styles (@tailwind directives) are in src/app.css.
• ESLint & Prettier: Configured in .eslintrc.cjs and .prettierrc.json. ESLint uses TypeScript/Svelte plugins, and Prettier handles formatting (conflicts are resolved via eslint-config-prettier).
• Adapter: Uses @sveltejs/adapter-auto. To deploy to a specific environment (like Node.js server or static hosting), change the adapter in svelte.config.js and install the corresponding adapter package (e.g., @sveltejs/adapter-node).
• Lucide Icons: Import icons directly from lucide-svelte within your .svelte components. Example: import { Home } from 'lucide-svelte';

📄 License

This template is open-source software licensed under the MIT license.