Write your notes in Obsidian with UnoCSS.

If you're not yet familiar with Nólëbase or the accompanying Nólëbase Integrations, let me introduce you. Nólëbase is an open-source knowledge base that utilizes VitePress for rendering, and it is a collaborative effort from its community of contributors.

To integrate Obsidian plugins with VitePress-rendered pages effectively, we launched the Nólëbase Integrations project. This initiative aims to create a suite of plugins that enhance the functionality of popular Obsidian plugins, enabling them to be able to work in the browsers as rendered pages.

When crafting documentation in Nólëbase, creating numerous visual components is crucial for enhancing the documents with dynamic and interactive user interfaces. This not only makes the content more digestible but also more engaging. Previously, Obsidian lacked the functionality to effectively integrate and apply styles from atomic CSS frameworks like Tailwind CSS and Windi CSS to HTML elements within its platform.

This is where Obsidian UnoCSS Plugin kicks in, it allows you to write your notes in Obsidian with UnoCSS. By doing so, it has built a bridge by allowing the use of sufficiently simple and user-friendly atomic CSS classes, which enhances the aesthetics and functionality of the notes and documents we write in Obsidian.

• 🪄 Whatever UnoCSS supports.
• 📦 Out of the box supports for atomic CSS classes that used by famously known Tailwind CSS and Windi CSS.
• 🚀 Blazingly fast hot-reloading capabilities during editing.
• 🎁 Stunning icons from Iconify.

• Embed interactive components in your notes.
• Style your notes with atomic CSS classes.
• Use themes and color schemes from UnoCSS communities.
• Import the icons from Iconify.
• Animate your notes.
• Documenting color theories.
• Documenting UI/UX knowledge.
• Demonstrating the back scene of Mathemathics and Physics like manim
• And more...

Show me what you can do

It's all basic just a set of HTML.

Currently, it is a bit hard to install the plugin for now before it is published to the official Obsidian plugin store. Manual downloading and installation is required.

1. Install the BRAT plugin right from the official Obsidian plugin store.
2. Enable the BRAT plugin in the community plugins settings menu.
3. Open Command palette to choose BRAT: Plugins: Add a beta plugin for testing.
4. Copy and paste the following link to the first field of the new prompted dialog:

https://github.com/nolebase/obsidian-plugin-unocss

5. Find the needed released version on Release page of Obsidian UnoCSS Plugin, for example, fill in 0.1.0.
6. Enable the "UnoCSS" plugin from the Installed plugins list.

1. Navigate to the Release page of Obsidian UnoCSS Plugin
2. Find the latest version of the plugin.
3. Download the main.js file and manifest.json file.
4. Open up the .obsidian/plugins directory of your Obsidian vault.
5. If no .obsidian/plugins directory exists, create one.
6. Create a new directory named obsidian-plugin-unocss inside the .obsidian/plugins directory.
7. Move main.js file and manifest.json file into the obsidian-plugin-unocss directory.

The directory structure should look like this after these steps:

❯ tree
.
├── main.js
├── manifest.json

8. Enable the "UnoCSS" plugin from the "Installed plugins" list.

• Auto completion for CSS classes.
• Annotation decoration for UnoCSS identifiable classes.

1. As Build a plugin - Developer Documentation has suggested, create a separate vault for development.
2. (Optional) Install the hot-reload plugin: pjeby/hot-reload.
3. Create a .obsidian/plugins directory in the vault root.
4. Clone this repository into the .obsidian/plugins directory.
5. Install dependencies

pnpm install

If you use @antfu/ni, you can also use the following command:

ni

6. Build the plugin

pnpm run build

If you use @antfu/ni, you can also use the following command:

nr build

7. Reload Obsidian to see the changes. (If you use the hot-reload plugin, you don't need to reload Obsidian manually.)

Reloading can be called from the command palette with Reload app without saving command.

pnpm run build

If you use @antfu/ni, you can also use the following command:

nr build