A utility-first CSS framework for rapid UI development : Tailwind CSS

Photo by KOBU Agency on Unsplash

What is Tailwind CSS

Tailwind CSS is a utility-first css framework. It isn’t similar to other css framework. It doesn’t offer predesigned components like buttons, cards, alerts…
Instead, Tailwind provides low-level utility classes that let you build completely custom designs without ever leaving your HTML

Why use Tailwind CSS

Maybe you still not convinced to use Tailwind and betray other frameworks like Bootstrap, Foundation or Bulma. Let me give you some reasons why to consider using Tailwind CSS.

A utility-first framework

Let’s first discuss what utility-first css term means. Tailwind is basically a big set of css classes, that you can use to change certain style elements of your components,and build your own design system.

For example, this snippet of code :

<button class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded">
  Button
</button>

Returns :

Button using tailwind css

Customization

Because Tailwind is a framework for building bespoke user interfaces, it has been designed from the ground up with customization in mind.

By default, Tailwind will look for an optional tailwind.config.js file at the root of your project where you can define any customizations. Generate a Tailwind config file for your project using the Tailwind CLI utility included when you install the tailwindcss npm package:

npx tailwindcss init

If you’d rather scaffold a complete configuration file that includes all of Tailwind’s default configuration, use the --full option:

npx tailwindcss init --full

Ease of use

About the naming scheme though. It’s arguably one of the most important parts of any heavy utility-based library, and Tailwind made it just right. p-{n} for padding, text-white for setting color, -{n} for using a certain value for the utility, and md: or hover: for handling breakpoints and different states of the element - all that is truly brilliant!

Since Tailwind provides all the naming and organization, it’s very consistent across projects. So if a developer is familiar with Tailwind at all, chances are they can jump into a new Tailwind project with very little trouble.

Down sides

In my opinion, while the whole concept of utility-first sounds great on paper, but it could be a double edged sword. In fact, and for a little bit complex use case than a button, a tailwind styled HTML block will look crowded.

That’s an example which a took from the landing page of Tailwind CSS :

<div class="md:flex">
  <div class="md:flex-shrink-0">
    <img class="rounded-lg md:w-56" src="..." alt="Woman paying for a purchase">
  </div>
  <div class="mt-4 md:mt-0 md:ml-6">
    <div class="uppercase tracking-wide text-sm text-indigo-600 font-bold">Marketing</div>
    <a href="#" class="block mt-1 text-lg leading-tight font-semibold text-gray-900 hover:underline">Finding customers for your new business</a>
    <p class="mt-2 text-gray-600">Getting a new business off the ground is a lot of hard work. Here are five ideas you can use to find your first customers.</p>
  </div>
</div>

Do you feel what I feel? Isn’t the HTML snippet here getting a little…?

No predefined components

Tailwind do not provide predefined components, and that doesn’t help when we need to rapidly create a generic component. A button, a Card, or an input in a form are present in most of the projects.

Getting started with Tailwind in React Js

First, let’s create a React application, by run the command below:

npx create-react-app react-tailwindcss && cd react-tailwindcss

Next, we install a few development dependencies. You can use any of the options that work for you.

USING NPM

npm install tailwindcss postcss-cli autoprefixer -D

USING YARN

yarn add tailwindcss postcss-cli autoprefixer -D

We need to initialize Tailwind CSS by creating the default configurations. Type the command below in your terminal:

npx tailwind init tailwind.js --full

With so many people working from home, we thought we would bring our Smashing Workshops from our home offices to yours. Meet online front-end & UX workshops, with practical takeaways, interactive exercises, recordings and a friendly Q&A.

Check upcoming workshops ↬

Getting Started

To set up our project, we’ll scaffold a new React app using create-react-app. If you have already done this, skip this process, otherwise, run the command below:

npx create-react-app react-tailwindcss && cd react-tailwindcss

Next, we install a few development dependencies. You can use any of the options that work for you.

Using npm

npm install tailwindcss postcss-cli autoprefixer -D

Using Yarn

yarn add tailwindcss postcss-cli autoprefixer -D

We need to initialize Tailwind CSS by creating the default configurations. Type the command below in your terminal:

npx tailwind init --full

This command creates a tailwind.config.js in your project’s base directory; the configuration file that we talked about.

How To Configure PostCSS?

The PostCSS documentation states that:

“PostCSS is a tool for transforming styles with JS plugins. These plugins can lint your CSS, support variables and mixins, transpile future CSS syntax, inline images, and more.”

WHY AUTOPREFIXER ?

It’s necessary to install Autoprefixer alongside Tailwind CSS because Autoprefixer usually tracks caniuse.com to see which CSS properties need to be prefixed. Hence, Tailwind CSS does not provide any vendor prefixing. If you’re curious as a cat in regards to PostCSS navigate to their documentation.

Create a PostCSS configuration file in your base directory manually or using the command:

touch postcss.config.js

Add the following lines of code to your PostCSS file:

const tailwindcss = require('tailwindcss');
module.exports = {
    plugins: [
        tailwindcss('./tailwind.config.js'),
        require('autoprefixer')
    ],
};

Because PostCSS is necessary to lint our CSS, hence this configuration.

Code Steps

1. We fetched the Tailwind CSS package and placed it in a variable.
2. We wrapped tailwind.config.js (our default base configuration) in our tailwindcss variable.
3. We fetched the autoprefixer package.

Inject Tailwind CSS

Create a folder styles inside the src folder. And open it.

cd src;
mkdir styles;
cd styles;

Then, create a file named tailwind.css (this name doesn’t have to be exactly like I wrote it, you can choose whatever name you want, just ensure to adapt it with the rest of the configuration).

touch tailwind.css

Add the following to your tailwind.css file.

@tailwind base;
@tailwind components;
@tailwind utilities;

CSS BUILD

To configure our application to build the CSS styles each time we run either the npm start or yarn start command.

Open your package.json file and add the snippet below the script part of your package.json file:

"scripts": {
    ...
    "start": "npm run watch:css && react-scripts start",
    "build": "npm run build:css && react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build:css": "postcss src/styles/tailwind.css -o src/styles/main.css", 
    "watch:css": "postcss src/assets/tailwind.css -o src/assets/main.css",
    ...
},

IMPORT THE CSS

Open your index.js file, and import the main.css file :

import './styles/main.css'

Now, you’re ready to go!