Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/colinbate/svelte-ts-tailwind-template
Svelte (v4) app template with TypeScript and TailwindCSS.
https://github.com/colinbate/svelte-ts-tailwind-template
Last synced: 4 months ago
JSON representation
Svelte (v4) app template with TypeScript and TailwindCSS.
- Host: GitHub
- URL: https://github.com/colinbate/svelte-ts-tailwind-template
- Owner: colinbate
- Created: 2019-08-02T17:34:15.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2024-01-28T01:45:56.000Z (5 months ago)
- Last Synced: 2024-01-28T02:23:23.161Z (5 months ago)
- Language: Svelte
- Homepage:
- Size: 90.8 KB
- Stars: 69
- Watchers: 4
- Forks: 7
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- awesome-starter - svelte-ts-tailwind-template - Svelte (v3) app template with TypeScript and TailwindCSS. (Get Started / Templates)
README
> Default dev port is now `5173`, it now uses Vite under the hood.
# Svelte v4 + TS + Tailwind 3.3 app
**There is a Svelte 5 starter in the `svelte5` branch.**
**NOTE** Dark mode stopped working with the Rollup based template, and since it isn't supported anymore, I've switched this to the Vite based template.
This is a project template for [Svelte](https://svelte.dev) (v4) apps. It lives at https://github.com/colinbate/svelte-ts-tailwind-template and is based on the official Svelte template via `create-vite` with TypeScript selected and Tailwind CSS added via `svelte-add`. The dependencies were then updated to latest (as of the latest commit). It is getting pretty easy to get this stack working without this template, but may save you a bit of time.
> Note that this isn't a SvelteKit app, this is a vanilla Svelte template with the above mentioned technologies pre-installed. Now that SvelteKit is past 1.0, it is an option you may want to consider for any larger apps.
To create a new project based on this template using [degit](https://github.com/Rich-Harris/degit):
```bash
npx degit colinbate/svelte-ts-tailwind-template svelte-app
cd svelte-app
```
Alternatively, if you are currently on GitHub, you can click the "Use this template" button at the top of this page.
*Note that you will need to have [Node.js](https://nodejs.org) >=16 installed.*
## Get started
Install the dependencies...
```bash
cd svelte-app
npm install
```
...then start [Vite](https://vitejs.dev/):
```bash
npm run dev
```
Navigate to [localhost:5173](http://localhost:5173). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.
## Building and running in production mode
To create an optimised version of the app:
```bash
npm run build
```
You can serve up the newly built app with `npm run preview`. This allows you to ensure nothing was damaged in the production build process.
You can then host the app with whichever static host you prefer.