Blog post

Tailwind CSS: a new approach to the use of Cascading Style Sheets

Development
Frontend
Writing and maintaining CSS has often presented our design and development team with recurring problems. With Tailwind, we use a framework that takes a lot of the work off our shoulders without taking us away from our own ideas.

What is TailwindCSS?

Tailwind provides a system of consistent CSS utility classes. These cover all design system requirements at CSS level and facilitate consistency of colour choices, spacing, typography, shadows, etc.

Why do we use TailwindCSS?

At first, the abandonment of the Atomic structure seems to create disorder, as the usual sorting of classes in thematically ordered files is omitted. However, the advantage quickly becomes apparent: the assignment of CSS class names is no longer necessary; the Tailwind class names are written directly into the class attribute of the respective HTML tag. The maintenance and structuring of separate CSS, LESS or SASS files is almost completely eliminated. In addition, a frequently occurring dilemma is solved: the duplication of class blocks which have only minimal differences.

For development teams, this means a uniform vocabulary with regard to style sheets, and it is quickly apparent from the class names what is to be created at the respective point.

In addition, the system is constantly evolving: for example, spacing specifications outside the specified scale had to be declared in a config file in version 2, but in Tailwind 3 these can simply be appended to the corresponding class via bracket notation.

TailwindCSS & Single Page Components

Due to the direct use of class names in HTML elements and the elimination of separate CSS files, the advantage of Tailwind classes becomes particularly apparent in the concept of Single Page Components: all required mark-up is maintained in one file; the <style> section contains only a few specifications.