{"id":20109807,"url":"https://github.com/hyper63/svite-template","last_synced_at":"2026-05-23T16:46:38.737Z","repository":{"id":110719210,"uuid":"329382161","full_name":"hyper63/svite-template","owner":"hyper63","description":null,"archived":false,"fork":false,"pushed_at":"2021-01-13T17:43:25.000Z","size":68,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-02T18:32:20.651Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Svelte","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/hyper63.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-01-13T17:26:28.000Z","updated_at":"2021-01-13T17:43:27.000Z","dependencies_parsed_at":null,"dependency_job_id":"79f5270d-0c62-4e81-a7cc-4e2fb0f1931c","html_url":"https://github.com/hyper63/svite-template","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/hyper63/svite-template","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsvite-template","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsvite-template/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsvite-template/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsvite-template/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyper63","download_url":"https://codeload.github.com/hyper63/svite-template/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyper63%2Fsvite-template/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33404268,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-23T04:15:53.637Z","status":"ssl_error","status_checked_at":"2026-05-23T04:15:53.242Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":[],"created_at":"2024-11-13T18:09:30.821Z","updated_at":"2026-05-23T16:46:38.720Z","avatar_url":"https://github.com/hyper63.png","language":"Svelte","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SVITE with Tailwind Template\n\nThis template setups a project with Svelte, Svite and Tailwind\n\n## Automated \n\n``` sh\nnpx bam github:hyper63/svite-template [PROJECT]\n```\n\n## Manual Steps\n\n``` sh\nmkdir myproject\ncd myproject\nyarn init -y\nyarn add -D svelte svite postcss@7 tailwindcss@compat\ntouch postcss.config.js tailwind.config.js svelte.config.js\nmkdir public src\ntouch public/favicon.svg\ntouch index.html\ntouch src/index.js src/index.css src/App.svelte\nyarn add -D postcss-import@12\nyarn add -D postcss-preset-env\nyarn add -D svelte-preprocess\n```\n\npostcss.config.js\n\n``` js\nmodule.exports = {\n  plugins: [require('postcss-import'), require('tailwindcss'), require('postcss-preset-env')({ stage: 1 })],\n};\n```\n\ntailwind.config.js\n\n``` js\nconst { tailwindExtractor } = require('tailwindcss/lib/lib/purgeUnusedStyles');\n\nconst svelteClassColonExtractor = (content) =\u003e {\n  return content.match(/(?\u003c=class:)([a-zA-Z0-9_-]+)/gm) || [];\n};\n\nmodule.exports = {\n  purge: {\n    enabled: process.env.NODE_ENV === 'production',\n    content: ['./src/**/*.svelte', './src/**/*.html', './src/**/*.css', './index.html'],\n    preserveHtmlElements: true,\n    options: {\n      safelist: [/svelte-/],\n      defaultExtractor: (content) =\u003e {\n        // WARNING: tailwindExtractor is internal tailwind api\n        // if this breaks after a tailwind update, report to svite repo\n        return [...tailwindExtractor(content), ...svelteClassColonExtractor(content)];\n      },\n      keyframes: true,\n    },\n  },\n  theme: {\n    extend: {\n    },\n  },\n  variants: {},\n  plugins: [],\n};\n\n```\n\nsvelte.config.js\n\n``` js\nconst { postcss } = require('svelte-preprocess');\nmodule.exports = {\n  preprocess: [postcss()],\n};\n```\n\nindex.html\n\n``` html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"UTF-8\" /\u003e\n    \u003clink rel=\"icon\" href=\"/favicon.svg\" /\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" /\u003e\n    \u003ctitle\u003eHello World\u003c/title\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cscript type=\"module\" src=\"/src/index.js\"\u003e\u003c/script\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n```\n\nsrc/index.js\n\n``` js\nimport App from './App.svelte';\nimport './index.css';\n\nconst app = new App({\n  target: document.body,\n});\n\nexport default app;\n```\n\nsrc/index.css\n\n``` css\n@import 'tailwindcss/base.css';\n@import 'tailwindcss/components.css';\n@import 'tailwindcss/utilities.css';\n```\n\nsrc/App.svelte\n\n``` svelte \n\u003ch1\u003eHello World\u003c/h1\u003e\n```\n\npublic/favicon.svg\n\n``` svg\n\u003csvg xmlns=\"http://www.w3.org/2000/svg\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"\u003e\n  \u003cpath strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M14.828 14.828a4 4 0 01-5.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z\" /\u003e\n\u003c/svg\u003e\n```\n\npackage.json\n\n``` json\n{\n  ...\n  \"scripts\": {\n    \"build\": \"svite build\",\n    \"dev\": \"svite\"\n  }\n}\n\n```\n\n## Congrats! You have setup a svite app with tailwindcss\n\n## Acknowlegements\n\n* Svite - https://github.com/dominikg/svite\n* Svelte - https://svelte.dev\n* Tailwindcss - https://tailwindcss.com\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyper63%2Fsvite-template","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyper63%2Fsvite-template","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyper63%2Fsvite-template/lists"}