elm-tailwind-classes - Type-safe Tailwind for Elm

Type-safe Tailwind CSS for Elm. Catch errors at compile time.

Developer Experience

Write Elm, Get Tailwind

Type-safe Tailwind with IDE autocomplete, compile-time checks, and zero runtime overhead. Plain CSS output—no CSS-in-JS performance penalty.

Button.elm

import Tailwind as Tw exposing (classes)
import Tailwind.Theme as T
import Tailwind.Breakpoints as Bp

button =
    Html.button
        [ classes
            [ Tw.px T.s6
            , Tw.py T.s3
            , Tw.bg_color (T.indigo T.s600)
            , Tw.text_simple T.white
            , Tw.rounded_lg
            , Bp.hover [ Tw.bg_color (T.indigo T.s500) ]
            ]
        ]
        [ Html.text "Click me" ]

Features

Why elm-tailwind-classes?

Compiler-Verified Styles

Misspelled bg-bluue-500? The Elm compiler catches it instantly. No more silent failures or hunting for typos in class strings.

Tw.bg_color (T.blue T.s500)

IDE Superpowers

Autocomplete every Tailwind utility. Jump to definition. Hover for docs. Discover available classes without leaving your editor.

Fearless Refactoring

Rename a color across your entire codebase with a single refactor. The compiler ensures you don't miss a single usage.

Bp.hover [ Tw.opacity_75 ]

Zero Runtime Cost

Generates plain class strings at build time. No CSS-in-JS overhead, no runtime style computation, just fast static CSS.

Tw.p T.s4

Live Examples

See It In Action

This entire page is styled using elm-tailwind-classes.

Buttons with Hover States

Typography Scale

text_xs - The quick brown foxtext_sm - The quick brown foxtext_base - The quick brown foxtext_lg - The quick brown foxtext_xl - The quick brown fox

Spacing Utilities

s10

s12

Installation

Get Started in Minutes

Add elm-tailwind-classes to your Vite project and start using type-safe Tailwind in your Elm code.

$ npm install github:dillonkearns/elm-tailwind-classes # install beta

Install

Add elm-tailwind-classes and @tailwindcss/vite to your project.

Configure

Add .elm-tailwind to elm.json sources and add Vite plugins.

Code

Import the generated modules and start styling with full type safety.

Read the Documentation