Skip to content

Svelte 5 + TailwindCSS v4 + TypeScript starter template

Notifications You must be signed in to change notification settings

buhodev/sveltekit-tailwind-starter

Repository files navigation

Svelte badge SvelteKit badge TailwindCSS badge TypeScript badge Vitest badge Playwright badge Eslint badge Prettier badge Vite badge

Svelte Kit + TypeScript + Tailwind CSS starter template

Everything you need to build a Svelte project, powered by sv.

🧰 What's inside

This minimal starter template comes with:

JavaScript frameworks

  • Svelte 5: Web development for the rest of us.
  • SvelteKit: Web development, streamlined.

Components

TODO

Type checking

CSS frameworks

  • TailwindCSS 4: 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

Testing

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

Fonts

  • Inter variable: A typeface carefully crafted & designed for computer screens.

Utils

  • mode-watcher: Simple light/dark mode management for SvelteKit apps.

Icons

  • @poppanator/sveltekit-svg: SvelteKit plugin that makes it possible to import SVG files as Svelte components, inline SVG code or urls.
  • unplugin-icons: Access thousands of icons as components on-demand universally.

📦 Installation

Download the repository, open the folder and install the dependencies:

# download the project
npx degit buhodev/sveltekit-tailwind-starter my-project
cd my-project
npm install # or pnpm install

🛠️ 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.

🤝 Contributing

Contributions, issues and feature requests are welcome!
Feel free to check the issues page.

License

MIT