elm_vite_tailwind_template
elm_vite_tailwind_template copied to clipboard
Opinionated template for building Elm web apps using Vite, TailwindCSS and daisyUI.
Vite, Elm, Tailwind CSS, and daisyUI
Opinionated template for building Elm web applications using Vite, Tailwind CSS, and daisyUI.
- To learn more about Elm, check out Elm's official homepage.
- For more information about Vite JS, check out Vite JS's official documentation.
- For more information about Tailwind CSS, check out Tailwind CSS's official documentation.
- For more information about daisyUI, check out daisyUI's official documentation.
Tooling
Vite
- vite-plugin-elm: compile an Elm module with hot-module reload.
- vite-plugin-webfont-dl: inject Google Fonts to improve website's performance.
- vite-plugin-compression: compress resources to improve website's performance.
- vite-plugin-imagemin: compress image assets to improve website's performance.
Elm
- elm-tooling: command line program that manages your Elm tools.
- elm-format: format Elm source code according to the official Elm Style Guide.
- elm-test: write unit and fuzz tests for Elm code.
- elm-review: analyze Elm projects and find mistakes before your users find them.
Packages
Shortlist of Elm packages that could be beneficial. Included as suggestions:
- hmsk/elm-vite-plugin-helper: provides helpers for using vite-plugin-elm.
- tesk9/accessible-html: makes writing accessible websites easier.
- lattyware/elm-fontawesome: native Font Awesome integration and support.
To remove them feel free:
- not to use them
- run
npm run review
Tailwind CSS
The official plugins are installed by default:
daisyUI
"The most popular, free and open-source Tailwind CSS component library".
daisyUI: a Tailwind CSS classes component library, aiming to work on all frameworks. The CSS nature of daisyUI makes Elm integration possible and a breeze to use. Examples included:
- the whole page is a daisyUI hero section
- the counter buttons are daisyUI buttons
- basic daisyUI 'light' and 'dark' theming/coloring (via Elm ports)
Node
- fnm: easily and consistently manage Node.
-
.nvimrc
set to use latestlts/iron
.
VS Code
- This template provides both recommended extensions and workspace settings.
- VS Code will prompt you to install them when you open the workspace for the first time.
Lint/Format
Elm + Tailwind CSS
- @max_hoffmann amazing Tailwind CSS in Elm for VSCode changes are implemented.
Get Started
Install tiged
To clone this repository, devoid of .git
, you can either use npx degit
or install tiged
locally and run degit
without npx
.
YMMV.
Tiged is a fork that addresses a number of issues, and should be preferred. To install it, run:
npm uninstall -g degit
npm install -g tiged
Most likely, npx degit
would invoke degit
. A locally installed
binary makes sure you are running tiged
instead.
Peruse the template
- Clone the template:
- using npx:
npx degit gacallea/elm_vite_tailwind_template my-elm-app
- local binary:
degit gacallea/elm_vite_tailwind_template my-elm-app
- using npx:
- Enter the project:
cd my-elm-app
- Install dependencies:
npm install
- Start developing:
npm run dev
Available Commands
script | action |
---|---|
postinstall | elm-tooling install |
dev | vite |
prebuild | elm-tooling install |
build | vite build |
preview | npm run build; vite preview |
standard | standard --fix src/*/.js |
markdown | standard-markdown --fix src/*/.md |
review | elm-review --fix-all |
test | elm-test-rs |
Contributing
Contributions and constructive criticism are welcome. If you think I'm overdoing it, feel free to discuss. I'm still experimenting with this, as a learning opportunity, and I strive to improve the template as much as possible.
pre-commit hooks (WIP)
This repo relies on pre-commit-ci to make sure all suggested coding standards are enforced with git hooks. You could also install pre-commit locally to apply the same configuration locally.
Acknowledgements
This templated was inspired by Lindsay K Wardell's template.