


In a case where you are working with vanilla CSS (CSS without any framework or library), you would first give your element a class name and then attach different properties and values to that class, which will, in turn, apply styling to your element. This implies that you only have to write a class with predefined styles attached to it, and those styles will be applied to the element. When we say utility-first CSS, we refer to classes in our markup (HTML) with predefined functionalities. All the framework’s functionalities were derived from CSS styles composed as classes.

Now that we’ve established the meaning of a framework, it should help you understand that Tailwind CSS is a tool built upon CSS features. The overall purpose of creating frameworks is to increase development speed by doing less work. What Is a Framework?Īs a general programming term, a framework is a tool that provides reusable and ready-made components built from the features of an already existing tool. We’ll define what a framework is and what we mean by “utility-first CSS” to help you better understand what Tailwind CSS is all about. See how Kinsta stacks up against the competition.
