{"id":15467652,"url":"https://github.com/leojpod/elm-tailwindcss-parcel-starter","last_synced_at":"2025-04-22T11:27:34.753Z","repository":{"id":145361839,"uuid":"288123441","full_name":"leojpod/elm-tailwindcss-parcel-starter","owner":"leojpod","description":"a quick starter for simple elm project with parcel, tailwindcss and parcel ","archived":false,"fork":false,"pushed_at":"2021-12-17T17:30:46.000Z","size":971,"stargazers_count":6,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T14:41:20.084Z","etag":null,"topics":["elm","parcel","tailwindcss","template"],"latest_commit_sha":null,"homepage":"","language":"Elm","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/leojpod.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-08-17T08:20:12.000Z","updated_at":"2022-04-19T13:39:37.000Z","dependencies_parsed_at":null,"dependency_job_id":"9fdc804d-ec25-4391-b000-37cf1dd8b710","html_url":"https://github.com/leojpod/elm-tailwindcss-parcel-starter","commit_stats":null,"previous_names":[],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojpod%2Felm-tailwindcss-parcel-starter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojpod%2Felm-tailwindcss-parcel-starter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojpod%2Felm-tailwindcss-parcel-starter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leojpod%2Felm-tailwindcss-parcel-starter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leojpod","download_url":"https://codeload.github.com/leojpod/elm-tailwindcss-parcel-starter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250230887,"owners_count":21396379,"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":["elm","parcel","tailwindcss","template"],"created_at":"2024-10-02T01:23:20.282Z","updated_at":"2025-04-22T11:27:34.738Z","avatar_url":"https://github.com/leojpod.png","language":"Elm","funding_links":[],"categories":[],"sub_categories":[],"readme":"# elm-tailwindcss-parcel-starter\n\n[![GitHub Page example](https://github.com/leojpod/elm-tailwindcss-parcel-starter/actions/workflows/build_and_deploy.yml/badge.svg)](https://github.com/leojpod/elm-tailwindcss-parcel-starter/actions/workflows/build_and_deploy.yml)\n\nI used to work with [create-elm-app](https://github.com/halfzebra/create-elm-app)\nbut for the past year or so I've been using a simpler set-up.\nInstead of rewriting that set-up all the time, I decided to make it a template\nand here it is.\nThis set-up aims to be simple yet fully working for writing elm applications\nstyled with tailwindcss and packed up with parcel.js.\n\nYou can see the result [here](https://leojpod.github.io/elm-tailwindcss-parcel-starter)\n\n## Running it\n\nOnce you've created your new project with this template just `cd` in it and run:\n\n```sh\nnpm install\n```\n\nOnce you've all the dependencies installed, you just need to run `npm start`\nwhich uses [`run-pty`](https://github.com/lydell/run-pty) to run several\ncommands side by side. In our case, it will run the script to generate the CSS\nvia the tailwind CLI and pack everything up in a nice development server with parcel.\nIt will also start an [elm-doc-preview](https://github.com/dmy/elm-doc-preview)\nso you don't need to hit the [package.elm-lang.com](package.elm-lang.com) to\nread the doc of any elm package you've installed on your machine, ain't it cool?\n\nAs a bonus, `npm start` will also run [`elm-review`](https://github.com/jfmengels/elm-review/)\nevery time your code change.\n\nThat should be all!\n\n## How does it work?\n\n### Start with CSS\n\nThe build step is quite simple in truth. Firstly, the\n[tailwind-cli](http://tailwindcss.com/) is responsible for generating a single\ncss file from the `tailwind.config.js` file and the `src/css/style.css`\nfile as well as any CSS file you'd refer too from that entry point.\nThe single CSS file is generated at `src/style.css` (this will change one day\nand be placed somewhere else than in `src`).\nThis css build step can be run either by `npm run css:build`, which will run\nonce, or by running `npm run css:watch` which will run the build each time the\n`tailwind.config.js` file is changed or one of the CSS file inside `src/css/` does.\nLastly, `npm run css:prod` will activate tailwind's purging and remove from the\ngenerated CSS any tailwind rule that is not used.\n\n**_NOTE:_** with tailwindcss v3 and the Just-in-time mode, I had to add the `SAFELISTING` trick to preserve my work workflow.\nI usually start with a rough UI that I make in elm, then I jump in the dev-tools of my browser and fine tune the classes.\nThe `safelist` trick allows to \"force\" the JIT to generate all the classes so that I can keep tweaking stuff in my web-browser.\n\n### Build the rest with parcel\n\n[Parcel](parceljs.org) is used to pack everything else and generate the final\nfiles. I won't say much about parcel in here since their doc is great and the\nmain benefit of Parcel is that it only need an entry point to workout what you\nneed for your build. In this template, the entry point is simply\n`src/index.html`. From there, Parcel detects `src/index.ts` which loads the\n`src/elm/Main.elm`, etc.\n\nThe files generated by Parcel are all hashed to make it easier to work with\nupdating assets:\n\n- only the `index.html` needs to be invalidated from cache (e.g. Amazon cloudfront, ...)\n- the hashes won't change if the file content won't change\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleojpod%2Felm-tailwindcss-parcel-starter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleojpod%2Felm-tailwindcss-parcel-starter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleojpod%2Felm-tailwindcss-parcel-starter/lists"}