[WP Theme Dev w/ 3Ts] TailwindCSS Workaround Issues

I got home from work and set up my laptop immediately so I can proceed to the next step. Just as I thought, I got another bunch of errors trying to install TailwindCSS via Homebrew and Node. It got me so furious that I wanted to just quit and drop altogether and cry about getting my money back for having such outdated setup requirements and steps,¹ but instead, I decided to look around for solutions again and apply them without bugging anyone for help. Yes, I’m stubborn that way. Asking someone else is the last thing I would do if Google won’t help me.

The Issue and Steps to Solution?

The Terminal built in with my VS Code had come in handy, so I was quite happy. But once again, everything installed in my system beforehand were completely outdated. Even my Homebrew was outdated. So I had to go through the steps of updating my Homebrew and even try to update my currently installed Node and NPM. It didn’t help me much so I had to start over by removing Node/NPM and re-install them the installer file way. I finally got it to work.

Homebrew is such a lifesaver for me ever since I started digging deeper into using Mac/MacOS that I started to become reliable to it. Unfortunately for me, I don’t use it that often except when I’m following along coding courses and install things like Node:

• Checked the version of Node/NPM to see if it’s installed in the first place. It was, but it gave me another message saying that I need to update it to the latest version.
• Homebrew to the rescue! With just one single brew upgrade node, I thought my problems would be solved quickly. It didn’t. And then, I brew update to get Homebrew to work. Update was a success, however, from out of the blew after doing brew update node again, it did update it… except it won’t update Node/NPM because it said that Node/NPM doesn’t exist.
• I used Homebrew again to install Node/NPM. It installed Node but it won’t install NPM because it said that I *didn’t have admin permissions to install Node/NPM*, even if my own account on my Mac is the admin of the system. Why?😭
• After exhausting all my Googling energy, my second to last tip was to visit the NPM official site and (re-)install NPM as if it was the first time. That finally fixed the problem.
• Using the latest version/fresh install of NPM, I was finally able to download TailwindCSS.

Setting Up a (Private) GitHub Repo

The only section that I still know the basics on, I turned to my old Skillcrush Git cheatsheet to create my repo for the TwiggyTim sample theme. But at the same time, I learned something new regarding the .gitignore file that is included in the original Timber starter theme pack. I followed instructions by adding certain files and folders in that file so that GiHub won’t include them into the repo.

When I started to initialize my twiggytim theme folder into a repo, I wasn’t very careful then. The Terminal gave me the message that the twiggytim folder had been re-initialized into a repo. It made me wonder whether I missed something or whatever. I proceeded with the usual committing of the files and then pushing them in my newly-created repo on GitHub. Because the instructor made his repo as a private repo, I did the same (for the sake of following the course).

I don’t know if GitHub (or Git even) made a few changes, but the name of the master branch changed (?) to main instead. Later on, I realized that maybe because it’s a private repo that the branch names are different from those of a public repo. Makes sense, i thought. Finally, when I tried to push my files to the private repo twiggytim, it gave me an error message:

I started panicking at first, then I read the error message quickly. I then realized that the twiggytim theme folder, which I renamed from the original Timber starter theme folder and moved it to a different directory, was still connected remotely to the original timber/starter-theme.git repo, which of course, I don’t have connections to. I did “star” it so I can follow Timber’s updates, etc. and I also visited the Timber GitHub account to ask for some bit of tech support regarding setting up my environment, but I went to the timber/timber repo for it, rather than the starter theme repo.

After reading that error message carefully, I went back to the starting steps again by removing the remote connection of the twiggytim theme from timber/starter-theme.git repo.

Then, I started over again from the beginning.

Finally, I successfully made my private repo and pushed all of my files into the repo, ignoring the other files and directories I included in the .gitignore file included. I can’t really link the new repo because it’s a private repo, so no one can see the files in there anyway, but a twiggytim repo does exist in my GitHub.

Conclusion

Ignore my previous conclusion as I did run into more setup problems as I wrote in this post. After ages of not being able to code or even concentrate on my code studies,² I did become rusty. Some devs may think that going back to the basics of web dev may be redundant and ridiculous, you can never underestimate the power of the most basic things. I’m taking a course on WordPress theme dev with the 3Ts and yet I only know the very basics of PHP. It even said on the prerequisites that basic WordPress knowledge, HTML, and CSS were the only ones required, with basic PHP (and Javascript) as a plus, so I think I’m good.

Now that I’ve got everything set up including the GitHub repo, I can finally proceed with the actual building of the sample starter theme.

1. Not the instructor’s fault though… but those devs who are maintaining the versions – why aren’t any of them compatible with each other??
2. Thanks a lot, COVID-19!