haml_tailwind_monkeypatch Tailwind Templates

Haml_tailwind_monkeypatch

A monkeypatch that makes Tailwind CSS easier to use with HAML

A monkeypatch for HAML to make it easier to write Tailwind CSS.

How it works

Instead of writing:

%div{class: "ab cd ef sm:gh sm: ij focus:kl focus:mn hover:op md:pq..."}

You can write:

%div{class: "ab cd ef",
     sm:    "gh ij",
     md:    "pq",
     focus: "kl mn",
     hover: "op"}

Since the class attribute is repeated mulitple times, the monkeypatch also include a c attribute as an abbreviated form:

%div{c: "ab cd"}

is the same as

%div{class: "ab cd"}

How to use it

Paste the monkeypatch in app/helpers/application_helper.rb after your ApplicationHelper module code.

Note

This patch has only been tested for HAML 5.1.2. If you're using this with a newer version of HAML, I'd suggest you have a look at the original parse function and change the monkeypatch as necessary (please make a PR while you're at it!).

Top categories

Loading Svelte Themes