This page is part of a static HTML representation of the TiddlyWiki at

How to apply custom styles by tag

 4th July 2022 at 5:42pm

Deprecated since:5.1.16(seeCustom styles by data-tags). Also see: How to apply custom styles

You can apply custom styles to tiddlers that have a particular tag by defining a CSS class with the name tc-tagged-<Tag Name>.

For example, to make tiddlers tagged "NightReader" appear in a special colour scheme suitable for night-time reading, create a stylesheet defining the class tc-tagged-NightReader like this:

.tc-tagged-NightReader {
	color: orange;
	padding: 35px 35px;

.tc-tagged-NightReader .tc-tiddler-body {
	font-size: 1.5em;

The tc-tagged-NightReader class is applied to the entire tiddler and not just the tiddler text. If you want to target a smaller portion of the tiddler you can qualify the CSS selector, as is done here with .tc-tagged-NightReader .tc-tiddler-body.

Note that tags containing spaces or non-alphanumeric characters will be converted using URI encoding, making the generated CSS classname hard to predict. For example:

TagGenerated Class Name
Doctor Whotc-tagged-Doctor%20Who

Although TiddlyWiki will generate these tags, to actually use them in your css, you will need to escape the percent character in your stylesheet, like:

.tc-tagged-Doctor\%20Who {
    background-image: url(./tardis_back.svg);
    background-repeat: no-repeat;
    background-position: right;

A utility function is available in JavaScript to perform the conversion:


Generates the following output: