How to make Tailwind CSS IntelliSense extension work with Magento PWA Studio

# vscode# pwa-studio# tailwindcss# magento

Problem

Magento PWA Studio used CSS modules and Tailwind CSS. The content of *.module.css files are like below snippet, Read more here.

.pageWrapper {
    composes: pt-16 from global;
    composes: max-w-menu from global;
    composes: mx-auto from global;
    composes: px-20 from global;
}

The Tailwind CSS IntelliSense vscode extension does not work with this by default, because it is looking for class=" or className=", etc. in a file.

Solution

Currently there is an experimental option for the IntelliSense extension named classRegex whic is mentioned here. Using this option, we can make the extension work with CSS modules.

{
    "tailwindCSS.experimental.classRegex": [
        ["composes: ([^;]*)"]
    ]
}

Add the above snippet to your vscode settings and your are good to go. If you want it to work only with your pwa-studio project, you can add it to .vscode/settings.json file in your repository.

Shopify vue vuex