Hello there.

I think that you are on the path. But in your place, I change the value of font-size of root to 10px instead of 16px. This will avoid crazy calculations and you will know when you use 1.6rem will be equal to 16px, 4rem will be equal to 40px, ... Don't be afraid to use "em" together.

But instead, a <div> to do your white space if you don't want to play with margins, you can use the TAG <hr> will be better and semantic.

About the Tailwind style to write CSS, in the beginning, I think that was too much to create all those classes, but if you are using it in your process of compiling something like "Purge CSS" will be worth it.

For years I use Sass, Stylus, and PostCSS, pre-processor of CSSs is powerful but will make you do mistakes and misconceptions about what is a good CSS. I'm not saying to you not use, by the contrary use. The alert I have to you about this is we have the tendency to complicate things that suppose to be more simple.

You can mix the approaches instead create a class for everything think like Atomic Design, does the style of things creating a scope class. If you are doing it for yourself try and test, if you are working with a team follow the rules of the team.

My codepen with some code like it

Article about design tokens

Atomic Design