Skip to content

Editor Setup

TailwindCSS Intellisense

TailwindCSS autocomplete is supported in all JetBrains IDEs like PhpStorm out of the box.

Sadly this does not include all of the other handy features seen in the official VSCode plugin.

For more configuration options see the PHPStorm docs on TailwindCSS.

For this install the official TailwindCSS IntelliSense VSCode Plugin.

For more configuration options see the plugin documentation.

CSS nesting support

Most Code editors will not yet support CSS nesting and require a plugin or extension to add this language support to CSS.

For the following editors we have added instructions on how to add this.

Install the PostCSS plugin

When the PostCSS plugin is installed and active, open the PHPStorm settings and navigate to:

  1. Languages & Frameworks > Style Sheets > Dialects
  2. Select PostCSS from the dropdown, then add the paths to web/tailwind in your themes, for example:
    • app/design/frontend/Acme/default/web/tailwind
    • vendor/hyva-themes/magento2-default-theme/web/tailwind

Install the PostCSS Language Support plugin

For more configuration options see the plugin documentation.

If you have suggestions or your own solution for a specific editor, feel free to share this with us on Slack