[IntelliSense] Create package monaco-tailwind

[remcohaszing]

Currently https://github.com/tailwindlabs/tailwindcss-intellisense contains 3 packages:

• tailwindcss-language-server
• tailwindcss-language-service
• vscode-tailwindcss

There is also a tailwind playground which integrates the language service into Monaco editor.

I’m interested in having tailwind integration in Monaco editor as well. Are you interested in publishing this as a separate package (monaco-tailwindcss)? I imagine this package would exist in the tailwindcss-intellisense repository.

If you’re interested, I’m willing to implement this.

[mhsdesign]

i would really like to see that. Im currently trying to figure out how to copy just the functionality from the playground - if you like i will help you.

[remcohaszing]

I’ve started working on this myself. The code from the playground isn’t very reusable, so I basically rewrote it from scratch reusing the same principles I used in monaco-yaml.

I think I can create an initial release this friday if I create this as a separate project, so I suggest not to spend too much time figuring out how to use the functionality from the playground. 😉

[mhsdesign]

WOW this sounds amazing. ♥️
I figured by your github that youre pretty much allknowing what concerns those things ^^ - nevertheless i would be happy to help!

[remcohaszing]

Haha I wouldn’t say allknowing 😅

Anyway, I published my initial attempt at https://github.com/remcohaszing/monaco-tailwindcss. I didn’t manage to wrap it up nicely yet, so I didn’t publish to npm yet.

A demo can be started by cloning the repository, then running:

npm install
npm --workspace demo start

I’m open to any sort of contributions, for example:

• Bug reports
• Feature requests
• More representative Demo model updates
• A fix for the weird layout change of the demo editor instance causing page scrolling
• Upstream fixes for missing types in @types/tailwindcss
• A build script (modeled after monaco-yaml)
• Code reviews (I’ll use pull requests if you’re interested in doing code reviews)
• Anything you deem useful :)

[mhsdesign]

this is lit ^^ you rock!

lets transfer our conversation to this place ^^

[dinhanhthi]

Do you have any example of how ot integrate your package into next.js?

[mhsdesign]

Feel free to look into the examples https://github.com/remcohaszing/monaco-tailwindcss/tree/main/examples

In the end it’s just like any other js lib ;)
(Of course you should know how to bundle and build stuff)

[Itskrish01]

I am not able to find a way to integrate this library with ReactJS or NextJS. Can you guys give me some hint for it? when configuring configureMonacoTailwindcss(monaco, { tailwindConfig });, it shows an error says - "cannot read undefined languages
'"