VueJS Templates Support

[Slava Razum]

Any plans to support VueJS? Tailwind is popular in VueJS community, I think it would be good point.

[Huisheng Chen]

Not sure we can simply make it happen by making the changes shown below.

Click here to see changes

diff --git a/src/parsers/index.ts b/src/parsers/index.ts
index d81e08a..1de6aaf 100644
--- a/src/parsers/index.ts
+++ b/src/parsers/index.ts
@@ -3,10 +3,12 @@ import html from './html'
 import css from './css'
 import babel from './babel'
 import typescript from './typescript'
+import vue from './vue'

 export default (twClassesSorter: TWClassesSorter) => ({
        html: html(twClassesSorter),
        css: css(twClassesSorter),
        babel: babel(twClassesSorter),
        typescript: typescript(twClassesSorter),
+       vue: vue(twClassesSorter),
 })
diff --git a/src/parsers/vue.ts b/src/parsers/vue.ts
new file mode 100644
index 0000000..395b8e0
--- /dev/null
+++ b/src/parsers/vue.ts
@@ -0,0 +1,36 @@
+import type TWClassesSorter from 'tailwind-classes-sorter'
+import prettierParserHTML from 'prettier/parser-html'
+import updateOptions from '../utils/update-options'
+
+export default (twClassesSorter: TWClassesSorter) => ({
+       ...prettierParserHTML.parsers.vue,
+       parse(text, parsers, options) {
+               const ast = prettierParserHTML.parsers.vue.parse(text, parsers, options)
+
+               if (!twClassesSorter) {
+                       return ast
+               }
+
+               updateOptions(twClassesSorter, options)
+
+               const cleanElementClasses = el => {
+                       if (el.attrs) {
+                               const classAttr = el.attrs.find(attr => attr.name === 'class')
+                               if (classAttr) {
+                                       const classList = classAttr.value
+                                               .split(' ')
+                                               .map(classItem => classItem.trim())
+                                               .filter(classItem => classItem.length > 0)
+                                       classAttr.value = twClassesSorter.sortClasslist(classList).join(' ')
+                               }
+                       }
+
+                       if (el.children && el.children.length > 0) {
+                               el.children.forEach(childEl => cleanElementClasses(childEl))
+                       }
+               }
+               cleanElementClasses(ast)
+
+               return ast
+       },
+})

Because the result is different from the README.

Go from this:

<div class="z-50 z-10 container  text-left md:text-center justify-center">
	...
</div>

To this:

<div class="container z-10 z-50 justify-center text-left md:text-center">
	...
</div>

[Scott Robertson]

I would also love support for Vue templates

[Ari Seyhun]

Sorry for the late action I took on this, I missed the PR.

I've merged it and published it in 2.2.9

[Sponge]

Hi @acidic9 ，thanks for creating this prettier plugin. And @slavarazum makes it support vue. That's cool.

Here's my problem. I just try it in my vue project, but find it not work. It has been the latest version v2.2.9 .

So I check the node_modules/prettier-plugin-tailwind as well as the source code in the release page. It seems the parsers/vue was not included. node_modules/prettier-plugin-tailwind/lib/parsers/index.js didn't import any vue parser.

Is there something wrong with the v2.2.9 publish release?

[Ari Seyhun]

@zcqno1 that's strange.. don't tell me i forgot to run build before publishing the version 🤦‍♂️

I'll look into this today

[Ari Seyhun]

@zcqno1 I've published 2.2.10 which should solve this

[Sponge]

Yeah, after upgrading to v2.2.10, it works.
thx~