Tailwind CSS - Introduction

What is Tailwind CSS?

Tailwind CSS is a framework like Bootstrap. However, unlike Bootstrap it does not "provide" pre-defined components that give us certain functionality, that is, mainly the Tailwind CSS feature.

Definition from the official documentation:

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.

Basically, what this tells us is that Tailwind CSS is not a framework that imposes design or structure patterns on us, nor does it provide style (colors, sizes, etc) nor does it provide us with pre-defined components.

At this point, you probably see Tailwind CSS with little benefit, as we are possibly losing the speed you previously had when using Boostrap, what is the benefit?

The great advantage of Tailwind is the amazing ability to create custom designs on your own, supplying every little "building block" that Tailwind CSS provides.

Building blocks? Utility-first?

Now, we may have a little doubt, what exactly do utilities or building blocks mean? Surely you already know it, and to refresh your memory there are some examples of them:

• text-white = color: #fff;
• font-bold = font-weight: bold;

Usually, while designing in CSS we have "utility" classes that we generally re-use very frequently. In this case, these "utilities" are the foundation of Tailwind CSS since it gives us endless utilities for everything we need (fonts, grid, flex, colors, borders, shadows, animations, etc).

How Tailwind CSS looks?

Before starting to get into the action with Tailwind CSS, I leave you a small example of what an HTML code looks like using Tailwind CSS. Also, it should be noted that using Tailwind CSS we will very rarely resort to our stylesheet, only in specific situations where Tailwind still does not work.

<button 
  class="px-6 py-3 bg-blue-500 rounded text-white font-bold"
>I'm a Button!</button>

Output:

Getting Started with Tailwind CSS

Tailwind CSS can be used with any technology like HTML/JavaScript, ReactJS, Angular, VueJS. In this post, we gonna use Tailwind CSS in a basic project with HTML.

I hope you have the following basic project structure:

└─ yourprojectfolder
  ├─ assets
  │  └─ css
  │     └─ styles.css
  ├─ index.css
  └─ index.html

Setting Up Tailwind CSS in our Project

Tailwind CSS provides us two options for usage (npm, cdn). In this case, we gonna use the NPM Package because we want to learn deeper about Tailwind CSS.

Generate package.json

If you already work with NodeJS you can do this, and jump to the next step.

In your terminal run the following command:

npm init -y

This command will gonna generate a package.json in our root folder, this file allows us to install dependencies for our project.

Install Tailwind CSS

Now, we need to install Tailwind CSS in our project, so, we'll gonna run this command:

yarn add tailwindcss
# or
npm install tailwindcss

You can install globally if you want.

Generate a tailwind.config.js file

tailwind.config.js file allows us to customize Tailwind CSS. We'll talk more about it in the future.

To generate this file, you need to run the following command:

npx tailwindcss init

Then, Tailwind CSS will gonna generate the tailwind.config.js in our root folder.

You can add the --full flag to the command, to generate the full configuration of Tailwind CSS. Helpful if you want to look at how Tailwind CSS works.

Inside this file we have something like this:

// tailwind.config.js
module.exports = {
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

I'll explain more about all of this that we can do here, but now, we need to continue setting up Tailwind CSS.

Add Tailwind CSS to our CSS

Now, we need to add some lines of code in our index.css file, if you don't have this file you need to create.

Open the file, and put the following code:

/* index.css */
@tailwind base;

@tailwind components;

@tailwind utilities;

Adding scripts and generate our Tailwind CSS Build

Now, we need to create and script in our package.json file.

// package.json
...
  "scripts": {
    "build-css": "tailwindcss build index.css -o assets/css/styles.css",
  },
...

With this script we can generate the build of Tailwind CSS, the only thing we need to do, is run the following command in the terminal:

yarn build-css
# or
npm run build-css

This script will gonna generate a styles.css file in our assets folder, this file contains all the classes that Tailwind needs, for the moment this file maybe is too heavy, but we gonna fix that in the future.

Adding Styles in our HTML

In your index.html you need to add the build CSS file:

<!-- index.html -->
...
<head>
  ....
  <title>Tailwind CSS Started</title>

  <!-- Styles -->
  <link rel="stylesheet" href="assets/css/styles.css">
  ...
</head>
...

At this point, we have installed Tailwind CSS, and we can start to write some HTML code with Tailwind CSS classes. You can see the documentation of Tailwind CSS for more information.

Delving into the config file of Tailwind CSS

Let's look at the Tailwind CSS configuration file again:

module.exports = {
  future: {
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  },
  purge: [],
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

I'll talk mainly about these two things in the tailwind.config.js file.

• purge: This is an Array of "paths". Tailwind CSS can read these paths and start "purge" the build file, leaving only the classes we need, and with this, we can reduce the size of our file.

• theme: The theme section is the most important I think, here, we can add, edit and overwrite all of the things about Tailwind CSS (colors, margin, padding, background, fonts, etc). You can add custom colors or overwrite existing colors.

Purge our CSS build

To purge our CSS build we need to specify what files use Tailwind CSS classes, so let's do that.

module.exports = {
  ...
  purge: ['index.html'],
  ...
}

In this case, we only have one file, but, if you have more files you can add.

For this to work, Tailwind CSS only purges the file when the node environment is in production.

You only need to install cross-env and then add the following script in your package.json.

// package.json
...
  "scripts": {
    "build-css": "tailwindcss build index.css -o assets/css/styles.css",
    "build-css:prod": "cross-env NODE_ENV=production tailwindcss build index.css -o assets/css/styles.css"
  },
...

The output of this script is:

yarn run v1.22.5
$ cross-env NODE_ENV=production tailwindcss build index.css -o src/css/styles.css

   � Building: index.css

   ✅ Finished in 1.56 s
   � Size: 12.28KB
   � Saved to src/css/styles.css

As you can see, the file now weighs only 12.28KB

I hope this post has been to your liking. If you have any questions or something to add or correct, let me know!

You can check this repo with all ready to use: Tailwind CSS Starter