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.

Rerouted (fork, verified). The original repository is gone. This copy comes from a fork that still has the tag. The Lamdera package server serves a copy recovered from https://github.com/jfmengels/tailwindcss-typed (a fork).

What we checked: Rebuilt with git archive from commit b8178ac6b01d of https://github.com/jfmengels/tailwindcss-typed (a fork) (zip prefix lnkr-a-tailwindcss-typed-85bda7a/, America/Los_Angeles times): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 7549ee537ba68eebc8cfdf0a5d1f76efdef3dbfa.

The Lamdera compiler uses this copy and prints a one-line notice saying so. elm itself fails to download this version.

Details · package.elm-lang.org's zip: https://github.com/lnkr-a/tailwindcss-typed/zipball/1.0.2/

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