This week I struggled with getting vue to work with the most recent release of tailwind css. I was surprised to stumble into these kinds of problems this early in my first project. Usually, setting up a fresh project is pretty straight forward. But I completely undertestimated the complexity of frontend tooling. I went in with the idea that using straight
npm would be a safe bet. However, the tailwind documentation refers to
Here is where I went wrong: I assumed that
vite is an abstraction layer ontop of the
npm package manager, but I have since realized that’s not the case. In the context of the tailwind css it is also used to replace
vue-cli, which provides project scaffolding for
vue. And that’s where my problem came from: I was using a “plain old vue proje t”, and thus
vue-cli, which still uses an older version of postcss, the package that was creating all the problems. Using
vite removes the need for
vue-cli, and thus, not conflicting versions of postcss.
The real learning is this:
Contrary to all other package-managers I have previously used,
npm is able to install multiple different versions of the same package. This is what tripped me up. I would have expected
npm to upgrade all versions of postcss from 7 to 8, so how could I get an error that says that postcss 8 is required? Turns out,
vue-cli was actually using this old version of postcss, which was installed by
npm in addition to postcss 8.
I guess, in this case it really is a feature, not a bug.
After I learned this “quirk” about
npm, I also found out that using
npm install is not deterministic – or maybe wasn’t deterministic in the past but is now? I wasn’t able to find definitive information on that. In any case, it seems like it’s best not to use
npm install in an automated build pipeline, but rather the aptly named
Also: I wonder if using
npm dedupe is something people do regularly as part of a build?
Maybe I should also look into yarn? It actually has a command-line
--flat switch to disable the installation of multiple versions of a package. 😀