miso

Platform

Styles

miso does not prescribe a single CSS strategy. Three approaches work out of the box.

1. Structured DSL (Miso.CSS)

style_ takes a list of Style values ((MisoString, MisoString) pairs). miso manages the individual properties on the DOMRef, merging and diffing them efficiently:

import qualified Miso.CSS as CSS
import           Miso.CSS.Color (Color (..))

H.div_
  [ CSS.style_
      [ CSS.display "flex"
      , CSS.flexDirection "column"
      , CSS.backgroundColor (RGB 30 30 30)
      , CSS.color (RGB 255 255 255)
      ]
  ]
  []

Custom properties can be constructed with the =: operator (re-exported from Miso.Util):

"user-select" =: "none"

2. Inline string (styleInline_)

For simple or dynamic style strings, styleInline_ sets the element's style attribute as a raw string:

CSS.styleInline_ "display:flex; gap:8px; padding:16px"

3. External stylesheets

Link external CSS files from the <head> via the styles field on Component (development only — see Development), or include them in your HTML template directly. This is the most common approach for production apps using Tailwind, Bootstrap, etc. See miso-ui for a larger example.

Stylesheets from Haskell

Miso.CSS can also express whole stylesheets (sheet_, selector_) and the Sheet constructor of CSS lets you attach one to a component during development. Colours come from Miso.CSS.Color (RGB, RGBA, HSL, named colours).