Getting Tailwind to Work with Elm Book

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • WorkOS - The modern identity platform for B2B SaaS
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • elm-css

    Typed CSS in Elm.

  • Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

  • elm-live

    ⚡ A flexible dev server for Elm. Live reload included.

  • However, getting it to work in elm-live, which elm-book wraps, was a bit challenging. I wanted to layout how to get this to work in case you’d like to use Tailwind or your own CSS framework.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • elm-book

    Rich documentation builder for Elm applications and packages. Inspired by Storybook and HexDocs.

  • However, getting it to work in elm-live, which elm-book wraps, was a bit challenging. I wanted to layout how to get this to work in case you’d like to use Tailwind or your own CSS framework.

  • webpack

    A bundler for javascript and friends. Packs many modules into a few bundled assets. Code Splitting allows for loading parts of the application on demand. Through "loaders", modules can be CommonJs, AMD, ES6 modules, CSS, Images, JSON, Coffeescript, LESS, ... and your custom stuff.

  • Most front-end frameworks nowadays include these features as part of their CLI’s such as Create React App, Angular’s ng-cli, etc. For those that don’t, many will use a combination of some type of bundler like Parcel, Rollup, or Webpack and a browser refresher like livereload. This enables you to write code, save it, and immediately see the results. This in turn leads to fast feedback as you iterate all day in this build loop. The native Elm Reactor doesn’t offer this ability and elm-live fits the bill as a small Node.js library to enable this.

  • VuePress

    📝 Minimalistic Vue-powered static site generator

  • Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

  • Tailwind CSS

    A utility-first CSS framework for rapid UI development.

  • Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

  • storybook

    Storybook is a frontend workshop for building UI components and pages in isolation. Made for UI development, testing, and documentation.

  • Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

  • WorkOS

    The modern identity platform for B2B SaaS. The APIs are flexible and easy-to-use, supporting authentication, user identity, and complex enterprise features like SSO and SCIM provisioning.

    WorkOS logo
  • Rollup

    Next-generation ES module bundler

  • Most front-end frameworks nowadays include these features as part of their CLI’s such as Create React App, Angular’s ng-cli, etc. For those that don’t, many will use a combination of some type of bundler like Parcel, Rollup, or Webpack and a browser refresher like livereload. This enables you to write code, save it, and immediately see the results. This in turn leads to fast feedback as you iterate all day in this build loop. The native Elm Reactor doesn’t offer this ability and elm-live fits the bill as a small Node.js library to enable this.

  • parcel

    The zero configuration build tool for the web. 📦🚀

  • Most front-end frameworks nowadays include these features as part of their CLI’s such as Create React App, Angular’s ng-cli, etc. For those that don’t, many will use a combination of some type of bundler like Parcel, Rollup, or Webpack and a browser refresher like livereload. This enables you to write code, save it, and immediately see the results. This in turn leads to fast feedback as you iterate all day in this build loop. The native Elm Reactor doesn’t offer this ability and elm-live fits the bill as a small Node.js library to enable this.

  • Elm

    Compiler for Elm, a functional language for reliable webapps.

  • Trying to help build a design system at work in my spare time; no clue if it will go anywhere but it’s fun regardless. I asked the Elm Slack group what the equivalent of React Storybook. Specifically, I wanted a way to build a documentation website like Vuepress with the ability to host native Elm code to showcase components. They pointed me to Elm Book. While Elm Book has built-in theming capabilities, I needed CSS control over my components. While they support elm-css, I wanted the ability to use TailwindCSS. The Elm libraries haven’t kept up with Tailwind’s changes, which is fine; writing raw Tailwind CSS on Elm HTML functions is easy and co-located with the component you’re styling.

  • create-react-app

    Set up a modern web app by running one command.

  • Most front-end frameworks nowadays include these features as part of their CLI’s such as Create React App, Angular’s ng-cli, etc. For those that don’t, many will use a combination of some type of bundler like Parcel, Rollup, or Webpack and a browser refresher like livereload. This enables you to write code, save it, and immediately see the results. This in turn leads to fast feedback as you iterate all day in this build loop. The native Elm Reactor doesn’t offer this ability and elm-live fits the bill as a small Node.js library to enable this.

  • Angular

    Deliver web apps with confidence 🚀

  • Most front-end frameworks nowadays include these features as part of their CLI’s such as Create React App, Angular’s ng-cli, etc. For those that don’t, many will use a combination of some type of bundler like Parcel, Rollup, or Webpack and a browser refresher like livereload. This enables you to write code, save it, and immediately see the results. This in turn leads to fast feedback as you iterate all day in this build loop. The native Elm Reactor doesn’t offer this ability and elm-live fits the bill as a small Node.js library to enable this.

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts