Skip to content

Svelte Kit + Tailwind CSS + TypeScript starter template

Notifications You must be signed in to change notification settings

buhodev/sveltekit-tailwind-starter

Repository files navigation

Svelte Kit + TypeScript + Tailwind CSS starter template

Everything you need to build a full-featured Svelte project, powered by create-svelte.

What's inside

This starter template comes with:

Bundler

  • Vite: Next Generation Frontend Tooling.

JavaScript frameworks

  • Svelte: Cybernetically enhanced web apps.
  • Svelte Kit: Web development, streamlined.

Components

Type checking

Data validation

  • zod: TypeScript-first schema validation with static type inference.
  • zod-form-data: Validation helpers for zod specifically for parsing FormData or URLSearchParams.

CSS frameworks

  • Tailwind CSS: Rapidly build modern websites without ever leaving your HTML.
  • @tailwindcss/forms: A plugin that provides a basic reset for form styles that makes form elements easy to override with utilities.
  • Sensible defaults in the tailwind.config.js.

Formatting & Linting

  • Prettier: An opinionated code formatter.
  • prettier-plugin-tailwindcss: Prettier plugin for Tailwind CSS that automatically sorts classes based on the official recommended class order.
  • Eslint: Find and fix problems in your JavaScript code.

i18n

  • typesafe-i18n: A fully type-safe and lightweight internationalization library for all your TypeScript and JavaScript projects.

Testing

  • Playwright: Fast and reliable end-to-end testing for modern web apps.
  • Vitest: Blazing Fast Unit Test Framework.

Fonts

Utils

Creating a project

If you're seeing this, you've probably already done this step. Congrats!

# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app

Developing

Once you've created a project and installed dependencies with npm install (or pnpm install or yarn), start a development server:

npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open

Building

To create a production version of your app:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

Credits

Best practices for font optimization by Lee Robinson's Web Fonts in 2021 blog post.

i18n logic copied from typesafe-i18n-demo-sveltekit.

svelte-themes port of next-theme for SvelteKit by beynar/svelte-themes.