Basic Harlowe Passage Tag Based Styling

A common question that regularly gets asked about Harlowe is "How do I use Passage Tags to style Individual Passages", the following is one possible solution to this question.

note: The following assumes that you are using the version of Harlowe that comes with Twine 2.0.8, it should work on later versions of Harlowe as long as features like the special header tag and (passage:)'s tags still exist.

Although Harlowe allows an Author to access a Passage's Tags via (passage:)'s tags it currently does nothing with them, except in the case of the special startup / header / footer tags (and the hidden debug-startup / debug-header / debug-footer tags).

The following code takes any Passage Tags you assign to a Passage and adds them as CSS class attributes of the html element of the story, this then allows an Author to use CSS selectors based on those tags/classes to style individual passages.
The following should be added at the start of your story's header tagged passage. If you don't already have one then first create a new Passage (it's name is not important but I name mine Header for convenience) and then add the special header tag to the new passage.

{
(print: "<script>$('html').removeClass(\)</script>")
(if: (passage:)'s tags's length > 0)[
(print: "<script>$('html').addClass('" + (passage:)'s tags.join(' ') + "'\)</script>")
]
}

You can now use CSS like the following to style individual passages.
note: the following assumes I have given one passage in a story a desert tag and another passage a forest tag.

html {
	background-color: #FFFFFF;
}

html.desert {
	background-color: Beige;
}

html.forest {
	background-color: LightGreen;
}

I have attached a copy of an story archive which contains examples of the above code in action. You can use Twine 2's Import From File option to import it.