laniakea-landscape/tailwindcss-typed/1.0.0

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 laniakea-landscape/tailwindcss-typed still install under that name. 1 version of 1 come from the new location (see their notes).

Rerouted (renamed, verified). The GitHub user or repository was renamed. The tag is still there, at the new name. The Lamdera package server serves a copy recovered from https://github.com/aldebogdanov/tailwindcss-typed.

What we checked: The repo moved to github.com/aldebogdanov/tailwindcss-typed. Rebuilt with git archive from commit a470d991845a of https://github.com/aldebogdanov/tailwindcss-typed (zip prefix laniakea-landscape-tailwindcss-typed-a470d99/, America/Los_Angeles times): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 43180387459cd9dd4ef17d67a3f09a31c86dd7ad.

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/laniakea-landscape/tailwindcss-typed/zipball/1.0.0/

Tailwind CSS Typed

Definition of Tailwind CSS classes as Elm types.

Library is inspirated by afidegnum/elm-tailwind, but I used types instead functions with all advantages and disadvantages.

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"