Functional CSS: Meet Tailwind CSS

A utility-first CSS framework for rapidly building custom designs

What is Functional CSS?

Functional CSS (sometimes referred to as atomic CSS) is the practice of using small, immutable, and explicitly named utility classes to construct components. A variety of stock, ready-to-go class libraries, such as Tachyons and the increasingly popular Tailwind CSS, have sprung up to make starting with functional CSS as easy as possible.

A Simple Example

Without Tailwind CSS

You would define a component, add classes, and nest them together, styling every single element or overriding styles. CodePen here.

For a simple element we defined multiple classes and more than 40 lines of CSS that will be possible to use only for these elements.

https://codepen.io/Giorat/pen/BaaVKKB?editors=1100

With Tailwind CSS

You would construct the component’s styling rules within the markup through a combination of utility classes. CodePen here.

https://codepen.io/Giorat/pen/gOOKrLN

In the same way that functional programming encourages purity and predictability, functional CSS promotes the use of single-purpose and ‘pure’ classes that consistently behave the same regardless of context (or ‘scope’ in traditional programming).

But Why Can’t I Use CSS As Usual?

• You have to write your own CSS for every new element.
• You have to think about naming things, adding classes, splitting classes.
• You can’t tell why something looks like by just reading the markup for it.
• You have to worry for any change to the styles that might break something else that you aren’t currently looking at.
• You deal with one instance of a thing needing a slightly different style than the other instances, which screws up…