{"id":21826185,"url":"https://github.com/brandtam/dawn-tailwind-shopify-theme","last_synced_at":"2025-07-02T09:05:31.356Z","repository":{"id":198545957,"uuid":"700606701","full_name":"brandtam/dawn-tailwind-shopify-theme","owner":"brandtam","description":"An opinionated way to setup a working Shopify theme using TailwindCSS with Dawn as a starting point. Vite does the Tailwind magic in real time.","archived":false,"fork":false,"pushed_at":"2023-10-04T23:36:18.000Z","size":932,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-01T23:23:51.044Z","etag":null,"topics":["shopify","shopify-theme","tailwindcss","vite"],"latest_commit_sha":null,"homepage":"","language":"Liquid","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/brandtam.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE.md","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null}},"created_at":"2023-10-04T23:30:20.000Z","updated_at":"2024-11-05T16:15:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"44efbb9a-6196-4a50-9197-efa675906940","html_url":"https://github.com/brandtam/dawn-tailwind-shopify-theme","commit_stats":null,"previous_names":["brandtam/dawn-tailwind-shopify-theme"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/brandtam/dawn-tailwind-shopify-theme","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandtam%2Fdawn-tailwind-shopify-theme","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandtam%2Fdawn-tailwind-shopify-theme/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandtam%2Fdawn-tailwind-shopify-theme/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandtam%2Fdawn-tailwind-shopify-theme/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brandtam","download_url":"https://codeload.github.com/brandtam/dawn-tailwind-shopify-theme/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brandtam%2Fdawn-tailwind-shopify-theme/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263108810,"owners_count":23415005,"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","shopify-theme","tailwindcss","vite"],"created_at":"2024-11-27T18:03:25.624Z","updated_at":"2025-07-02T09:05:31.332Z","avatar_url":"https://github.com/brandtam.png","language":"Liquid","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Dawn + Tailwind CSS\n\nAdd `node_modules` to `.gitignore`\n```bash\necho \"node_modules\" \u003e\u003e .gitignore\n```\n\nInit a new pnpm project and install [Vite](https://vitejs.dev/) and [Tailwind CSS](https://tailwindcss.com/).\n```bash\npnpm init \u0026\u0026 pnpm i -D vite tailwindcss postcss autoprefixer\n```\n\nAdd config files and shopifyignore\n```bash\ntouch vite.config.js postcss.config.js tailwind.config.js tailwind.css .shopifyignore\n```\n---\nAdd the following to `tailwind.css`\n```css\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n```\n---\nAdd the following to `tailwind.config.js`\n```js\n/** @type {import('tailwindcss').Config} */\nexport default {\n\tprefix: 'tw-', // Avoid conflicts with Shopify's CSS. Make it whatever you want.\n\tcontent: [\n\t\t\"./**/*.{js,json,liquid}\", // updated to include theme files \n\t],\n\ttheme: {\n\t\textend: {},\n\t},\n\tplugins: [],\n}\n```\n---\nAdd the following to `postcss.config.js`\n```js\nmodule.exports = {\n\tplugins: {\n\t\ttailwindcss: {},\n\t\tautoprefixer: {},\n\t}\n}\n```\n---\nAdd the following to `vite.config.js`\n```js\nimport { defineConfig } from 'vite';\n\nexport default defineConfig({\n\tbuild: {\n\t\toutDir: 'assets',\n\t\temptyOutDir: false,\n\t\tminify: false,\n\t\trollupOptions: {\n\t\t\tinput: 'tailwind.css',\n\t\t\toutput: {\n\t\t\t\tdir: 'assets',\n\t\t\t\tassetFileNames: 'styles.css',\n\t\t\t},\n\t\t},\n\t},\n});\n```\n---\nAdd scripts to `package.json`.\n\nMake sure to replace `yourstore.myshopify.com` with your store's url\n```json\n\"scripts\": {\n\t\"dev\": \"shopify theme dev -s yourstore.myshopify.com\",\n\t\"build\": \"vite build --minify\",\n\t\"watch\": \"vite build --watch\"\n}\n```\n---\nAdd the following to `.shopifyignore`.\n\nIn this example the lock file is pnpm's `pnpm-lock.yaml` but you can use `yarn.lock` or `package-lock.json` as well depending on the package manager you use.\n```bash\npackage.json\npnpm-lock.yaml\n```\n## Usage\n\nIn order to use Tailwind CSS in your theme you need to import the `styles.css` file in your `theme.liquid` file directly below `{{ 'base.css' | asset_url | stylesheet_tag }}`.\n\n```liquid\n{{ 'styles.css' | asset_url | stylesheet_tag }}\n```\n\n### Development\nRun the Shopify theme watcher in one terminal\n```bash\npnpm run dev\n```\nIn another terminal run the Vite server to watch for changes so that it can update the `assets/styles.css` file in real time.\n```bash\npnpm run watch\n```\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandtam%2Fdawn-tailwind-shopify-theme","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrandtam%2Fdawn-tailwind-shopify-theme","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrandtam%2Fdawn-tailwind-shopify-theme/lists"}