CSS materials

Flex Basis / Flex Grow / Flex Shrink Flex Shorthand

The most important highlights

Difference between a single class (BEM approach) and the atomic approach (tailwind):

The classname “tells” you what kind of component it is (e.g., whether it’s a card or a container), but it doesn’t give you implementation details (i.e., what styles it’s made up of), while Tailwind gives you the details of the implementation, but doesn’t illustrate what the component represents.

Cons of Tailwind

- Debugging in the browser because there isn't a single specific class (this can be circumvented by using the devtools of a specific framework and searching by components). Additionally, dynamically adding a new attribute is difficult (this can be circumvented using external devtools like https://tailscan.com/, https://www.inspectflow.io/, or https://devtoolsfortailwind.com/).

- Reading the classes alone doesn't provide specific information compared to regular CSS.

- It won't be suitable everywhere. For example, in a project where only HTML, CSS, and JS are used, Tailwind will be a poor solution.

- Since v3, the addition of dynamic classes has been significantly limited, e.g., bg-{color}-500 won't work anymore (this can be bypassed by loading the entire Tailwind via CDN, which significantly increases the project bundle).

- Tailwind users tend to write non-semantic HTML - this can be prevented by using a11y analysis tools.

An alternative approach to Tailwind towards type safety - for those who want to be sure there will be no typos and want the styles to be modular and extensible as in CSS Modules.

Drawbacks - the syntax isn’t as convenient, but it’s a matter of getting used to.