You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
I am using Vue 3 and Composition API. The plugin does not work for classes declared in <script setup> as variables, by example defaultClasses.fieldInput.
Hi! Per the readme, this plugin only supports sorting classes in three places:
Attributes like class="p-2 sm:p-4" — you can customize which attributes we look at by setting tailwindAttributes in your prettier config. By default we support class, ngClass, className, and a few others.
Function calls like clsx("p-2 sm:p-4") — customizable with the tailwindFunctions setting. None by default.
Tagged template literals — also customizable with the tailwindFunctions setting. None by default:
letx=tw`p-2 sm:p-4`
In your case I suggest using tagged template literals. We provide an "identity" function called tw in our readme that does not change the string. After adding the appropriate types to it you'd end up with something like this — and you can always pull the tw function out into a separate file and import it if you want to reuse it across multiple components:
What version of
prettier-plugin-tailwindcss
are you using?^0.5.13
What version of Tailwind CSS are you using?
^3.4.1
What version of Node.js are you using?
18.13.0
What package manager are you using?
npm
What operating system are you using?
macOS
Reproduction URL
Describe your issue
I am using Vue 3 and Composition API. The plugin does not work for classes declared in <script setup> as variables, by example
defaultClasses.fieldInput
.Expected result:
peer absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 cursor-pointer appearance-none rounded border bg-neutral-50 transition disabled:cursor-default disabled:opacity-50
The text was updated successfully, but these errors were encountered: