{"id":15162229,"url":"https://github.com/breadthe/svelte-tailwind2-starter","last_synced_at":"2025-09-30T15:31:35.871Z","repository":{"id":47489351,"uuid":"314145254","full_name":"breadthe/svelte-tailwind2-starter","owner":"breadthe","description":"Svelte + TailwindCSS 2.0 starter template","archived":true,"fork":false,"pushed_at":"2021-08-29T17:00:14.000Z","size":126,"stargazers_count":55,"open_issues_count":1,"forks_count":9,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-09-29T11:59:08.091Z","etag":null,"topics":["rollup","svelte","svelte3","sveltejs","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"https://svelte-tailwind2.netlify.app/","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/breadthe.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}},"created_at":"2020-11-19T05:26:22.000Z","updated_at":"2024-09-22T13:25:24.000Z","dependencies_parsed_at":"2022-09-03T04:50:34.027Z","dependency_job_id":null,"html_url":"https://github.com/breadthe/svelte-tailwind2-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breadthe%2Fsvelte-tailwind2-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breadthe%2Fsvelte-tailwind2-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breadthe%2Fsvelte-tailwind2-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/breadthe%2Fsvelte-tailwind2-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/breadthe","download_url":"https://codeload.github.com/breadthe/svelte-tailwind2-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":234747846,"owners_count":18880516,"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":["rollup","svelte","svelte3","sveltejs","tailwind","tailwindcss"],"created_at":"2024-09-27T01:21:31.623Z","updated_at":"2025-09-30T15:31:35.474Z","avatar_url":"https://github.com/breadthe.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Svelte + TailwindCSS 2.0 + RollupJS starter\n\nStarter template for [Svelte](https://svelte.dev) + [TailwindCSS](https://tailwindcss.com) apps.\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, and a surprise button 👇\n\n![Light theme](https://user-images.githubusercontent.com/17433578/103722821-7285eb80-4f96-11eb-85d8-07549005b98c.png)\n\n![Dark theme](https://user-images.githubusercontent.com/17433578/103722826-774a9f80-4f96-11eb-97c6-fa4a34587f9b.png)\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\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```\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```js\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreadthe%2Fsvelte-tailwind2-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbreadthe%2Fsvelte-tailwind2-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbreadthe%2Fsvelte-tailwind2-starter/lists"}