Autocomplete Tailwind Classes inside of Blade Class Directives
•
1 min read
Tailwind's Intellisense plugin for Visual Studio Code is great, but as somebody who uses Laravel Blade I am slowed down massively when writing Blade components or dynamic CSS class lists with the @class
directive.
If you open up your settings.json
file inside of Visual Studio Code, you can use an experimental feature in the Tailwind extension to get autocomplete inside of $attributes->class()
and @class()
.
{
// ...
"tailwindCSS.experimental.classRegex": [
[
"@?class\\(([^]*)\\)",
"'([^']*)'"
]
]
}
Save this file, open up a Blade template and give it a go. You should now be able to autocomplete Tailwind classes in the following scenarios (^
indicates cursor position):
@class([
'^'
])
{{ $attributes->class('^') }}
{{ $attributes->class([
'^'
]) }}