Vue-cli: Install tailwind causing compiler to stop

[minhchu]

Version

4.2.2

Reproduction link

https://github.com/minhchu/vue-tailwind-test

Check src/views/About.vue

Environment info

System:
    OS: Linux 4.15 Ubuntu 16.04.6 LTS (Xenial Xerus)
    CPU: (4) x64 Intel(R) Core(TM) i3-8100 CPU @ 3.60GHz
  Binaries:
    Node: 12.15.0 - ~/.nvm/versions/node/v12.15.0/bin/node
    Yarn: 1.21.1 - ~/.yarn/bin/yarn
    npm: 6.13.4 - ~/.nvm/versions/node/v12.15.0/bin/npm
  Browsers:
    Chrome: 79.0.3945.130
    Firefox: 72.0.2
  npmPackages:
    @vue/babel-helper-vue-jsx-merge-props:  1.0.0
    @vue/babel-plugin-transform-vue-jsx:  1.1.2
    @vue/babel-preset-app:  4.2.2
    @vue/babel-preset-jsx:  1.1.2
    @vue/babel-sugar-functional-vue:  1.1.2
    @vue/babel-sugar-inject-h:  1.1.2
    @vue/babel-sugar-v-model:  1.1.2
    @vue/babel-sugar-v-on:  1.1.2
    @vue/cli-overlay:  4.2.2
    @vue/cli-plugin-babel: ~4.2.0 => 4.2.2
    @vue/cli-plugin-eslint: ~4.2.0 => 4.2.2
    @vue/cli-plugin-router: ~4.2.0 => 4.2.2
    @vue/cli-plugin-vuex: ~4.2.0 => 4.2.2
    @vue/cli-service: ~4.2.0 => 4.2.2
    @vue/cli-shared-utils:  4.2.2
    @vue/component-compiler-utils:  3.1.1
    @vue/eslint-config-prettier: ^6.0.0 => 6.0.0
    @vue/preload-webpack-plugin:  1.1.1
    @vue/web-component-wrapper:  1.2.0
    eslint-plugin-vue: ^6.1.2 => 6.1.2
    vue: ^2.6.11 => 2.6.11
    vue-cli-plugin-tailwind: ~1.2.0 => 1.2.0
    vue-eslint-parser:  7.0.0
    vue-hot-reload-api:  2.3.4
    vue-loader:  15.8.3
    vue-router: ^3.1.5 => 3.1.5
    vue-style-loader:  4.1.2
    vue-template-compiler: ^2.6.11 => 2.6.11
    vue-template-es2015-compiler:  1.9.1
    vuex: ^3.1.2 => 3.1.2
  npmGlobalPackages:
    @vue/cli: Not Found

Steps to reproduce

yarn install
yarn run serve

What is expected?

App is compiled

What is actually happening?

It is not compiled

---

I don't know whether this bug come from vue-cli or vue-cli-plugin-tailwind

[sodatea]

The culprit is prettier actually.
It has a serious performance issue with deeply nested tags (https://github.com/prettier/prettier/issues/4672) - which is the case of the SVG element here: https://github.com/minhchu/vue-tailwind-test/blob/7118d094a17e700c7048f5aee15b25b1f5b34d71/src/views/About.vue#L32

Solution:

1. Add a <!-- prettier-ignore --> comment before the SVG tag
2. Or, as the issue has been fixed in prettier v2, you can run yarn add -D prettier@2 to upgrade it to the latest version