{"id":31601564,"url":"https://github.com/selfmadesystem/monaco-tailwind","last_synced_at":"2025-10-06T07:12:58.126Z","repository":{"id":310891391,"uuid":"1041676380","full_name":"SelfMadeSystem/monaco-tailwind","owner":"SelfMadeSystem","description":"Tailwind v4 integration for Monaco","archived":false,"fork":false,"pushed_at":"2025-08-23T20:01:09.000Z","size":63,"stargazers_count":4,"open_issues_count":3,"forks_count":2,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-22T14:31:32.929Z","etag":null,"topics":["css","monaco","tailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","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/SelfMadeSystem.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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}},"created_at":"2025-08-20T21:05:08.000Z","updated_at":"2025-09-17T15:59:24.000Z","dependencies_parsed_at":"2025-08-20T21:57:30.149Z","dependency_job_id":"a0e31739-0658-479c-9e3e-f1dbbfda0004","html_url":"https://github.com/SelfMadeSystem/monaco-tailwind","commit_stats":null,"previous_names":["selfmadesystem/monaco-tailwind"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/SelfMadeSystem/monaco-tailwind","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SelfMadeSystem%2Fmonaco-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SelfMadeSystem%2Fmonaco-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SelfMadeSystem%2Fmonaco-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SelfMadeSystem%2Fmonaco-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/SelfMadeSystem","download_url":"https://codeload.github.com/SelfMadeSystem/monaco-tailwind/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/SelfMadeSystem%2Fmonaco-tailwind/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":278572347,"owners_count":26008759,"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","status":"online","status_checked_at":"2025-10-06T02:00:05.630Z","response_time":65,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["css","monaco","tailwind","tailwindcss"],"created_at":"2025-10-06T07:12:56.969Z","updated_at":"2025-10-06T07:12:58.120Z","avatar_url":"https://github.com/SelfMadeSystem.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Monaco Tailwindcss\n\n[![npm version](https://img.shields.io/npm/v/monaco-tailwind)](https://www.npmjs.com/package/monaco-tailwind)\n\n[Tailwindcss](https://tailwindcss.com) integration for\n[Monaco editor](https://microsoft.github.io/monaco-editor).\n\n## Table of Contents\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [Related projects](#related-projects)\n- [Showcase](#showcase)\n- [License](#license)\n\n## Installation\n\n```sh\nnpm install monaco-tailwind\n```\n\n## Usage\n\nImport `monaco-tailwind` and configure it before an editor instance is created.\n\n```typescript\nimport * as monaco from 'monaco-editor'\nimport { configureMonacoTailwindcss, tailwindcssData } from 'monaco-tailwind'\n\nmonaco.languages.css.cssDefaults.setOptions({\n  data: {\n    dataProviders: {\n      tailwindcssData\n    }\n  }\n})\n\nconfigureMonacoTailwindcss(monaco)\n\nmonaco.editor.create(document.createElement('editor'), {\n  language: 'html',\n  value: `\u003c!doctype html\u003e\n\u003chtml lang=\"en\"\u003e\n  \u003chead\u003e\n    \u003cmeta charset=\"utf-8\" /\u003e\n  \u003c/head\u003e\n  \u003cbody\u003e\n    \u003cdiv class=\"w-6 h-6 text-gray-600 bg-[#ff8888] hover:text-sky-600 ring-gray-900/5\"\u003e\u003c/div\u003e\n  \u003c/body\u003e\n\u003c/html\u003e\n`\n})\n```\n\nAlso make sure to register the web worker. When using Webpack 5, this looks like the code below.\nOther bundlers may use a different syntax, but the idea is the same. Languages you don’t used can be\nomitted.\n\n```js\nwindow.MonacoEnvironment = {\n  getWorker(moduleId, label) {\n    switch (label) {\n      case 'editorWorkerService':\n        return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url))\n      case 'css':\n      case 'less':\n      case 'scss':\n        return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url))\n      case 'handlebars':\n      case 'html':\n      case 'razor':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url)\n        )\n      case 'json':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url)\n        )\n      case 'javascript':\n      case 'typescript':\n        return new Worker(\n          new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url)\n        )\n      case 'tailwindcss':\n        return new Worker(new URL('monaco-tailwind/tailwindcss.worker', import.meta.url))\n      default:\n        throw new Error(`Unknown label ${label}`)\n    }\n  }\n}\n```\n\n## Related projects\n\n- [demo page](https://selfmadesystem.github.io/monaco-tailwind) - A demo page for this package\n- [monaco-tailwindcss](https://monaco-tailwindcss.js.org) - like this package, but for TailwindCSS v3.0 and made by [Remco Haszing](https://remcohaszing.nl)\n- [monaco-unified](https://monaco-unified.js.org)\n- [monaco-yaml](https://monaco-yaml.js.org)\n\n## Showcase\n\n- [uiverse](https://uiverse.io) - A website to find and share UI components, built with this package\n- [Live JSX App](https://live-jsx-app.shoghisimon.ca) - A live demo of this package for TailwindCSS v4.0\n\n## License\n\n[MIT](LICENSE.md) © [SelfMadeSystem](https://shoghisimon.ca)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselfmadesystem%2Fmonaco-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fselfmadesystem%2Fmonaco-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fselfmadesystem%2Fmonaco-tailwind/lists"}