Tailwind CSS: Learn the joys of functional, responsive CSS

Tailwind CSS is a newer CSS framework first released in late 2017. It takes a different approach to styling that might surprise you. In particular, Tailwind abandons semantic class names in favor of the more purpose-oriented classes found in “functional CSS.”

Functional CSS vs. semantic CSS

To get a sense of the difference, consider a header element. Let’s say we want to make it bold and red. In semantic CSS, we are encouraged to create a class that describes the role the class plays in our app, say app-header, and then apply the required styles: app-header: { font-weight: bold; color: red; }. The idea here is that you are creating classes that are meaningful to you with respect to their semantic (as opposed to syntactic) role in the UI design.

To read this article in full, please click here