{"id":20649279,"url":"https://github.com/repalash/svelte-tailwind-ts-starter","last_synced_at":"2026-04-11T13:03:10.398Z","repository":{"id":84265145,"uuid":"376936272","full_name":"repalash/svelte-tailwind-ts-starter","owner":"repalash","description":"Starter template for Svelte + TailwindCSS + Typescript + HeroIcons apps with experimental HMR support for svelte in Rollup.","archived":false,"fork":false,"pushed_at":"2021-06-14T19:37:12.000Z","size":12,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-17T10:12:10.612Z","etag":null,"topics":["heroicons","hot-module-replacement","hot-reload","rollup","svelte","svelte3","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/repalash.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-14T19:36:37.000Z","updated_at":"2024-04-16T11:00:05.000Z","dependencies_parsed_at":"2023-05-24T04:45:47.187Z","dependency_job_id":null,"html_url":"https://github.com/repalash/svelte-tailwind-ts-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fsvelte-tailwind-ts-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fsvelte-tailwind-ts-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fsvelte-tailwind-ts-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/repalash%2Fsvelte-tailwind-ts-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/repalash","download_url":"https://codeload.github.com/repalash/svelte-tailwind-ts-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242737019,"owners_count":20177092,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["heroicons","hot-module-replacement","hot-reload","rollup","svelte","svelte3","tailwindcss","typescript"],"created_at":"2024-11-16T17:13:39.075Z","updated_at":"2025-12-30T22:28:22.952Z","avatar_url":"https://github.com/repalash.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Svelte + TailwindCSS + RollupJS Hot + Typescript + Icons starter\n\nStarter template for [Svelte](https://svelte.dev) + [TailwindCSS](https://tailwindcss.com) + [Typescript](https://www.typescriptlang.org/) + [HeroIcons](https://heroicons.com/) apps with experimental HMR support for svelte in [Rollup](https://rollupjs.org/).\n\nFork of: https://github.com/breadthe/svelte-tailwind2-starter\n\nAdded HeroIcons, Typescript and Hot Module Replacement with nollup ( from: https://github.com/rixo/svelte-template-hot ).\n\nIt has built-in support for TailwindCSS 2.0, while the bundling is handled by Rollup.\n\nThere's also a simple dark/light mode switch\n\n![Dark theme](https://user-images.githubusercontent.com/17433578/103722826-774a9f80-4f96-11eb-97c6-fa4a34587f9b.png)\n\n## Get started\n\nInstall the dependencies...\n\n```bash\ncd svelte-app\nnpm install\n```\n\n...then start [Rollup](https://rollupjs.org):\n\n```bash\nnpm run dev\n```\nThis will run development environment with HMR. \n\nNavigate to [localhost:5000](http://localhost:5000). You should see your app running. Edit a component file in `src`, save it, and reload the page to see your changes.\n\nBy default, the server will only respond to requests from localhost. To allow connections from other computers, edit the `sirv` commands in package.json to include the option `--host 0.0.0.0`.\n\n\n## Building and running in production mode\n\nTo create an optimised (production) version of the app:\n\n```bash\nnpm run build\n```\n\nYou can run the newly built app with `npm run start`. This uses [sirv](https://github.com/lukeed/sirv), which is included in your package.json's `dependencies` so that the app will work when you deploy to platforms like [Heroku](https://heroku.com).\n\n\n## Single-page app mode\n\nBy default, sirv will only respond to requests that match files in `public`. This is to maximise compatibility with static fileservers, allowing you to deploy your app anywhere.\n\nIf you're building a single-page app (SPA) with multiple routes, sirv needs to be able to respond to requests for *any* path. You can make it so by editing the `\"start\"` command in package.json:\n\n```\n\"start\": \"sirv public --single\"\n```\n\n\n## Deploying to the web\n\n### With [now](https://zeit.co/now)\n\nInstall `now` if you haven't already:\n\n```bash\nnpm install -g now\n```\n\nThen, from within your project folder:\n\n```bash\ncd public\nnow deploy --name my-project\n```\n\nAs an alternative, use the [Now desktop client](https://zeit.co/download) and simply drag the unzipped project folder to the taskbar icon.\n\n### With [surge](https://surge.sh/)\n\nInstall `surge` if you haven't already:\n\n```bash\nnpm install -g surge\n```\n\nThen, from within your project folder:\n\n```bash\nnpm run build\nsurge public my-project.surge.sh\n```\n\n\n## 🚨 Limitations\n\nIn **development** mode (running `npm run dev` / `yarn dev`), the CSS bundle includes *all* of TailwindCSS and weighs in at ~6.8MB. You don't want to deploy this to production.\n\nIn **production** mode (running `npm run build` / `yarn build`), all the unused CSS styles are purged, dropping the bundle to a much more manageable size (~7KB in this case). However, I haven't yet found a way to stop Tailwind from purging dynamic Svelte classes (such as `class:dark` or `class:from-blue-700={$dark}`).\n\nAs a result, the production bundle won't contain such dynamic classes. To get around this, in `tailwind.config.js`, under `purge`, add an `options` object with a `safelist` array containing all the classes you wish to protect from purging:\n\n```diff\npurge: {\n    enabled: production,\n    content: [\n        './src/**/*.html',\n        './src/**/*.svelte',\n    ],\n    options: {\n        safelist: [\n            'border-blue-300',\n            'border-orange-500',\n            'border-pink-100',\n            'border-pink-900',\n            'dark',\n            'from-blue-500',\n            'from-blue-700',\n            'from-yellow-200',\n            'text-pink-100',\n            'text-pink-900',\n            'to-blue-800',\n            'to-pink-300',\n            'to-purple-800',\n            'to-yellow-500',\n        ],\n    }\n},\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepalash%2Fsvelte-tailwind-ts-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frepalash%2Fsvelte-tailwind-ts-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frepalash%2Fsvelte-tailwind-ts-starter/lists"}