Get Started with Tailwind CSS

July 4, 2024[Tailwind CSS Quick Guide]

Tailwind CSS framework is a utility-first CSS framework packed with classes like flex, pt-4, text-center and rotate-90 that can be composed to build any design, directly in your markup. See the official website for more details.

Tailwind CSS works by scanning all of your HTML files, JavaScript components, and any other templates for class names, generating the corresponding styles and then writing them to a static CSS file.

It’s fast, flexible, and reliable — with zero-runtime.

Here is a step-by-step guide to getting started with Tailwind CSS, including setting up your environment for Tailwind CSS support, how to style your contents with the pre-defined classes, and how @apply directive can be used for elements which are generated by static site generators like Hugo.

And we’ll build the following web page finally.

Build Your Website

Easy to build your website with Hugo, a static site generator.

Get Started Demo

Installation

Install Node.js and Tailwind CSS according to the offical guide. You can also refer to the commands I used, but it may changed in the future.

Install Node.js

Here is the offical guide to install Node.js: https://nodejs.org/en/download/package-manager

E.g., to install it on linux with NVM (Node Version Manager):

# installs NVM
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.7/install.sh | bash

# download and install Node.js
nvm install 20

# verifies the right Node.js version is in the environment
node -v # should print `v20.13.1`

# verifies the right NPM version is in the environment
npm -v # should print `10.5.2`

Install Tailwind CSS

Here is the offical guide to install Tailwind CSS: https://tailwindcss.com/docs/installation

You can play it with CDN without any installation, but it is not my favorite way to use it, because I don’t want to include unnecesary CSS styles in my website. Instead, I prefer to using Tailwind CLI to generate necessary CSS styles from html, js or any templates where they are used.

Install Tailwind CLI:

npm install -D tailwindcss

Setup Your Project

Create a directory

mkdir tailwindcss-demo
cd tailwindcss-demo

Configure your template paths

Create tailwind.config.js

npx tailwindcss init

Edit the above config file to add your template paths (highlighted)

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Add the Tailwind directives to your CSS

Add a CSS file index.css with the following contents:

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

Start the Tailwind CLI build process

Run the CLI tool to scan your template files for classes and build your CSS.

npx tailwindcss -i ./index.css -o ./app.css --minify --watch

Two options can be used:

--watch: rebuild your CSS when changed
--minify: minify your output CSS file

Start using Tailwind in your web page

Use utility classes

Add a new HTML file index.html
Include the generated CSS stylesheet app.css in it
Use Tailwind’s utility classes to style your content

Here is the full content of index.html:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="app.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
  <div class="container mx-auto">
    <section class="w-full mt-5 flex flex-col items-center">
      <img src="glider.png" class="w-96">
      <div class="text-center">
        <h1 class="p-5 text-3xl font-bold">Build Your Website</h1>
        <p class="text-gray-900">Easy to build your website with Hugo, a static site generator.</p>
        <a href="#" class="mt-5 px-3 py-1 border bg-orange-600 rounded-md font-semibold text-white">Get Started</a>
        <a href="#" class="mt-5 px-3 py-1 border border-gray-900 rounded-md ml-8 font-semibold text-gray-900">Demo</a>
      </div>
    </section >
  </div>
</body>
</html>

I’ll explain how it works in the next post. Now, just open it in your browser to check the result. Don’t forget to refresh the page if changed.

Use `@apply` directives

When the content is generated by Hugo, e.g., we cannot add any extra inline class to style it. For this case, we can use @apply directive.

E.g., here is the generated Table Of Content:

<nav id="TableOfContents">
<ul>
  <li>
    <a href="#installation">Installation</a>
    <ul>
      <li><a href="#install-nodejs">Install Node.js</a></li>
      <li><a href="#install-tailwind-css">Install Tailwind CSS</a></li>
    </ul>
  </li>
  <li>
    <a href="#setup-your-project">Setup Your Project</a>
    <ul>
      <li><a href="#create-a-directory">Create a directory</a></li>
      <li><a href="#configure-your-template-paths">Configure your template paths</a></li>
    </ul>
  </li>
</ul>
</nav>

We can style it with the following directives in index.css:

#TableOfContents {
  @apply my-10;
}

#TableOfContents a {
  @apply no-underline;
}

You can try to style it by yourself, find a proper utility from Tailwind Docs.

That’s it! You’re now set up to start building with Tailwind CSS. Happy coding!