WebStorm 2021.3.1 Is Available

Ekaterina Ryabukha

WebStorm 2021.3.1, the first bug-fix update for WebStorm 2021.3, is now available! It’s packed with fixes and improvements, including support for Tailwind CSS v3.0 and the ability to set different colors for components and tags.

You can update to v2021.3.1 using the Toolbox App, installing it right from the IDE, or by downloading it from our website.

Fixes for Tailwind CSS

WebStorm 2021.3.1 comes with two important fixes for Tailwind CSS – WEB-53365 and WEB-53284. Code completion for the Tailwind CSS classes should now work as expected. We’ve also added support for v3.0.

Ability to set different colors for components and tags

We’ve added a new Custom Tag Name option that will allow you to set a different color for your Vue, React JSX, and Angular components. The new option is located in Preferences / Settings | Editor | Color Scheme | HTML / XML.

If you want to change the color of Vue or Angular components, adjust the Custom Tag Name settings under the HTML section. You can do the same for JSX under the XML section. Here’s an example of what it will look like once changes are made:

We’re planning to implement more improvements in this area, like adding a new section for managing JSX in Preferences / Settings. Stay tuned!

Icons for completion suggestions in HTML

For HTML, WebStorm will now show you icons next to suggestions in the code completion pop-up. Depending on the suggestion, you’ll see icons for live templates, tags, and words. We hope this change will make it easier for you to distinguish between different kinds of suggestions so you can always choose the right one.

Improvements for Stylelint

Stylelint used to work with HTML, Vue, and SCSS out of the box. This changed with the release of v14 – now it only supports CSS files out of the box and requires you to update your .stylelintrc file to turn on support for other file types. If you were on v14 with the default setup, WebStorm would show you an error whenever you’d open files that aren’t .css.

To solve this problem, we’ve introduced a new Run for files field. You can find it in Preferences / Settings | Languages & Frameworks | Style Sheets | Stylelint. Just like similar fields for Prettier and ESLint, this one accepts glob patterns. The default value is {**/*,*}.{css}, as Stylelint 14+ processes only plain CSS files by default.

If you’ve previously had Stylelint configured to work with HTML, Vue, or any other file type, you will need to update the pattern to something like {**/*,*}.{css,scss,html,vue}.

Other notable improvements

Here are some other notable fixes:

• Changed the behavior and implementation of the Trusted Projects feature. For more information, see this blog post.
• Solved a number of problems with Angular support (WEB-53447, WEB-53688, and WEB-53723).
• For Yarn PnP, indirect dependencies should now be indexed (WEB-42178).
• The v-bind CSS function is now supported in Vue (WEB-52425).
• Fixed the issue that was causing dialogs to be displayed in the wrong window on macOS Big Sur (IDEA-263628).
• Fixed the regression that was activating drag and drop during attempts to resize tool windows (IDEA-274904).

For the full list of issues addressed in WebStorm 2021.3.1, please see the release notes.

The WebStorm team

Subscribe to WebStorm Blog updates

Subscribe form

By submitting this form, I agree to the JetBrains Privacy Policy Notification icon

By submitting this form, I agree that JetBrains s.r.o. ("JetBrains") may use my name, email address, and location data to send me newsletters, including commercial communications, and to process my personal data for this purpose. I agree that JetBrains may process said data using third-party services for this purpose in accordance with the JetBrains Privacy Policy. I understand that I can revoke this consent at any time in my profile. In addition, an unsubscribe link is included in each email.

Submit

Thanks, we've got you!