Add CSS classes for each tag

core/modules/widgets/tiddler.js

@@ -44,10 +44,27 @@ TiddlerWidget.prototype.execute = function() {
 	this.setVariable("missingTiddlerClass",(this.wiki.tiddlerExists(this.tiddlerTitle) || this.wiki.isShadowTiddler(this.tiddlerTitle)) ? "tw-tiddler-exists" : "tw-tiddler-missing");
 	this.setVariable("shadowTiddlerClass",this.wiki.isShadowTiddler(this.tiddlerTitle) ? "tw-tiddler-shadow" : "");
 	this.setVariable("systemTiddlerClass",this.wiki.isSystemTiddler(this.tiddlerTitle) ? "tw-tiddler-system" : "");
+	this.setVariable("tiddlerTagClasses",this.getTagClasses())
 	// Construct the child widgets
 	this.makeChildWidgets();
 };
 
+/*
+Create a string of CSS classes derived from the tags of the current tiddler
+*/
+TiddlerWidget.prototype.getTagClasses = function() {
+	var tiddler = this.wiki.getTiddler(this.tiddlerTitle);
+	if(tiddler) {
+		var tags = [];
+		$tw.utils.each(tiddler.fields.tags,function(tag) {
+			tags.push("tw-tag-" + encodeURIComponent(tag));
+		});
+		return tags.join(" ");
+	} else {
+		return "";
+	}
+};
+
 /*
 Selectively refreshes the widget if needed. Returns true if the widget or any of its children needed re-rendering
 */

core/ui/ViewTemplate.tid

@@ -1,7 +1,7 @@
 title: $:/core/ui/ViewTemplate
 
 \define frame-classes()
-tw-tiddler-frame tw-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$
+tw-tiddler-frame tw-tiddler-view-frame $(missingTiddlerClass)$ $(shadowTiddlerClass)$ $(systemTiddlerClass)$ $(tiddlerTagClasses)$
 \end
 <$set name="storyTiddler" value=<<currentTiddler>>><$set name="tiddlerInfoState" value=<<qualify "$:/state/popup/tiddler-info">>><$tiddler tiddler=<<currentTiddler>>><div class=<<frame-classes>>><$list filter="[all[shadows+tiddlers]tag[$:/tags/ViewTemplate]!has[draft.of]]" variable="listItem"><$transclude tiddler=<<listItem>>/></$list>
 </div>