Autocomplete Tailwind Classes inside of Blade Class Directives

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": [

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):


{{ $attributes->class('^') }}

{{ $attributes->class([
]) }}

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