TailwindCSS vs Tachyons
Tags: featuredposts, css
Published: 2020-05-30 20:03:38

---
title: TailwindCSS vs Tachyons
published: true
date: 2020-05-13 17:30:42 UTC
tags: Featured Posts,css
canonical_url: https://blog.logrocket.com/tailwindcss-vs-tachyons/
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/xbx0zt5vtg2076g24skk.png
---
**Written by [Anjolaoluwa Adebayo-Oyetoro](https://blog.logrocket.com/author/anjolaoluwaadebayooyetoro/)**✏️

Frontend development involves architecting the markup, style, and behavior of web pages. Knowledge of CSS is one of the most important skills needed to build for the web and it isn’t exactly the easiest skill to acquire.

{% twitter 753716544949981184 %}

CSS frameworks were developed to make styling web content easier and done more efficiently while solving cross-browser compatibility concerns. CSS frameworks have become a norm and they have come to stay.

In this article, we will take a look at the strengths and weaknesses of two of the most popular utility-first CSS frameworks out there — [TailwindCSS](https://tailwindcss.com/) and [Tachyons](https://tachyons.io/).

## What is utility-first CSS?

For a library to be considered utility-first, it means it offers no pre-configured styles and components to build with, rather it offers you a set of unopinionated building blocks known as utility/helper classes to help you style your components. This helps with creating custom designs without having to override unwanted styles.

Utility-first CSS frameworks are often called functional or atomic CSS.

## Prerequisites

This tutorial assumes the reader has the following:

- [Node.js 10x](https://nodejs.org/en/download/) or higher installed on their PC
- [Yarn](https://yarnpkg.com/lang/en/) / [npm 5.2 or higher installed](https://www.npmjs.com/get-npm) on their PC. This tutorial would be making use of Yarn
- Basic knowledge of how CSS works
- Basic understanding of how [atomic CSS architecture](https://css-tricks.com/lets-define-exactly-atomic-css/) works

[![LogRocket Free Trial Banner](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2017/03/f760c-1gpjapknnuyhu8esa3z0jga.png?resize=1200%2C280&ssl=1)](https://logrocket.com/signup/)

## What is Tachyons?

According to the [documentation](https://tachyons.io/):

> A tachyon /ˈtæki.ɒn/ or tachyonic particle is a hypothetical particle that always moves faster than light. The word comes from the Greek αχύς or tachys, meaning “swift, quick, fast, rapid”.

[Tachyons CSS](https://tachyons.io/) however, is a functional CSS framework for humans built for designing and creating fast-loading, highly readable, and 100% responsive interfaces with as little custom CSS as possible.

## What is Tailwind?

According to its [official documentation](https://tailwindcss.com/docs/what-is-tailwind):

> Tailwind CSS is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override.

## Installation and usage

Tailwind and Tachyons can be made available in a project either by installation via package managers or using the CDN build.

### Installing and using Tailwind

You can get started with using Tailwind in your project by simply pulling in the latest default configuration build via CDN:

```jsx
<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">
```

_Note: Many features of Tailwind CSS are not available using the CDN build. To get the most out of Tailwind, you really should install it using a package manager._

## Using a package manager

To install Tailwind with the Yarn package manager, type in the following command in your terminal:

```jsx
yarn add tailwindcss
```

Next, proceed to create a default configurations scaffold, this helps to customize your Tailwind installation using the Tailwind CLI utility included when you install the `tailwindcss` package:

```jsx
npx tailwind init --full
```

This command creates a `tailwind.js` file in your project’s base directory, the file houses all of Tailwind’s default configuration.

Next, create a `tailwind.css` file where we would be importing Tailwind’s base styles and configurations, type in the following command:

```jsx
touch tailwind.css
```

Use the `@tailwind` directive to inject Tailwind’s `base`, `components`, and `utilities` styles into your CSS, place the following content in your `tailwind.css` file:

```jsx
@tailwind base;

@tailwind components;

@tailwind utilities;
```

Compile and build the styles generated from your tailwind.css file with the Tailwind CLI utility tool, run this command:

```jsx
npx tailwindcss build tailwind.css -o styles.css
```

Then proceed to import your `styles.css` file into your app. Either in your JavaScript file like this:

```jsx
import 'styles.css';
```

or as a link in your HTML like this:

```jsx
<link href="tailwind.css" rel="stylesheet">
```

## Installing and using Tachyons

To add the CDN build in your project, copy the line of code below and paste it in the head of the HTML file(s) you want to include Tachyons in:

```jsx
<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
```

## Using a package manager

To install Tachyons using the Yarn package manager, type the following command in your terminal:

```jsx
yarn add tachyons
```

Next, create a `tachyons.css` file, like this:

```jsx
touch tachyons.css
```

Copy the content of the minified version of Tachyons. This file is located at `node_modules/tachyons/css/tachyons.min.css` to your `tachyons.css` file:

```jsx
cp node_modules/tachyons/css/tachyons.min.css tachyons.css
```

Then, proceed to import your `tachyons.css` file into your app. Either in your JavaScript file:

```jsx
import 'tachyons.css';
```

or as a link in your HTML:

```jsx
<link href="tachyons.css" rel="stylesheet">
```

Alternatively, we can install Tachyons by grabbing all the source files and build it locally.

First, clone the source repository:

```jsx
git clone git@github.com:tachyons-css/tachyons.git
```

Next, change the directory to the cloned project:

```jsx
cd tachyons
```

Then proceed to install the necessary packages and build the styles:

```jsx
npm install && npm start
```

You should see both an _unminified_ and a minified CSS file to the `/css` directory.

## Ease of use

Although both libraries set out to achieve similar goals and using them is straightforward. The process of installing Tachyons is not quite straightforward and seamless.

Documentation is another factor that helps with the usage of a library. The [documentation](https://tailwindcss.com/docs/installation) for Tailwind is rich and quite extensive, it does a great job of introducing and onboarding users to the library. With Tachyons, on the other hand, one might be left confused after reading the documentation as it takes a bland approach to onboard and introduces new users of the library.

## Community

Despite it being launched almost a year after Tachyons, Tailwind has amassed 21.8k stars on [GitHub](https://github.com/tailwindcss/tailwindcss) and it is being used by [38,749 repositories](https://github.com/tailwindcss/tailwindcss/network/dependents?package_id=UGFja2FnZS0zNzMwOTM5OA%3D%3D) and has over a 100 contributors, it also has **73,791** [weekly downloads on NPM](https://www.npmjs.com/package/tailwindcss).

![tailwind css github](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/tailwindcssgithub.png?resize=1049%2C268&ssl=1)

![tailwinds additions and deletions](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/tailwindcssaddanddeletes.png?resize=788%2C548&ssl=1)

Tachyons has 9.7k stars on [GitHub](https://github.com/tachyons-css/tachyons), has 64 contributors, and has **26,384** [weekly downloads on NPM](https://www.npmjs.com/package/tachyons#modify-the-source).

![tachyons github](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/tachyons.png?resize=1018%2C256&ssl=1)

![tachyons additions and deletions](https://i1.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/tachyonsaddsanddeletes.png?resize=777%2C569&ssl=1)

Both libraries GitHub code frequency also shows Tailwind CSS is being actively worked on thereby ensuring it stays up to date with the latest standards and improvements to the web.

Tailwind has also managed to build a community around the tool, with resources such as [Screencasts](https://tailwindcss.com/screencasts/) and [other assets](https://tailwindcss.com/resources) that aid the usage of the framework. Tailwind has also been adopted by big companies like [Algolia](https://www.algolia.com/doc/) and [Mozilla](https://send.firefox.com/) and used to build new startups like [RightMessage](https://rightmessage.com/) and [PingPing](https://pingping.io/).

Tachyons also has a collection of resources and a tutorial to aid development with the framework it is also being used by some pretty huge companies such as [Font Awesome](https://fontawesome.com/), [NPM](https://www.npmjs.com/), and [Hugo](https://gohugo.io/). Tachyons also has backers and sponsors who donate to support the development of the framework.

## Size and performance

Size is one of the most important things developers consider when exploring a framework and that is one comparison Tachyons excels at.

Tachyons original file size is _111.7kb_ but is _14kb_ when minified and gzipped.

Using the default configuration, Tailwind CSS comes in at 78.0kb minified and gzipped and has an original size of 783.5kb and offers a [handful of](https://tailwindcss.com/docs/controlling-file-size) file reduction strategies:

| Framework | Original size | Minified | Gzip | Brotli |
| --- | --- | --- | --- | --- |
| Tachyons | 111.7kb | 71.8kb | 13.4kb | 7.5kb |
| Tailwind | 783.5kb | 603.3kb | 78.0kb | 22.6kb |

Using the [CSS Stats](https://cssstats.com/) tool, we can see a bit more about the minified files for both frameworks.

Tailwind uses 14,445 rules and 14,505 selectors while Tachyons has 2,113 rules and 2,349 selectors that means Tailwind comes with more defaults, while Tachyons contains fewer rules than Tailwind and it is not as flexible either.

You can see more stat details for [Tailwind](https://cssstats.com/stats/?url=https%3A%2F%2Funpkg.com%2Ftailwindcss%40%5E1.0%2Fdist%2Ftailwind.min.css) and for [Tachyons](https://cssstats.com/stats/?link=https%3A%2F%2Funpkg.com%2Ftachyons%404.10.0%2Fcss%2Ftachyons.min.css).

## Developer experience

### Plugins

One of the advantages of Tailwind over Tachyons is the fact that its configuration uses JavaScript. This gives you all the power of JavaScript and makes it easy to extend Tailwind’s capabilities with third-party [plugins](https://tailwindcss.com/docs/plugins/) or building your own [utilites](https://tailwindcss.com/docs/adding-new-utilities), custom [variants](https://tailwindcss.com/docs/pseudo-class-variants), and components as plugins.

### Components and naming

Most modern workflows follow the [DRY principle](https://en.wikipedia.org/wiki/Don%27t_repeat_yourself) (Don’t repeat yourself), which has seen a heavy reliance on component-based architecture, where you extract recurring snippets of code into a component. One of the founding principles of Tailwind is that you can extract reusable utility classes into a CSS component (large CSS classes). While creating a new class out of a group of utility-classes is considered a Tachyons anti-pattern and more often than not you tend to repeat classes.

A button would be written like this in Tailwind:

```jsx
<button class="m-10 bg-red-300 text-white px-4 py-2 text-xs shadow-lg "> Call Phone </button>
```

![button in tailwind](https://i2.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/buttonintailwind.png?resize=383%2C190&ssl=1)

and like this in Tachyons:

```jsx
<button class="ma4 bg-light-red white ph4 pv2 f6 shadow"> Message </button>
```

![button in tachyons](https://i0.wp.com/blog.logrocket.com/wp-content/uploads/2020/05/buttonintachyons.png?resize=370%2C196&ssl=1)When there are multiple buttons that have this same combination of utility-classes, the recommended approach with Tailwind is to create an abstraction through the `@apply` directive, which is used for extracting components classes in your CSS file.

```jsx
.red-btn{
  @apply m-10 bg-red-300 text-white px-4 py-2 text-xs shadow-lg
}
```

Then the `red-btn` class can now be applied to the buttons:

```jsx
<button class-"red-btn"> Message </button>
```

With Tachyons, you have to do a rewrite of the utility classes on every button.

Tailwind also uses a very human approach to class naming which is more explicit and much easier to comprehend while Tachyons uses incredibly abbreviated and very short classes although, it has a [verbose edition](https://github.com/tachyons-css/tachyons-verbose) for people who prefer using verbose class names:

{% twitter 1184534190559248384 %}
{% twitter 1184535385441030146 %}

This makes Tailwind more than a set of pre-baked utility classes, it’s a framework for creating your preferred style of writing functional CSS.

## Conclusion

In this article, we’ve taken a look at some of the features that stand out among both Tailwind and Tachyons, we’ve seen that although Tachyons has a smaller file size, it trades size for [customizability](https://tailwindcss.com/docs/configuration) as Tailwind is more customizable and even comes with better default fonts and color scale.

Both frameworks are almost similar with only a few fundamental differences which are largely ideological such as customization options, approach to creating components, and naming.

If the results of the [State of CSS 2019](https://2019.stateofcss.com) survey are anything to go by, we can see Tailwind has a better satisfaction rate and [pretty nice stats](https://2019.stateofcss.com/technologies/css-frameworks/) for a framework that is still in version 1.

Tailwind takes the cake in this comparison as it provides a better developer experience, gives customization options, and has more resources. It even does well to onboard people new to the utility-first/atomic CSS architecture. It should be the go-to choice for building robust design systems and even rapid prototyping of any kind.

Take a look at this [collection of materials](https://johnpolacek.github.io/the-case-for-atomic-css/) by [John Polacek](http://johnpolacek.com/) to learn a lot more atomic/functional CSS. This [repository](https://github.com/dwyl/learn-tachyons) by [Do What You Love](https://github.com/dwyl/home) also provides a fantastic tutorial to learn Tachyons. Tailwind’s [documentation](https://tailwindcss.com/docs) and [screencasts](https://tailwindcss.com/screencasts/) are quite enough to get you started.

Which one do you prefer and why? Let me know what your thoughts are in the comments section or if there are any other comparisons you want me to write about.

* * *
## Is your frontend hogging your users' CPU?

As web frontends get increasingly complex, resource-greedy features demand more and more from the browser. If you’re interested in monitoring and tracking client-side CPU usage, memory usage, and more for all of your users in production, [try LogRocket.](https://logrocket.com/signup/) 

![Alt Text](https://thepracticaldev.s3.amazonaws.com/i/403rye2ptzx994uhktk1.png)

[LogRocket](https://logrocket.com/signup/) is like a DVR for web apps, recording everything that happens in your web app or site. Instead of guessing why problems happen, you can aggregate and report on key frontend performance metrics, replay user sessions along with application state, log network requests, and automatically surface all errors.

Modernize how you debug web apps — [Start monitoring for free.](https://logrocket.com/signup/)
* * *

The post [TailwindCSS vs Tachyons](https://blog.logrocket.com/tailwindcss-vs-tachyons/) appeared first on [LogRocket Blog](https://blog.logrocket.com).