{"id":19793378,"url":"https://github.com/nolebase/obsidian-plugin-unocss","last_synced_at":"2025-06-26T09:32:22.774Z","repository":{"id":212939893,"uuid":"732638585","full_name":"nolebase/obsidian-plugin-unocss","owner":"nolebase","description":"An Obsidian plugin enables you writing notes with atomic CSS that supported by UnoCSS directly in Obsidian, with hot-reload support!","archived":false,"fork":false,"pushed_at":"2025-04-21T19:15:04.000Z","size":420,"stargazers_count":8,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-21T20:29:13.436Z","etag":null,"topics":["atomic-css","iconify","nolebase","obsidian","obsidian-plugin","tailwind-css","tailwindcss","unocss","windi-css","windicss"],"latest_commit_sha":null,"homepage":"https://nolebase-integrations.ayaka.io/pages/en/integrations/obsidian-plugin-unocss/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nolebase.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null},"funding":{"github":["LittleSound","nekomeowww"]}},"created_at":"2023-12-17T11:06:38.000Z","updated_at":"2025-04-16T04:42:56.000Z","dependencies_parsed_at":"2024-03-04T11:44:32.539Z","dependency_job_id":"a63a3344-0327-4e24-8005-49ebb5422daf","html_url":"https://github.com/nolebase/obsidian-plugin-unocss","commit_stats":null,"previous_names":["nolebase/obsidian-plugin-unocss"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolebase%2Fobsidian-plugin-unocss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolebase%2Fobsidian-plugin-unocss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolebase%2Fobsidian-plugin-unocss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nolebase%2Fobsidian-plugin-unocss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nolebase","download_url":"https://codeload.github.com/nolebase/obsidian-plugin-unocss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251812256,"owners_count":21647872,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["atomic-css","iconify","nolebase","obsidian","obsidian-plugin","tailwind-css","tailwindcss","unocss","windi-css","windicss"],"created_at":"2024-11-12T07:09:38.242Z","updated_at":"2025-05-01T02:30:40.008Z","avatar_url":"https://github.com/nolebase.png","language":"TypeScript","funding_links":["https://github.com/sponsors/LittleSound","https://github.com/sponsors/nekomeowww"],"categories":[],"sub_categories":[],"readme":"# Obsidian Plugin UnoCSS\n\n\u003e [!NOTE]\n\u003e This is one of the plugins of the collections of plugins called [Nólëbase Integrations](https://github.com/nolebase/integrations). You can explore the other plugins in the collection in [the official documentation site of Nólëbase Integrations](https://nolebase-integrations.ayaka.io).\n\n---\n\n**Write your notes in [Obsidian](https://obsidian.md/) with [UnoCSS](https://unocss.dev/).**\n\n## 🤔 Why\n\n\u003e If you're not yet familiar with [Nólëbase](https://github.com/nolebase/nolebase) or the accompanying [Nólëbase Integrations](https://github.com/nolebase/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.\n\u003e\n\u003e 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.\n\nWhen crafting documentation in [Nólëbase](https://github.com/nolebase/nolebase), 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.\nPreviously, [Obsidian](https://obsidian.md) lacked the functionality to effectively integrate and apply styles from atomic CSS frameworks like [Tailwind CSS](https://tailwindcss.com/docs/display) and [Windi CSS](https://windicss.org/) to HTML elements within its platform.\n\nThis is where Obsidian UnoCSS Plugin kicks in, it allows you to write your notes in [Obsidian](https://obsidian.md/) with [UnoCSS](https://unocss.dev/).\nBy 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.\n\n## 🎨 Features\n\n- 🪄 Whatever [UnoCSS](https://github.com/unocss/unocss) supports.\n- 📦 [Out of the box supports](https://unocss.dev/presets/wind) for atomic CSS classes that used by famously known [Tailwind CSS](https://tailwindcss.com/docs/display) and [Windi CSS](https://windicss.org/).\n- 🚀 Blazingly fast hot-reloading capabilities during editing.\n- 🎁 Stunning icons from [Iconify](https://icones.js.org/).\n\n## 💡 What can you do with it\n\n- Embed interactive components in your notes.\n- Style your notes with atomic CSS classes.\n- Use themes and color schemes from UnoCSS communities.\n- Import the icons from [Iconify](https://icones.js.org/).\n- Animate your notes.\n- Documenting color theories.\n- Documenting UI/UX knowledge.\n- Demonstrating the back scene of Mathemathics and Physics like [manim](https://github.com/ManimCommunity/manim/)\n- And more...\n\n## 📺 Demos\n\n\u003e Show me what you can do\n\n### How it looks like\n\nhttps://github.com/nolebase/obsidian-plugin-unocss/assets/11081491/96a7752a-2e24-4e49-828b-8f8847838158\n\n### What is the markup like\n\nIt's all basic just a set of HTML.\n\n\u003e [!WARNING]\n\u003e To learn more about what are the meanings of classes, I recommend you to use the documentation sites of [Tailwind CSS](https://tailwindcss.com/docs/display) and [Windi CSS](https://windicss.org/) as references.\n\nhttps://github.com/nolebase/obsidian-plugin-unocss/assets/11081491/1ff2aa44-dc7c-48b5-9dd7-0271a3661e92\n\n### Hot-reloading capabilities in live preview mode\n\n\u003e [!NOTE]\n\u003e To do so, you need to split your Obsidian view into two panes, and choose \"Source mode\" for the editing pane where you wanted to view and edit the HTML markup.\n\nhttps://github.com/nolebase/obsidian-plugin-unocss/assets/11081491/197edb93-4b21-4960-8c90-7cf79b037356\n\n## 😎 How to install\n\n\u003e [!WARNING]\n\u003e Currently Obsidian UnoCSS Plugin is in alpha stage, it wasn't guaranteed to work properly and keep the compatibility with the future versions of itself.\n\u003e\n\u003e But it is encouraged to try it out and give feedbacks. If you find and bugs or have any suggestions, please feel free to open an issue on [GitHub](https://github.com/nolebase/obsidian-plugin-unocss/issues).\n\nCurrently, 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.\n\n### Install with beta testing helper [BRAT](https://tfthacker.com/brat-quick-guide) plugin\n\n1. Install the [BRAT](https://tfthacker.com/brat-quick-guide) plugin right from the official Obsidian plugin store.\n2. Enable the BRAT plugin in the community plugins settings menu.\n3. Open Command palette to choose `BRAT: Plugins: Add a beta plugin for testing`.\n4. Copy and paste the following link to the first field of the new prompted dialog:\n\n```txt\nhttps://github.com/nolebase/obsidian-plugin-unocss\n```\n\n5. Find the needed released version on [Release page of Obsidian UnoCSS Plugin](https://github.com/nolebase/obsidian-plugin-unocss/releases), for example, fill in `0.1.0`.\n6. Enable the \"UnoCSS\" plugin from the `Installed plugins` list.\n\n### Install manually\n\n1. Navigate to the [Release page of Obsidian UnoCSS Plugin](https://github.com/nolebase/obsidian-plugin-unocss/releases)\n2. Find the [latest version of the plugin](https://github.com/nolebase/obsidian-plugin-unocss/releases/latest).\n3. Download the `main.js` file and `manifest.json` file.\n4. Open up the `.obsidian/plugins` directory of your Obsidian vault.\n5. If no `.obsidian/plugins` directory exists, create one.\n6. Create a new directory named `obsidian-plugin-unocss` inside the `.obsidian/plugins` directory.\n7. Move `main.js` file and `manifest.json` file into the `obsidian-plugin-unocss` directory.\n\nThe directory structure should look like this after these steps:\n\n```shell\n❯ tree\n.\n├── main.js\n├── manifest.json\n```\n\n8. Enable the \"UnoCSS\" plugin from the \"Installed plugins\" list.\n\n## ⏳ TODOs\n\n- [ ] Auto completion for CSS classes.\n- [ ] Annotation decoration for UnoCSS identifiable classes.\n\n## 💻 How to develop\n\n1. As [Build a plugin - Developer Documentation](https://docs.obsidian.md/Plugins/Getting+started/Build+a+plugin) has suggested, create a separate vault for development.\n2. (Optional) Install the hot-reload plugin: [pjeby/hot-reload](https://github.com/pjeby/hot-reload).\n3. Create a `.obsidian/plugins` directory in the vault root.\n4. Clone this repository into the `.obsidian/plugins` directory.\n5. Install dependencies\n\n```shell\npnpm install\n```\n\nIf you use [`@antfu/ni`](https://github.com/antfu/ni), you can also use the following command:\n\n```shell\nni\n```\n\n6. Build the plugin\n\n```shell\npnpm run build\n```\n\nIf you use [`@antfu/ni`](https://github.com/antfu/ni), you can also use the following command:\n\n```shell\nnr build\n```\n\n7. Reload Obsidian to see the changes. (If you use the hot-reload plugin, you don't need to reload Obsidian manually.)\n\n\u003e Reloading can be called from the command palette with `Reload app without saving` command.\n\n## 🔨 How to build\n\n```shell\npnpm run build\n```\n\nIf you use [`@antfu/ni`](https://github.com/antfu/ni), you can also use the following command:\n\n```shell\nnr build\n```\n\n### Written with ♥\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolebase%2Fobsidian-plugin-unocss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnolebase%2Fobsidian-plugin-unocss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnolebase%2Fobsidian-plugin-unocss/lists"}