Using Blaze HTML & Tailwind

Tailwind 2.0

The Ema.Helper.Blaze module provides a twindLayout function that uses twind shim that is used in the statically generated site, and otherwise uses Tailwind CSS from CDN in the dev server mode. This helper is for those that use Tailwind CSS in conjunction with blaze-html DSL.

To use the layout helper in your render function:

render :: Some Ema.CLI.Action -> MyModel -> MyRoute -> Asset LByteString
render emaAction model route = do
  AssetGenerated Html $ 
    Blaze.twindLayout emaAction (H.title "My site" >> H.base ! A.href "/") $ do 
      H.p "Hello world"

Tailwind 3.0

Note that because the above twind JS shim is used to support Tailwind styles your site will not render properly on web browsers with JavaScript disabled if you use this helper; it might also have trouble interoperating with other JS initializers on the site. See this issue for upcoming alternatives.

For new Ema sites, it is recommended to use Tailwind 3.0 both in live server and static site generation. See ema-template for an approach to this. 1

Footnotes
1.
Here is the specific PR making this change.
Links to this page
  • Rendering HTML

    Of course we want it to be real, by using our model value, as well as generate the HTML based on the route. We will also use the blaze-html library to make writing HTML in Haskell palatable (see also the layout helper). A more realistic starting point (if not the finishing product) would be:

  • Hot Reload

    Finally, hot reload on code changes are supported via ghcid. The template repo's `bin/run` script uses ghcid underneath. Any HTML DSL (like blaze-html – as used by the Blaze helper) or CSS DSL automatically gets supported for hot-reload. If you choose to use a file-based HTML template language, you can enable hot-reload on template change using the FileSystem helper.

  • Helpers
    BlazeWe recommend–but not mandate–Tailwind for CSS and blaze-html as HTML DSL