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 vite
and npm
.
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 npm ci
.
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. 😀
If you liked this post, please, do share it:
Thanks, for reading (and sharing)! 🥳