Tailwind CSS Typed

Definition of Tailwind CSS classes as Elm types.

Example

Look in div's attribute list.

import TailwindCSS exposing (..)
import Html exposing (Html, div, text)

view : String -> Html msg
view str =
  div [ tailwind [ TextGreen400, HOVER BgYellow400 ] ]
    [ text "Green \"" ++ str ++ "\" with yellow background on hover"
    ]

If you call view "Hello world!" you get something like this:

<div class="text-green-400 hover:bg-yellow-400">
    Green "Hello world!" with yellow background on hover
</div>

Naming conventions

• All types starts with a capital letter.
• All letters after hyphens are uppercase.
• All hyphens are removed.
• Slash between numbers changed to underscore.
• Negating minus in beginning changed to postfix underscore.

Examples: