forsartis/vue-cli-plugin-tailwind

Tailwind breaks after installing first-party plugin

Closed this issue · 4 comments

meanspa commented

It looks like at least some of official Tailwind plugins break tailwind when using this plugin.
Steps to reproduce:

  1. Create project with Vue CLI, select Vue 3 preset
  2. vue add tailwind
  3. npm install @tailwindcss/typography
  4. npm run serve

image

Note: even after removing the plugin, tailwind is still broke:
6. npm uninstall @tailwindcss/typography' 7. npm run serve`
8.
image

forsartis commented

I followed your steps but didn't run into the issue. I tested on Windows and Mac with npm version 6.14.8 and Vue CLI version 4.5.10.

meanspa commented

This looks to be specific to the node/npm version, using nvm here's what I found:

On MacOS 11.1:
Node v15.4.0, npm 7.0.5, Vue CLI 4.5.10 => Can reproduce this issue
Node v14.14.0, npm 6.14.8, Vue CLI 4.5.10 => Cannot reproduce this issue

forsartis commented

So, npm 7 installs peer dependencies automatically. And I think installing the typography plugin also installs the PostCSS 8 version of tailwindcss, which is not compatible with Vue CLI yet.
I released a new version where I changed how tailwindcss gets installed based on PostCSS 7 compatibility build. Now the peer dependencies should be met and npm won't install another version of tailwindcss.

meanspa commented

Amazing, thank you! Just tested and it works great for me on npm 7.