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:

1. not to use them
2. run npm run review

Tailwind CSS

The official plugins are installed by default:

• @tailwindcss/typography
• @tailwindcss/forms
• @tailwindcss/container-queries
• @tailwindcss/aspect-ratio

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 latest lts/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 Format
• StandardJS
• Prettier
• Markdown Lint
• Red Hat YAML (LSP)
• Even Better TOML

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

1. Clone the template:
   1. using npx: npx degit gacallea/elm_vite_tailwind_template my-elm-app
   2. local binary: degit gacallea/elm_vite_tailwind_template my-elm-app
2. Enter the project: cd my-elm-app
3. Install dependencies: npm install
4. Start developing: npm run dev

Available Commands

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.