LazyVim: Tailwind CSS Support

We continue to build upon the base LazyVim configuration and in this video add support for Tailwind CSS. I add the tailwindcss-language-server, add buffer colorization, add color swatches to the autocompletion

0:00 Introduction
0:11 Install Tailwind Server from Mason
0:30 Update Neovim Config to Add Tailwind Server
1:05 Show base Tailwind Server autocompletion
1:33 Setup new nvim-colorizer plugin
2:16 Show nvim-colorizer plugin in use
2:50 Like and subscribe
3:03 Setup autocomplete to use colorizer
3:42 Show color swatches in autocomplete
4:24 Fix setup to support icons and color swatches
4:56 Show autocomplete with icons and colors
5:12 Tailwind fixing problems with code actions
5:41 Conclusion

#neovim #vim #tailwindcss #terminal

[ElijahManor]

If you liked this video, please like and subscribe for further content.

[astropajamaland]

I can't be the only one overflowing with appreciation of your videos, especially the LazyVim content. Always super helpful and interesting, as I just switched over to using LazyVim full time. I also really appreciate your general command line videos, like uncovering cool ways to use fzf and similar things. Keep up the awesome work, I'm learning a ton from you!

[MohamedSaleh]

I got this error:
attempt to index field 'formatting' (a nil value)
anyone knows how to fix it?

[dereklomax]

You are what I imagine as the voice of Neovim itself! Clear, optimistic, powerful!

You are pushing the boundaries of eureka and epiphanies!

[phuc-party]

did anyone here set up graphql Lsp successfully?

[saman]

Hi, thanks again for your detailed walkthrough. I’ve been using the lazyvim since your last video and really enjoying it, however having a hard time to configure for eslint and prettier support as well as jsx and tax completion for html tags. Would really appreciate if you could show us how to configure these for react development. Thanks in advance.

[AhmadMughal]

One thing that i have noticed is that the Tailwind language server is significantly slower then the others is there some fix to this that i am not aware of ? i am also using LazyVIm.

[zeddscarlxrd]

Kinda lag to my laptopz, When try input tailwind class
Its normal?

[captaincrunch]

+1 for snippets

Thanks for the videos on LazyVim, they really help a lot! It has super good documentation but it’s nice to see visual examples of how things work. I thought for a little while I had to go into the main default plug-in config files to edit things, but it’s nice to see I don’t have to do that

What LazyVim videos are you thinking of creating in the future right now?

PS Hey sorry for the long comment but I am curious: do you usually avoid using neotree and instead exit nvim and use cmd line to change directories?

[nako]

I am experiencing slow suggestions in Tailwind CSS, and moving the cursor within the className is also very slow or gets stuck. Has anyone else had the same experience?

[tumi_tigur]

You got me into neovim with these lazyvim videos, always wanted to make the switch but didn't know where to start. Now i have my own config forked from lazy and it's great, thanks man

[theONEjustin]

I noticed the plugin doesn't work with custom set colors that are defined in tailwind.config.js. is that expected or is there a setting I can update?

[btstream]

Thank you so much for the great video! I hope it's ok to ask a question :)
Once I added the `tailwind.lua` file in my "plugins" folder (it has the exact same content as the Github repo) my Typescript LSP stopped working. If I remove the file, it starts working again. Anyone had this problem?

[joaomarcos]

This was great, but when I type "white" on <p> for example, the text is also colorized. How to disable it?

Edit: I figure it out, just "names = false". Damn, I'm getting good at this shit

[SurajKharkwal-keny]

How can I change the background of lazyvim

[theIbraDev]

i just wish neovim had something to conceal stupidly long classes....

[WhatNameHere]

I installed lazyvim recently and couldn’t figure out how to get snippets suggestion for html tags in jsx/tsx

[sami]

Amazing! I’m desperately trying to configure the tailwind language server to allow intellisense on things other than class / className. Is this possible here?

[r-darwish]

Thank you for these videos. I’d love to see a video about debugging in LazyVim using DAP

[Vashinator]

As far as other videos, if you do any tweaks for Emmet that could be useful.

I know I want to add a snippet for ! To get the HTML boiler plate text like I could in VS code.