The devil is in the small details...

So reflecting on my previous article (WordPress Boiler Plate Chase), I might find some solution to it. Also, it has a short story, that has happened this weekend.

So previously I've started to breathe life into Sage's boilerplate, with no luck. I thought it was some specialized dependency problem, that was caused by Pop OS. So I decided to look into a different way for no, cause I want to make some progress. I'll get back to is when I am feeling comfortable with packages and dependencies like composer and node.

VS Code extensions are not working

I found a Tailwind boilerplate which looks good, and it was easy to install (I thought). BUT. Then I've wanted to install the Tailwind CSS Intellisense extension to my VS Code, because I am a bit lazy with remembering CSS classes, so it might help. I am using Tailwind with my WordPress projects, and I really like it, but it is easier to cheat a bit with a classes-helper like that.

Ao after the installation an error message came up.

Tailwind CSS: Can't resolve 'lodash' in ....

Or something like that. I've tried to get it back from my browser history, but It was just too many records. Anyways, I could not find the answer. But. I thought that might be a problem with Pop Os again. I've tried to uninstall, and reinstall Nodejs & npm again. Auto removes, purge and clear everything with an auto fix as well. Nothing worked. So I thought I will install the good old Ubuntu on my laptop again (the problems above were on my desktop PC).

I have installed ubuntu beside my Pop Os, cause I did not want to go through the install processes of each Os week after week. I have installed 20.04 of Ubuntu, unfortunately. I did not check the version on the bootable Pendrive. So I had to upgrade after installation.

Years passed while the terminal was updating the stuff. I decided to watch the Shang-Chi movie, and come back in the morning. In the morning everything was fine. I have installed Nodejs and npm. I have installed Local by Flywheel (as I told you I am lazy) and VS code (and also some Ubuntu tweaks). Fresh WordPress install with the TailPress theme/repo in it. Great. Almost everything is green. Even the npm watch is working!!!

Then I wanted to install Tailwind CSS Intellisense with this fresh installation. Same error as previously. I made a coffee.

So the problem might not be with Ubuntu or Pop Os either. After some investigation, I have found the right solution with the right installation methods. I will create a Shell script later on and update the post with it.

First of all, you have to clear all that you (probably) have done, to solve the problem.

Source

CLEAR EVERYTHING

sudo apt clean
sudo apt update -m
sudo dpkg --configure -a
sudo apt install -f
sudo apt full-upgrade
sudo apt autoremove --purge

THEN

sudo apt install pop-desktop

Removing Nodejs and Npm

Source

sudo apt-get remove nodejs npm node
sudo apt-get purge nodejs

Now remove .node and .npm folders from your system

sudo rm -rf /usr/local/bin/npm 
sudo rm -rf /usr/local/share/man/man1/node* 
sudo rm -rf /usr/local/lib/dtrace/node.d 
sudo rm -rf ~/.npm 
sudo rm -rf ~/.node-gyp 
sudo rm -rf /opt/local/bin/node 
sudo rm -rf opt/local/include/node 
sudo rm -rf /opt/local/lib/node_modules  

sudo rm -rf /usr/local/lib/node*
sudo rm -rf /usr/local/include/node*
sudo rm -rf /usr/local/bin/node*

Go to home directory and remove any node or node_modules directory, if exists.

You can verify your uninstallation by these commands; they should not output anything.

which node
which nodejs
which npm

And now, start it over, but first of all with Composer

NOTE: YOU HAVE TO INSTALL ALL THE FOLLOWING GLOBALLY!

So, not from VS Code's terminal in the theme folder of your WordPress theme

Like this

Source

Installing PHP and Additional Dependencies

First, update the package manager cache by running

sudo apt update

Next, run the following command to install the required packages:

sudo apt install php-cli unzip

Downloading and Installing Composer

cd ~

curl -sS https://getcomposer.org/installer -o /tmp/composer-setup.php

Next, we’ll verify that the downloaded installer matches the SHA-384 hash for the latest installer found on the Composer Public Keys / Signatures page. To facilitate the verification step, you can use the following command to programmatically obtain the latest hash from the Composer page and store it in a shell variable:

HASH=`curl -sS https://composer.github.io/installer.sig`

If you want to verify the obtained value, you can run:

echo $HASH

Output
e0012edf3e80b6978849f5eff0d4b4e4c79ff1609dd1e613307e16318854d24ae64f26d17af3ef0bf7cfb710ca74755a

Now execute the following PHP code, as provided in the Composer download page, to verify that the installation script is safe to run:

php -r "if (hash_file('SHA384', '/tmp/composer-setup.php') === '$HASH') { echo 'Installer verified'; } else { echo 'Installer corrupt'; unlink('composer-setup.php'); } echo PHP_EOL;"

You’ll see the following output:

Installer verified

To install composer globally, use the following command which will download and install Composer as a system-wide command named composer, under /usr/local/bin:

sudo php /tmp/composer-setup.php --install-dir=/usr/local/bin --filename=composer

You’ll see output similar to this:

Output
All settings correct for using Composer
Downloading...

Composer (version 1.10.5) successfully installed to: /usr/local/bin/composer
Use it: php /usr/local/bin/composer

To test your installation, run:

composer

Output:

Output
   ______
  / ____/___  ____ ___  ____  ____  ________  _____
 / /   / __ \/ __ `__ \/ __ \/ __ \/ ___/ _ \/ ___/
/ /___/ /_/ / / / / / / /_/ / /_/ (__  )  __/ /
\____/\____/_/ /_/ /_/ .___/\____/____/\___/_/
                    /_/
Composer version 1.10.5 2020-04-10 11:44:22

Usage:
  command [options] [arguments]

Options:
  -h, --help                     Display this help message
  -q, --quiet                    Do not output any message
  -V, --version                  Display this application version
      --ansi                     Force ANSI output
      --no-ansi                  Disable ANSI output
  -n, --no-interaction           Do not ask any interactive question
      --profile                  Display timing and memory usage information
      --no-plugins               Whether to disable plugins.
  -d, --working-dir=WORKING-DIR  If specified, use the given directory as working directory.
      --no-cache                 Prevent use of the cache
  -v|vv|vvv, --verbose           Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug
...

Then install Nodejs & npm

Source

Start by updating the packages list by typing:

sudo apt update

Install nodejs using the apt package manager:

sudo apt install nodejs npm

To launch:

nodejs

To verify:

node -v && npm -v

Then you can install the Tailwind boilerplate into your WordPress theme folder:

Source

Open the themes folder in VS Code (where all your themes are NOT the exact theme order (in case it does not exist yet))

Open a terminal in VS Code

composer global require jeffreyvanrossum/tailpress-installer

Clone repo

git clone https://github.com/jeffreyvr/tailpress.git && cd tailpress

Run

rm -rf .git

Run

npm install

Run

npm run watch

to start developing

And now you can use Tailwind CSS Intellisense...

Hope it helps!

Comment if it is! :)

Good Luck!

---

If there is something wrong, don't hesitate to comment it under, so I can correct my article. Thanks!