Shortcodes
In hindsight the below is probably achievable with normal variable syntax (i.e. without .Scratch), but it works.
Since TailwindCSS is all about the ability to add & edit styles directly in the HTML, I wanted to create a shortcode that would generate different colored alerts without having to modify any CSS stylesheets. This was the result:
{{ .Scratch.Set "info" "blue" }}
{{ .Scratch.Set "error" "red" }}
{{ .Scratch.Set "warning" "yellow" }}
{{ .Scratch.Set "success" "green" }}
{{- $input := ( .Get 0 ) -}}
{{ $color := .Scratch.Get $input }}
<div class="flex items-center h-12 p-4 text-sm text-left text-{{ $color }}-700 bg-{{ $color }}-100 border border-{{ $color }}-300" role="alert" >
{{ .Inner }}
</div>But of course I had to figure it out the long way, so the below method also works:
{{ .Scratch.SetInMap "alert" "info" "blue" }}
{{ .Scratch.SetInMap "alert" "error" "red" }}
{{ .Scratch.SetInMap "alert" "warning" "yellow" }}
{{ .Scratch.SetInMap "alert" "success" "green" }}
{{- $input := ( .Get 0 ) -}}
{{ $index := .Scratch.Get "alert" }}
{{ $color := index $index $input }}
...Basically the key/value pairs (type & color) are being assigned to a .Scratch key (alert). The next part of the code iterates over the .Scratch key to retrieve the color value associated with the inputted type key.
I had to pull $index into its own variable because iterating over the .Scratch key directly resulted in errors.