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.
With Tailwind CSS
You would construct the component’s styling rules within the markup through a combination of utility classes. CodePen here.
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.
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…
npm install tailwindcss
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.