Monaco Tailwindcss
Tailwindcss integration for Monaco editor.
Installation
npm install monaco-tailwindcssUsage
Import monaco-tailwindcss and configure it before an editor instance is created.
import * as monaco from 'monaco-editor';
import { configureMonacoTailwindcss, tailwindcssData } from 'monaco-tailwindcss';
monaco.languages.css.cssDefaults.setOptions({
data: {
dataProviders: {
tailwindcssData,
},
},
});
configureMonacoTailwindcss(monaco);
monaco.editor.create(document.createElement('editor'), {
language: 'html',
value: `<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
</head>
<body>
<div class="w-6 h-6 text-gray-600 bg-[#ff8888] hover:text-sky-600 ring-gray-900/5"></div>
</body>
</html>
`,
});Also make sure to register the web worker. When using Webpack 5, this looks like the code below. Other bundlers may use a different syntax, but the idea is the same. Languages you don’t used can be omitted.
window.MonacoEnvironment = {
getWorker(moduleId, label) {
switch (label) {
case 'editorWorkerService':
return new Worker(new URL('monaco-editor/esm/vs/editor/editor.worker', import.meta.url));
case 'css':
case 'less':
case 'scss':
return new Worker(new URL('monaco-editor/esm/vs/language/css/css.worker', import.meta.url));
case 'handlebars':
case 'html':
case 'razor':
return new Worker(
new URL('monaco-editor/esm/vs/language/html/html.worker', import.meta.url),
);
case 'json':
return new Worker(
new URL('monaco-editor/esm/vs/language/json/json.worker', import.meta.url),
);
case 'javascript':
case 'typescript':
return new Worker(
new URL('monaco-editor/esm/vs/language/typescript/ts.worker', import.meta.url),
);
case 'tailwindcss':
return new Worker(new URL('monaco-tailwindcss/tailwindcss.worker', import.meta.url));
default:
throw new Error(`Unknown label ${label}`);
}
},
};API
This package exposes two exports. One to setup the main logic, another to customize the Tailwind configuration in the worker.
monaco-tailwindcss
configureMonacoTailwindcss(monaco, options?)
Configure monaco-tailwindcss.
Arguments:
-
monaco: Themonaco-editormodule. (object) -
options: An object with the following properties:-
languageSelector: The language ID or IDs to which to applymonaco-unified. (string|string[], optional, default:['css', 'javascript', 'html', 'mdx', 'typescript']) -
tailwindConfig: The tailwind configuration to use. This may be either the Tailwind configuration object, or a string that gets processed in the worker. (object|string, optional)
-
Returns: A disposable with the following additional properties:
-
setTailwindConfig(tailwindConfig): Update the current Tailwind configuration. -
generateStylesFromContent(css, content): Generate a CSS string based on the current Tailwind configuration.
tailwindcssData
This data can be used with the default Monaco CSS support to support tailwind directives. It will provider hover information from the Tailwindcss documentation, including a link.
monaco-tailwindcss/tailwindcss.worker
initialize(options)
Setup the Tailwindcss worker using a customized configuration.
Arguments:
-
options: An object with the following properties:-
prepareTailwindConfig(tailwindConfig)A functions which accepts the Tailwind configuration passed from the main thread, and returns a valid Tailwind configuration.
-
Related projects
Showcase
-
Motif uses
monaco-tailwindcssto provide Tailwindcss intellisense in their MDX based content editor.