{"id":14977042,"url":"https://github.com/wesselvanree/shopify-theme-tailwind","last_synced_at":"2025-03-17T15:12:47.864Z","repository":{"id":40534997,"uuid":"381941685","full_name":"wesselvanree/shopify-theme-tailwind","owner":"wesselvanree","description":"A starting point for Shopify Online Store 2.0 theme development using Tailwind CSS and Vite.","archived":false,"fork":false,"pushed_at":"2024-04-17T20:24:26.000Z","size":1891,"stargazers_count":157,"open_issues_count":2,"forks_count":47,"subscribers_count":5,"default_branch":"main","last_synced_at":"2025-03-02T13:08:41.741Z","etag":null,"topics":["shopify-theme","tailwindcss","typescript","vitejs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/wesselvanree.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-07-01T07:07:30.000Z","updated_at":"2025-02-19T11:40:26.000Z","dependencies_parsed_at":"2024-09-11T12:31:16.204Z","dependency_job_id":"edd2081d-d05b-491b-851e-2bc517e71546","html_url":"https://github.com/wesselvanree/shopify-theme-tailwind","commit_stats":null,"previous_names":[],"tags_count":11,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wesselvanree%2Fshopify-theme-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wesselvanree%2Fshopify-theme-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wesselvanree%2Fshopify-theme-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/wesselvanree%2Fshopify-theme-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/wesselvanree","download_url":"https://codeload.github.com/wesselvanree/shopify-theme-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":244056425,"owners_count":20390719,"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":["shopify-theme","tailwindcss","typescript","vitejs"],"created_at":"2024-09-24T13:54:57.104Z","updated_at":"2025-03-17T15:12:47.825Z","avatar_url":"https://github.com/wesselvanree.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Shopify Theme Tailwind\n\nThis repository contains a starting point for Shopify Online Store 2.0 Theme\ndevelopment using [Tailwind CSS](https://tailwindcss.com) and [Vite](https://vitejs.dev).\n\n## Workflow\n\n- Create a feature branch\n- Edit theme locally\n- Commit changes to the feature branch\n- Merge feature branch with main branch once feature is implemented. A production build will be created and pushed to the `dist` branch using Github Actions.\n\n## Getting started\n\n### Prerequisites\n\n- [Node.js](https://nodejs.org/)\n- [Shopify CLI](https://shopify.dev/themes/getting-started/create#step-1-install-shopify-cli)\n\n### Installation\n\n1. **Clone the repo and install theme**: Run the following commands:\n\n   ```bash\n   git clone git@github.com:wesselvanree/shopify-theme-tailwind.git\n   cd shopify-theme-tailwind\n   npm install\n   npm run install-theme\n   rm -rf .git \u0026\u0026 git init\n   ```\n\n   If your default branch is not called `main`, please replace `main` with your\n   default branch name in `.github/workflows/deploy.yml`.\n\n2. **Add script and link tags**: Include `index.min.css` and `index.bundle.js` in the head tag (after `base.css`) `shopify/layout/theme.liquid`\n\n   ```liquid\n   {{ 'index.min.css' | asset_url | stylesheet_tag }}\n   \u003cscript src='{{ 'index.bundle.js' | asset_url }}' defer='defer'\u003e\u003c/script\u003e\n   ```\n\n   You also need to include other script tags and styles you have added to the entries directory yourself. Vite extracts CSS for each entry to a `[name].min.css` file in the assets directory, when a stylesheet is shared between multiple entries it becomes a separate css file in the assets directory.\n\n3. **Setup Shopify Github integration**: Once you've pushed your first commit to github, a `dist` branch will be\n   created. Use the Shopify Github integration to sync your theme with the\n   `dist` branch by going to `your admin dashboard` \u003e `Online Store` \u003e\n   `Themes` \u003e `Add Theme` \u003e `Connect from Github`.\n\n4. **Customize tailwind config**: By default, `tailwind.config.ts` includes custom options for the Dawn theme:\n\n   - Prefix has been set to `tw-`\n   - `rem` units of the default config are converted to a root font-size of `10px`\n   - Use CSS variables set in `theme.liquid` (Dawn) in tailwind config\n   - Custom screen breakpoints\n   - Preflight has been disabled\n\n## Usage\n\n### Development\n\nYou will need 2 terminal windows:\n\n1. Start watching for local changes\n\n   ```bash\n   npm run dev\n   ```\n\n2. Serve your Shopify theme\n\n   ```bash\n   shopify theme dev --store your-store-name.myshopify.com\n   npm run shopify\n   ```\n\nIf you prefer to use one single terminal window, you can customize the scripts\nin `package.json` to use the [npm-run-all](https://www.npmjs.com/package/npm-run-all) package.\n\n### Production\n\nThis repository contains a Github Action that uses\n[JamesIves/github-pages-deploy-action@4.1.4](https://github.com/JamesIves/github-pages-deploy-action).\nThis action does not activate Github Pages in your repository but just commits\nthe build to another branch. Currently, the action is configured to deploy the\nbuild to the dist branch. You can easily customize this by editing\n`.github/workflows/deploy.yml`.\n\n\u003e :warning: Changes made from the Shopify theme editor after deployment will be committed to the `dist` branch by the Shopify Github integration. You need to manually copy these changes before updating the main branch otherwise these changes will be lost.\n\n## Final notes\n\nYou might find it useful to copy the Lighthouse Github Action from the original\n[Dawn theme](https://github.com/Shopify/dawn) repository to track the\nperformance of your theme on every push.\n\n### Further reading\n\n- [shopify.dev](https://shopify.dev)\n- [Tools for building Shopify themes](https://shopify.dev/themes/tools)\n- [Version control for Shopify themes best practices](https://shopify.dev/themes/best-practices/version-control)\n\n### Suggestions\n\nIf you have any suggestions to improve this repository, please open an issue. I\nwould be happy to hear from you.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwesselvanree%2Fshopify-theme-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwesselvanree%2Fshopify-theme-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwesselvanree%2Fshopify-theme-tailwind/lists"}