Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mikevpeeren/sveltekit-typescript-tailwindcss-sass-starter

Use TypeScript, TailwindCSS & Sass to quick start your new SvelteKit app!!
https://github.com/mikevpeeren/sveltekit-typescript-tailwindcss-sass-starter

css css3 html html5 javascript sass starter starter-kit starter-template svelte svelte-kit svelte-template sveltekit tailwind tailwind-css tailwindcss typescript

Last synced: 1 day ago
JSON representation

Use TypeScript, TailwindCSS & Sass to quick start your new SvelteKit app!!

Awesome Lists containing this project

README 

        
# Svelte TypeScript TailwindCSS & Sass Starter



Use TypeScript, Vite, TailwindCSS & Sass to quick start your new Svelte and SvelteKit app!!



## 🧐 What's inside?



This Starter includes



- ⚡️ [Svelte](https://svelte.dev/) - Svelte is a radical new approach to building user interfaces. Whereas traditional frameworks like React and Vue do the bulk of their work in the browser, Svelte shifts that work into a compile step that happens when you build your app.

- ⚡️ [SvelteKit](https://kit.svelte.dev/) - SvelteKit is built on Svelte, a UI framework that uses a compiler to let you write breathtakingly concise components that do minimal work in the browser, using languages you already know — HTML, CSS and JavaScript. It's a love letter to web development.

- 👷 [Vite](https://vitejs.dev/) - Vite

  Next Generation Frontend Tooling

- 🧁 [TailwindCSS v3](https://tailwindcss.com/) - A utility-first CSS framework packed with classes

- ✨ [TypeScript](https://www.typescriptlang.org/) - TypeScript is a strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

- 🎉 [Sass](https://sass-lang.com/) - Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

- 📏 [ESLint](https://eslint.org/) — Find and fix problems in your JavaScript code.

- 🦋 [Prettier](https://prettier.io/) — An opinionated code formatter.

- 🐶 [Husky](https://github.com/typicode/husky) - Husky improves your commits and more 🐶 woof!

- 🐶 [Lint Staged](https://github.com/okonet/lint-staged) — Run linters against staged git files and don't let 💩 slip into your code base!



The rest of the Starter is based off of the Svelte Skeleton Project.



## ⚡️ Quick Start



[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/project?template=https://github.com/MikevPeeren/sveltekit-typescript-tailwindcss-sass-starter)



## 🚀 Getting Started



Run the following command to create a new project with this Starter:



```

git clone [email protected]:MikevPeeren/sveltekit-typescript-tailwindcss-sass-starter.git

# or

npx degit [email protected]:MikevPeeren/sveltekit-typescript-tailwindcss-sass-starter.git

```



Once the project and dependencies are finished installing, you can navigate to that directory and start up the development server with:



```

yarn dev

# or

npm run dev

```



Open [http://localhost:3000](http://localhost:3000) with your browser to see your new project!



## 📚 Learn More About Svelte and SvelteKit



To learn more about Svelte and SvelteKit, take a look at the following resources:



- [Svelte Documentation](https://svelte.dev/docs) - learn about Svelte features.

- [SvelteKit Documentation](https://kit.svelte.dev/docs/introduction) - learn about SvelteKit features.

- [Learn Svelte](https://svelte.dev/tutorial/basics) - an interactive Svelte tutorial.



You can check out [the SvelteKit GitHub repository](https://github.com/sveltejs/kit) - your feedback and contributions are welcome!