Autocomplete Tailwind Classes inside of Blade Class Directives

tips-tricks
Table of Contents

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([
    '^'
]) }}

Enjoyed this post or found it useful? Please consider sharing it on Twitter.