https://github.com/leojpod/elm-tailwindcss-parcel-starter
a quick starter for simple elm project with parcel, tailwindcss and parcel
https://github.com/leojpod/elm-tailwindcss-parcel-starter
elm parcel tailwindcss template
Last synced: about 1 year ago
JSON representation
a quick starter for simple elm project with parcel, tailwindcss and parcel
- Host: GitHub
- URL: https://github.com/leojpod/elm-tailwindcss-parcel-starter
- Owner: leojpod
- License: mit
- Created: 2020-08-17T08:20:12.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-12-17T17:30:46.000Z (over 4 years ago)
- Last Synced: 2025-03-29T14:41:20.084Z (about 1 year ago)
- Topics: elm, parcel, tailwindcss, template
- Language: Elm
- Homepage:
- Size: 948 KB
- Stars: 6
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# elm-tailwindcss-parcel-starter
[](https://github.com/leojpod/elm-tailwindcss-parcel-starter/actions/workflows/build_and_deploy.yml)
I used to work with [create-elm-app](https://github.com/halfzebra/create-elm-app)
but for the past year or so I've been using a simpler set-up.
Instead of rewriting that set-up all the time, I decided to make it a template
and here it is.
This set-up aims to be simple yet fully working for writing elm applications
styled with tailwindcss and packed up with parcel.js.
You can see the result [here](https://leojpod.github.io/elm-tailwindcss-parcel-starter)
## Running it
Once you've created your new project with this template just `cd` in it and run:
```sh
npm install
```
Once you've all the dependencies installed, you just need to run `npm start`
which uses [`run-pty`](https://github.com/lydell/run-pty) to run several
commands side by side. In our case, it will run the script to generate the CSS
via the tailwind CLI and pack everything up in a nice development server with parcel.
It will also start an [elm-doc-preview](https://github.com/dmy/elm-doc-preview)
so you don't need to hit the [package.elm-lang.com](package.elm-lang.com) to
read the doc of any elm package you've installed on your machine, ain't it cool?
As a bonus, `npm start` will also run [`elm-review`](https://github.com/jfmengels/elm-review/)
every time your code change.
That should be all!
## How does it work?
### Start with CSS
The build step is quite simple in truth. Firstly, the
[tailwind-cli](http://tailwindcss.com/) is responsible for generating a single
css file from the `tailwind.config.js` file and the `src/css/style.css`
file as well as any CSS file you'd refer too from that entry point.
The single CSS file is generated at `src/style.css` (this will change one day
and be placed somewhere else than in `src`).
This css build step can be run either by `npm run css:build`, which will run
once, or by running `npm run css:watch` which will run the build each time the
`tailwind.config.js` file is changed or one of the CSS file inside `src/css/` does.
Lastly, `npm run css:prod` will activate tailwind's purging and remove from the
generated CSS any tailwind rule that is not used.
**_NOTE:_** with tailwindcss v3 and the Just-in-time mode, I had to add the `SAFELISTING` trick to preserve my work workflow.
I 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.
The `safelist` trick allows to "force" the JIT to generate all the classes so that I can keep tweaking stuff in my web-browser.
### Build the rest with parcel
[Parcel](parceljs.org) is used to pack everything else and generate the final
files. I won't say much about parcel in here since their doc is great and the
main benefit of Parcel is that it only need an entry point to workout what you
need for your build. In this template, the entry point is simply
`src/index.html`. From there, Parcel detects `src/index.ts` which loads the
`src/elm/Main.elm`, etc.
The files generated by Parcel are all hashed to make it easier to work with
updating assets:
- only the `index.html` needs to be invalidated from cache (e.g. Amazon cloudfront, ...)
- the hashes won't change if the file content won't change