https://github.com/agrison/obsidian-tag-classes
Automatically adds classes based on your tags in Obsidian
https://github.com/agrison/obsidian-tag-classes
Last synced: 2 months ago
JSON representation
Automatically adds classes based on your tags in Obsidian
- Host: GitHub
- URL: https://github.com/agrison/obsidian-tag-classes
- Owner: agrison
- License: mit
- Created: 2026-04-03T16:24:57.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-03T17:03:18.000Z (3 months ago)
- Last Synced: 2026-04-03T19:33:18.912Z (3 months ago)
- Language: TypeScript
- Size: 17.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Tag Classes a plugin for Obsidian
Style your notes based on their tags without having to manually add a `cssclasses` to the frontmatter.
Tag Classes automatically injects your note's tags as CSS classes on the view container,
so you can target any note from a CSS snippet using nothing but its tags.
If you already use tags to organize your notes, then you're not forced to also add a `cssclasses` property just to style them.
Tag Classes automatically turns your existing tags into CSS classes, so your tags do double duty.
---
## How it works
Every tag on a note gets added as a CSS class on the view container.
A note tagged `#recipe` gets the class `.tag-recipe`. That's it.
A note with these tags:
```yaml
---
tags: [recipe, italian]
---
```
...will have these classes added to its view container:
```
.tag-recipe .tag-italian
```
You can then style it from any CSS snippet in `.obsidian/snippets/`:
```css
.tag-recipe .markdown-preview-view {
background: #fffbf5;
font-family: Georgia, serif;
}
.tag-recipe h1, .tag-recipe h2 {
color: #c0392b;
}
```
No `cssclasses` in the frontmatter needed. Your tags are enough.
---
## Installation
### From the Community Plugin store
1. Open **Settings → Community plugins**
2. Search for **Tag Classes**
3. Install and enable
### Manual installation
1. Download `main.js` and `manifest.json` from the [latest release](../../releases/latest)
2. Create a folder at `/.obsidian/plugins/tag-classes/`
3. Copy both files into that folder
4. Reload Obsidian and enable the plugin under **Settings → Community plugins**
---
## Usage
Once enabled, tags are automatically applied as classes — nothing else to configure.
### Targeting notes in CSS snippets
Create a file in `.obsidian/snippets/` (e.g. `tag-styles.css`):
```css
/* Notes tagged #recipe */
.tag-recipe .markdown-preview-view {
background: #fffbf5;
font-family: Georgia, serif;
}
/* Notes tagged #draft — add a visual watermark */
.tag-draft .markdown-preview-view::before {
content: "DRAFT";
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-30deg);
font-size: 6rem;
font-weight: 900;
color: rgba(0, 0, 0, 0.04);
pointer-events: none;
}
/* Notes tagged #important — colored left border */
.tag-important .markdown-preview-view {
border-left: 4px solid #f59e0b;
padding-left: 1rem;
}
/* Subtag #project/personal → .tag-project-personal */
.tag-project-personal h1 {
color: #7c3aed;
}
```
Enable your snippet under **Settings → Appearance → CSS snippets**.
---
## Settings
| Setting | Default | Description |
|---|---|---|
| **CSS prefix** | `tag-` | Prefix prepended to every tag name. A tag `recipe` becomes class `tag-recipe`. |
| **Sanitize class names** | `true` | Replaces characters invalid in CSS (e.g. `/` in subtags) with `-`. Disable if you want raw tag names. |
## License
MIT