Skip to content

Latest commit

 

History

History
156 lines (120 loc) · 4.99 KB

README.md

File metadata and controls

156 lines (120 loc) · 4.99 KB
Raw

Monaco Tailwindcss

ci workflow npm version prettier code style demo netlify Status

Tailwindcss integration for Monaco editor.

Table of Contents

Installation

npm install monaco-tailwindcss

Usage

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: The monaco-editor module. (object)
  • options: An object with the following properties:
    • languageSelector: The language ID or IDs to which to apply monaco-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-tailwindcss to provide Tailwindcss intellisense in their MDX based content editor.

License

MIT © Remco Haszing