NOTE: the latest version is 2.0.1

Renamed to aldebogdanov/tailwindcss-typed. That is where the repository lives now. It has not been published as a package under the new name.

Versions published as lnkr-a/tailwindcss-typed still install under that name. 3 versions of 5 come from the new location (see their notes). 2 versions could not be recovered and cannot be installed.

Unavailable. Nobody can download this version any more, with elm or with the Lamdera compiler: github.com/aldebogdanov/tailwindcss-typed exists but has no tag 2.0.0; Software Heritage has not archived the repo; no fork with tag 2.0.0 found (2 same-name repos checked); no cached copy. Use another version.

README About Versions Source Modules

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 (TailwindCSS type to Tailwind Css class):

BgYellow400 to "bg-yellow-400"
BorderOpacity75 to "border-opacity-75"
SkewX12_ to "-skew-x-12"
TranslateY1_2 to "translate-y-1/2"
SM W1_2 to "sm:w-1/2"
LG W1_4 to "lg:w-1/4"
HOVER BgTeal300 to "hover:bg-teal-300"

Modules

TailwindCSS