prettier-plugin-tailwindcss

prettier-plugin-tailwindcss copied to clipboard

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

<script setup lang="ts">
const defaultClasses = {
  field: 'relative',
  fieldInput:
    'absolute top-1/2 left-1/2 -translate-y-1/2 -translate-x-1/2 appearance-none bg-neutral-50 peer border rounded cursor-pointer disabled:opacity-50 disabled:cursor-default transition',
}
</script>

<template>
  <div :class="defaultClasses.field">
    <input type="checkbox" :class="defaultClasses.fieldInput" />
  </div>
</template>

Describe your issue

I am using Vue 3 and Composition API. The plugin does not work for classes declared in

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