Skip to Main ContentSkip to Footer

Functional CSS: Meet Tailwind CSS

November 08, 2019

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) 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) 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 your reusable classes.
  • Your CSS grows every day in size expanding over weeks, months and even years.
  • To un-apply a style you will have to override everything, adding even more CSS!

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.

If you want you can personally thanks its founders: Adam Wathan, Jonathan Reinink, David Hemphill, and Steve Schoger

Resources


Subscribe to my email list!

If you enjoy my work, you should definitely join my newsletter"Giorat Mails". It’s one email a week with everything interesting I’ve read or found, plus new articles and fresh tutorials.

Sign up for our newsletter