lnkr-a/tailwindcss-typed/1.0.1

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 f8e0ccf00df8 of https://github.com/jfmengels/tailwindcss-typed (a fork) (zip prefix lnkr-a-tailwindcss-typed-fb8d9c7/, America/Los_Angeles times): the zip is byte-identical to the one package.elm-lang.org recorded, SHA-1 399f59f6be95b26ee2c44d5874ef1a970cb11b8d.

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.1/

TailwindCSS

This library define a list of types to describe Tailwind CSS classes. Use them as arguments of tailwind function to become Attribute msg with classes.

Types

Type to represent Tailwind CSS classes. First letter become uppercase. All alphabetic chars after hyphens become uppercase. Hyphens are removed. Values like 1/2 become 1_2 with underscore instead of slash. Prefixed negation minus become postfix underscore. Pseudo classes are wrapper types.

BgYellow400 -- "bg-yellow-400"
BorderOpacity75 -- "border-opacity-75"
SkewX12_ -- "-skew-x-12"
TranslateY1_2 -- "translate-y-1/2"


SM W1_2 -- "sm:w-1/2"
LG W1_4 -- "lg:w-1/4"
HOVER BgTeal300 -- "hover:bg-teal-300"

Converter function

tailwind : List TailwindCSS -> Attribute msg

Convert a list of TailwindCSS values into a classList of Tailwind CSS classes. Designed to be used in Html elements.

Html.div [ tailwind [ BgGreen500, BgOpacity50 ]] [] -- <div class="bg-green-500 bg-opacity-50"></div>