TailwindCSS: Quick Setup

Dec. 15, 2021

A quick start guide to getting up and running with TailwindCSS for the first time.

Introduction

TailwindCSS is a utility-first CSS framework that allows you to style your HTML without needing to leave your HTML file. Most of the styling is done though pre-defined CSS classes. This results in a very easy system to use when adding style to your website.

This quick setup guide will get you to a point where you can start writing HTML and adding in CSS as you go.

If you're in a bit hurry and willing to sacrifice some features you can use the TailwindCSS CDN.

Installing Node.js

This guide is written with Linux in mind but you can also install Nodejs on Windows and Mac.

For RHEL based distros (Fedora, CentOS, Rocky Linux, etc..):

$ sudo dnf install nodejs

For Ubuntu based distros you can install Node from NodeSource:

$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
$ sudo apt-get install -y nodejs

Setup the Project environment

Now that we have Node installed, lets create our project environment.

First, cd into your workspace. I like to use ~/Code as my main local workspace.

$ cd ~/Code

Create a folder of us to work in and cd into that.

$ mkdir tailwind
$ cd tailwind

Initialize the directory for NPM. This will create a package.json file within the folder.

$ npm init -y

Now install TailwindCSS.

$ npm install tailwindcss

To finish off this environment, lets create a src and public folder. You can name these folders whatever you want.

$ mkdir src public

Generating the TailwindCSS CSS file

Next lets create a style.css file.

$ touch src/style.css

Then, using your preferred text editor, add the @tailwind directives so your style.css file looks like this:

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

Now, open the package.json file and add a new command to the scripts. The file should look like this.

{
  "name": "tailwind",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "tailwind build -i src/style.css -o public/tailwind.css --watch"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "tailwindcss": "^3.0.1"
  }
}

Finally, create a tailwind.config.js file in your project root folder containing the following.

module.exports = {
  content: ["./public/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

Remember the "dev" script that we added into the package.json file? Now we're going to run it in a separate terminal.

$ npm run dev

This command will continue to run while you write your HTML. It will "watch" and "rebuild" your tailwind.css file as new utility classes are added into your HTML file. If you'd like to learn more about the Just-in-Time engine, check out this blog post.

You should now have a new tailwind.css file in the public folder. link this file into your HTML file and start coding away. Remember to keep the npm run dev command running in a separate terminal.

Using the style.css file

Now you can use the style.css file by adding a link tag into the <head> of your html source file.

<link href="./style.css" rel="stylesheet">

Enjoy the new setup and happy coding!

Return to blog index