This way is great, it's not the one I use but I have no issue with it.

I prefer to use SASS variables along with a strict build system that refused to build if the developer isn't using variables that are injected via a config YAML file. In the end, we are both working in a similar way.

That being said, ".u-colorPrimary" is great. You can easily refactor it and it should scale well. However, ".bg-orange" and ".text-white" aren't great.

This button from the article is really bad:

    <a class="text-xl rounded bg-orange pt-1 pb-1 pr-4 pl-4 text-white hover:text-white no-underline leading-loose" href="#">

They should at the very least made a component with the styles and then apply via ".button" class.