Tailwind CSS IntelliSense in Visual Studio Code
A quick tutorial on how to enable automatic class name completion in VS Code for the new Tailwind CSS framework.
Most people in the Laravel community will most likely already know about the recently released “Utility-first” Tailwind CSS framework. Like many I started to play around with it as soon as it was released. Almost straight away I found myself having to refer to the documentation quite a lot to look up what the class naming conventions are, and this slowed me down quite a lot.
I already use the extremely useful IntelliSense for CSS class names extension in my editor, Visual Studio Code, which gives you a list of classes available in your css files when typing class=" in your html files.
Unfortunately the extension did not work when using the Laravel (Blade) file type. Given that a lot of those trying Tailwind are likely to be working in Blade like myself this was not ideal. I checked out the source code for the extensions and opened a PR to include Laravel Blade support. The creator, Zignd, of the extension was super nice and quickly merged my PR and released a new version – sweet, I could now quickly see what Tailwind generated classes I had available in my blade templates.
Refactoring
The next issue I ran into was trying to create tailwind component which are typically created using the @apply syntax inside css files. This allows you to make re-usable components which share the same styles, e.g. Buttons.
.btn {
@apply .font-bold .py-2 .px-4 .rounded;
}A quick discussion with the Zingd and a PR later we had IntelliSense auto-completion working in Css based extension, making it super quick to lookup what classes are available when creating components in Css files.
Notes
It is important to note that the extension works by scanning css files linked in your html/php, so you need to compile tailwind before the IntelliSense can pick up the class names. You also need to re-index class names after making changes, but a simply click on the provided icon performs a re-scan as required and the updated classes are instantly available.
Setup & requirements
- Visual Studio Code https://code.visualstudio.com/
- IntelliSense for CSS class names https://marketplace.visualstudio.com/items?itemName=Zignd.html-css-class-completion
- Tailwind CSS https://tailwindcss.com/
