Table of Contents & Menu
On this page
Navigation

Editor Setup

TailwindCSS Intellisense

JetBrains IDEs (e.g., PhpStorm) support TailwindCSS autocomplete natively.

However, it lacks some advanced features found in the official VSCode plugin.

For more configuration options, see the PHPStorm docs on TailwindCSS.

Install the official TailwindCSS IntelliSense VSCode Plugin.

For more configuration options, see the plugin documentation.

CSS nesting support

Most code editors require a plugin or extension to support CSS nesting.

Instructions for popular editors are provided below.

Install the PostCSS plugin

After installing and activating the PostCSS plugin, navigate to PHPStorm settings:

  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.

Have suggestions or solutions for other editors? Share them with us on Slack.