A modern starter template for building web applications with SvelteKit, TypeScript, TailwindCSS, and Sass. This template provides a robust foundation for your next project with best practices and modern tooling.

• 🚀 Modern Stack: Built with the latest versions of SvelteKit, TypeScript, and TailwindCSS
• 🎨 Styling Flexibility: Combine TailwindCSS utilities with Sass for powerful styling
• 🧪 Testing Ready: Includes both E2E and unit testing setup out of the box
• 📝 Code Quality: Pre-configured with ESLint, Prettier, and TypeScript
• 🔄 Git Hooks: Husky and lint-staged ensure code quality on every commit
• 📱 Responsive: Built with mobile-first design principles
• ⚡️ Performance: Optimized for fast loading and smooth interactions

• ⚡️ SvelteKit - The official application framework for Svelte
• 🎨 TailwindCSS v4 - A utility-first CSS framework
• 📘 TypeScript - Type-safe JavaScript
• 🎨 Sass - CSS extension language
• 🧪 Playwright - End-to-end testing
• 🧪 Vitest - Unit testing
• 📏 ESLint - Code linting
• 🦋 Prettier - Code formatting
• 🐶 Husky - Git hooks
• 🧹 Lint Staged - Run linters on staged files

# Clone the repository git clone git@github.com:MikevPeeren/sveltekit-typescript-tailwindcss-sass-starter.git # or npx degit git@github.com:MikevPeeren/sveltekit-typescript-tailwindcss-sass-starter.git # Install dependencies yarn install # or npm install

Start the development server:

yarn dev # or npm run dev

Open http://localhost:3000 to view your application.

• yarn dev - Start development server
• yarn build - Build for production
• yarn preview - Preview production build
• yarn test - Run Playwright end-to-end tests
• yarn test:unit - Run Vitest unit tests
• yarn check - Type-check your code
• yarn check:watch - Type-check your code in watch mode
• yarn lint - Lint your code
• yarn format - Format your code

├── src/ │ ├── routes/ # SvelteKit routes │ ├── app.html # HTML template │ ├── app.scss # Global styles │ └── app.d.ts # TypeScript declarations ├── static/ # Static assets ├── tests/ # Test files └── public/ # Public assets 

This starter includes both end-to-end and unit testing setup:

• End-to-end Testing: Uses Playwright for browser testing
• Unit Testing: Uses Vitest for component and utility testing

Run tests with:

# Run end-to-end tests yarn test # Run unit tests yarn test:unit

This starter combines the power of TailwindCSS with Sass:

• Use TailwindCSS utility classes directly in your components
• Create custom styles with Sass in src/app.scss
• Leverage TailwindCSS's responsive design utilities
• Use Sass variables and mixins for complex styling needs

The project includes several configuration files:

• tailwind.config.js - TailwindCSS configuration
• tsconfig.json - TypeScript configuration
• svelte.config.js - SvelteKit configuration
• .eslintrc.cjs - ESLint configuration
• .prettierrc - Prettier configuration

• SvelteKit Documentation
• Svelte Documentation
• TailwindCSS Documentation
• TypeScript Documentation

Contributions are welcome! Please feel free to submit a Pull Request.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

This project is licensed under the MIT License - see the LICENSE file for details.

• SvelteKit team for the amazing framework
• TailwindCSS team for the utility-first CSS framework
• All contributors who have helped improve this starter