Add options to match attributes by prefix and suffix #399
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Hey! This PR introduces a new feature to enhance how the plugin discovers attributes containing Tailwind classes.
Motivation
The plugin currently handles standard attributes like
class
andclassName
very well. This change aims to expand that capability to support a wider range of projects that use their own unique naming conventions for styling.For instance, some frameworks use prefixed attributes for dynamic classes, while component libraries often use props with specific suffixes (e.g.,
wrapperClassName
,iconClass
). This PR allows the plugin to recognize and sort classes within these types of custom attributes, making it more adaptable to different coding styles.How it Works
This is accomplished by adding two new options to the
.prettierrc.json
:tailwindAttributesStartWith
: An array of strings to match attributes that begin with a given prefix.tailwindAttributesEndWith
: An array of strings to match attributes that end with a given suffix.Example Configuration
For example, to handle the common
..ClassName
pattern, a user can update their.prettierrc.json
:With this configuration, attributes like
x-bind:class
,wrapperClassName
, andiconClass
will now be formatted correctly.Happy to discuss and hear any feedback.