Best Alpine.js and Tailwind IDE Plugins and browser extensions while working with Hyva themes

To work with the Hyva themes, Developers should know Alpine.js and Tailwind CSS. 

Set up a Luma Reference Store View

It is beneficial to have a second store view running with a Magento Luma theme alongside the store view using Hyvä.

This allows you to check exactly how some aspects of a module work in Luma while ensuring compatibility with Hyvä.

Extensions for Alpine.js

Please check the following useful extensions for Alpine.js:

1. Alpine.js dev tools for Google Chrome and Firefox

• This extension is for debugging Alpine.js applications.
• It allows you to detect, inspect, and edit Alpine.js data and components. 
• This extension is available on the following browsers:
  • Google Chrome
  • Firefox

For more references please check the following screenshot:

2. Alpine.​js Support for PHPStrom

• This plugin adds support for the following Alpine.js features:
  • Auto-complete Alpine directives such as x-data
  • Set the language to JavaScript inside your directives so that you have full syntax highlighting and code complete
• For more references please check here.
• Please check this blog for installing the extension on the PHPStrom.

3. Alpine.js IntelliSense for Visual Studio

• This plugin supports the following features of Alpine.js:
  • Provides syntax highlighting for Alpine.js directives along with autocomplete for all base directives and modifiers.
  • This extension aims to keep as small a footprint as possible by injecting a simple grammar to provide JavaScript highlighting rather than implementing an entirely new language and by using the Custom Data Extension to add custom HTML attributes. 
  • Snippets are provided through the default API via VS Code.
• For more references please check here.
• Please check this blog for installing the extension on Visual Studio.

4. AlpineJS for SublimeText

• This plugin highlights the Alpine.js’ syntaxes.
• For more references please check here.
• Please check this blog for installing the extension on the Sublime Text.

New to Hyvä?? Learn about the Hyvä Theme from scratch!

Extensions of the Tailwind CSS

Please check the following useful extensions of the Tailwind CSS:

1. PostCSS for PHPStorme

• This plugin supports the following features of Tailwind CSS:
  • Syntax highlighting for PostCSS syntax. You can additionally configure it in Preferences | Editor | Colors & Fonts.
  • Intelligent code completion.
  • Intelligent code completion.
  • Go to declaration, Go to symbol, and Find usages actions are available for custom selectors and custom media queries.
  • Rename custom selectors and custom media queries with ease.
• For more references please check here:
  • JetBrains Plugins   
  • Hyva Docs 
• Please check this blog for installing the extension on the PHPStrom.

2. PostCSS for Visual Studio

• This plugin supports the following features of Tailwind CSS:
  
  • Nesting rules, including the nesting selector (&), the nesting at-rule (@nest), and @media and @supports at-rules.
  • :blank pseudo-class, as well as the :is() and :where functional pseudo-classes.
  • prefers-color-scheme and prefers-reduced-motion within media queries.
  • place-self property.
  • the env() function, as well as the hwb(), lab(), and lch() color functions.
  • emoji, fangsong, and system-ui font families.
  • the border-block, border-inline, margin-block, margin-inline, padding-block, and padding-inline logical properties.
  • @custom-media and @custom-selector at-rules.
  • nesting @extend and @extends at-rules.
  • functional selectors (%placeholder).
  • the CSS Modules :global rule, as well as the composes declaration, and also @value declarations.
  • sass $variables.
  • single-line comments (//).
  • @custom-env at-rules.
  • unknown nesting at-rules, as well as unknown @custom- prefixed at-rules.
• For more references please check here:
  • Visual Studio Marketplace 
  • Github
• Please check this blog for installing the extension on Visual Studio.

Alpine.js and Tailwind CSS IntelliSense VS code extensions (if you use VS code).

Tailwind CSS IntelliSense enhances the development experience with Tailwind by providing Visual Studio Code users advanced features such as autocomplete, syntax highlighting, and linting.

You can find the details of this extension here.

3. Commercial Tools

Additionally, there are some commercial tools available that require a purchase for use. Please check out a couple of these commercial tools:

• Windy extension for Chrome and Firefox
• DevTools for Tailwind extension for Chrome

By using these tools, you can enhance your efficiency when working with the Hyva theme, integrating Alpine.js, and Tailwind CSS.

Read more resources on Hyva themes:

1. Check out the InstaBuild for Hyvä Themes: Ready-made Hyva theme templates for faster storefront development!
2. Hyva Themes Development – For Online Merchants
3. Hyvä Theme Benefits that your store needs
4. 10 Best Hyva Compatibility Extension Providers For Magento 2 Stores
5. Hyvä VS PWA: Where to Invest?
6. How a Slow Magento Website Can Cost You Advertising Dollars
7. Mobile Commerce: How Hyva Themes Boost Mobile Conversions