Using Tailwind CSS

The Ema.Helper.Tailwind module provides a layout 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 :: Ema.CLI.Action -> MyModel -> MyRoute -> Asset LByteString
render emaAction model route = do
  AssetGenerated Html $ 
    Tailwind.layout emaAction (H.title "My site" >> H.base ! A.href "/") $ do 
      H.p "Hello world"

The very site you are viewing (ema.srid.ca) is a live demonstration of this helper.

Note that because the 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.

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 Tailwind 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
    Tailwind + BlazeWe recommend–but not mandate–Tailwind for CSS and blaze-html as HTML DSL