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
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.
Techatty
Connecting the world of tech differently! Read. Write. Learn. Thrive. Make an informed decision without distractions. We are building tech media and publication networks to connect YOU and everyone to reliable information, opportunities, and resources to achieve greater success.
