{"id":20109807,"url":"https://github.com/hyper63/svite-template","last_synced_at":"2025-03-02T18:24:44.484Z","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-01-13T05:41:36.244Z","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,"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","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241550043,"owners_count":19980641,"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":[],"created_at":"2024-11-13T18:09:30.821Z","updated_at":"2025-03-02T18:24:44.474Z","avatar_url":"https://github.com/hyper63.png","language":"Svelte","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","funding_links":[],"categories":[],"sub_categories":[],"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"}