Warning: This is somewhat of a rant.
Off to a great start
This week I have been toying around with the idea of doing something that would involve some processing on the frontend that goes beyond submitting a form to the backend.
After some googling, I decided to try out my idea and set up a vue.js project. The easiest way to get started seemed to be to use my preferred IDE and set up a starter vue.js project with all the default settings. Ok, done. Find a little beginner tutorial and make some changes to the example component, and that also works immediately.
For my little project I want to use
marked to parse markdown into html on the client. Do I
npm install marked and make some changes to the component with the help of Google. I manage to get a textbox working that automatically uses
marked to parse and update some html on the page.
Excellent! I feel like a frontend developer already.
Great, let’s add some styles with tailwind
But the textbox is awkwardly sticking the left of the browser window and the html is right below it. I would like to have them side-by-side. Ok, so I need to add some css, but I never had taken the time to learn how to create a css layout from scratch. I had always relied on Bootstrap in the past, ever since I had first found it. It was so nice to not have to worry about browser compatibility and css details.
But this time, I didn’t want to use Bootstrap. Remember, I wanted to learn real frontend development.
… and then everything comes to a screeching halt
Turns out, tailwind does still exist. Following the instructions on the website I use my trusty
npm install and a few seconds try to run my project again. Some error about
postcss 8 appears and this is where things get ugly.
The error message links to a help-page that – spoiler alert – is neither helpful nor relevant for this particular situation, but I don’t know that at the time. Soon I find myself updating my global npm-installation, uninstalling and re-installing packages, trying to understand why there seems to be no way to tell
npm to actually upgrade packages. Oh, of course, there is package for that, it’s called
npm-check-updates. But that doesn’t seem to help either, I am still getting the same error.
So I manually remove all explicit versions from my
package.json and replace them with an asterisk. Same result, same error.
npm list shows me that I have vue 2.6.14 installed. And I had read somewhere that postcss 8 (the thing that the error message mentions) is not compatible with vue 2. But isn’t vue 3 the current version that I am using? Oh, vue 3 doesn’t support postcss either, at least not in a release, only in some alpha or beta version? Oh, I also have vue-cli-service 4.5.14 installed. I am confused. The vue 3 documentation mentions
vite, which is – of course – a new build management tool that my IDE does not (yet?) support, so I was weary of putting such a new tool on top of my broken set up. There is mention of vue-cli v5.0.0-beta.6, maybe that’s what I need? What’s the difference between vue-cli-service and vue-cli?
Light at the end of the tunnel
At this point I am basically randomly changing package versions and installing vue, vue-cli, vue-cli-service, I don’t even care anymore. I just wanted to have the most recent version of vue that I could use tailwind with, which seemed to require postcss 8. Why was this so hard?
And then, suddenly, the error is gone. Yes! Success! I am a genius!
But wait, why is the markdown no longer updating the html formatting when I change it? Did I accidentally break something in the component? I don’t remember touching it.
Looking at the generated html, it turns out that the correct h1-tags are actually applied, but the text is not formatted as heading 1. What’s going on?
Welcome to tailwind css, where you start from zero
As I had suspected, tailwind is the culprit. It removes all styles, and I mean all styles. There is no visual difference between
li, etc. They all look the same.
I can see how that can make sense, and I somewhat can appreciate it. Also, there is an easy way to apply custom styles to all these tags. However, I don’t understand why there seems to be no comprehensive example that will basically just re-apply some styles to these common html tags? I have tried googling for a while, but I just couldn’t find what I was looking for. Probably, because I don’t know the correct search terms?
Also, my packages are a mess
The postcss 8 error is gone, and I had hoped that I had solved it by updating to the newest vue 3 version. But that doesn’t seem to be the case, judging by my installed packages:
├── @firstname.lastname@example.org ├── @email@example.com ├── @firstname.lastname@example.org ├── @email@example.com ├── @firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── email@example.com ├── firstname.lastname@example.org ├── tailwindcss@npm:@email@example.com ├── firstname.lastname@example.org ├── email@example.com └── firstname.lastname@example.org
There are still postcss7-compat packages instead of postcss8. WTF?
Where do I go from here?
Or is this just me?
Te reason is simple: Because I want to process markdown on the client-side. It’s just not a good user-experience to have the parsing take place on the backend.
So, today I decided to teach myself frontend development, whatever that means exactly. But I am not making any promises. I might quit this experiment any day.