Skip to content

Introduction to styled-ppx

Typed styled components in Reason, OCaml and ReScript

Write your styles in CSS inside Reason/OCaml/ReScript files and generate components, classnames or composable CSS rules.

  • Component-based
  • Type-safe static CSS
  • No abstraction over standard CSS, neither a new DSL
  • Build on top of emotion
  • Support entirely the language: pattern-matching, composition, labelled arguments.

styled-ppx is a ppx you can learn more in the Real World OCaml: Preprocessing with ppx. For now, are similar to babel-plugins which transform your code.

module Center = [%styled.div {|
height: 100vh;
width: 100vw;
display: flex;
align-items: center;
justify-content: center;
|}];
<Center>
{React.string("Hello from the future!")}
</Center>