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 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 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?

With Tailwind you won’t have any of these old problems.

OK, but the DOM Still Looks Like a Dumpster Fire

Again, this is tough to get past, but once you get used to it, there’s a chance you might just learn to love it. That dumpster fire tells you exactly what something will look like, and doesn’t give you any information you don’t need.

Anyway, it looks better than it would if you were using many of the common CSS in JS solutions, which give you a ton of crazy randomly-generated class names.

Getting Started

Before using the CDN build please note, many of the features that make Tailwind CSS great are not available without incorporating Tailwind into your build process.


The best solution is to integrate tailwind in your build system by first installing it…

Using npm:

npm install tailwindcss

Using yarn:

yarn add tailwindcss

After that, you can easily follow the official tutorial here to make it work with a webpack or similar bundlers configurations

Many Thanks to Tailwind CSS Founders

I have been using Tachyons CSS for a long time. Looking at all the improvements brought by Tailwind is refreshing and I can’t wait to see the future updates.