Install & Configure Tailwind CSS and Standalone CLI for your Project

Tailwind CSS is a fantastic CSS utility framework that strikes a great balance between sound naming convention and artistic freedom. It allows you to rapidly prototype user interfaces for the web while also manage and ship fully customizable CSS to production.

Previously, the only way to use Tailwind CSS for your project was via the CDN or to install it with Node.js. However, for many non JavaScript-based applications this adds a lot of extra dependencies and increase the overall complexity of managing the project.

Ultimately you want a CSS framework to be as burden-less as regular CSS.

To fix this Adam Wathan and the guys and gals behind Tailwind CSS decided to release the JIT-based Tailwind CSS as a standalone CLI which can be used on any platform, with any language or framework of your choosing.

In this tutorial I will go through the installation and configuration process of Tailwind CSS with the standalone CLI.

Install Tailwind CLI

We start by installing the Tailwind CLI.

Use Curl to Install Tailwind CLI

curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/latest/download/tailwindcss-linux-x64

You can find versions for different platforms on the Tailwind CSS release page.

Use CHMOD to Give Correct Permission to Tailwind CLI

chmod +x tailwindcss-linux-x64

Move the downloaded folder into a spearate /tailwindcss folder

This is optional but will clearly feel cleaner when you use the Tailwind CLI as you can call it with ./tailwindcss init

mv tailwindcss-linux-x64 tailwindcss

Configure Tailwind CSS and Tailwind CLI

Now we need to configure Tailwind CSS with your project with the help of Tailwind CLI.

Initialize and Generate tailwind.config.js

./tailwindcss init

Configure Tailwind to Recognize Templates

Tailwind needs to have an understanding of where your templates are located to make use of the Tailwind JIT (Just-In-Time) compiler.

We can specify where our templates are located within our project in the tailwind.config.js file under the content section as such.

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

Use tailwind.config.js to Configure Tailwind CSS to your projects need

For tailwind CLI to work properly you need to specify and input.css file which will be used by Tailwind to create an output.css file which will be the file that will be used by your project in production.

Let's say that we keep out css files in the following folder structure static/css. Then we should create a input.css file within that folder.

This file should contain the @tailwind base classes but can also contain custom CSS that applies to your whole project.

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

@layer base {
    [type='text'],
    [type='password'],
    [type='email'],
    [type='number'],
    [type='url'],
    [type='date'],
    [type='datetime-local'],
    [type='month'],
    [type='week'],
    [type='time'],
    [type='search'],
    [type='tel'],
    select,
    select[multiple],
    textarea {
        @apply shadow-sm rounded-md block w-full sm:text-sm border-gray-300
        focus:ring-orange-400 focus:border-orange-400 focus:outline-none focus:ring-inset
        dark:focus:border-orange-400 dark:bg-gray-900 dark:border-gray-600 dark:text-gray-200
    }

    [type='checkbox'],
    [type='radio'] {
        @apply rounded focus:ring-orange-400 dark:bg-gray-900
    }

    h1 {
        @apply text-2xl;
    }
    h2 {
        @apply text-xl;
    }
    h3 {
        @apply text-lg;
    }
    .content a, .breadcrumbs a {
        @apply text-green-500 hover:text-green-700;
    }
    footer a {
        @apply text-gray-500 hover:text-gray-700 font-bold;
    }
}

.btn {
    @apply inline-flex justify-center py-2 px-4 mr-1 rounded-md whitespace-nowrap
    bg-green-400 hover:bg-green-500
    text-sm text-white font-bold
    focus:outline-none focus:ring-2 focus:ring-green-800
}

Use Tailwind CSS with Your Project

Now that Tailwind CSS is installed and configured we can use the CLI to watch our project for changes so that output.css is automatically created as changes within our templates occur. We can also use the same CLI to minify our output.css for production.

Start a watcher

./tailwindcss -i static/css/input.css -o static/css/output.css --watch

Compile and minify your CSS for production

./tailwindcss -i static/css/input.css -o static/css/output.css --minify

Now that everything is installed and you got the watcher running you can simply link the output.css with your HTML as any other CSS file.

I hope that you have found this tutorial useful, and that you can make use of it your next project without the need to tediously install and configure Node.js for your project as well. I for one, is extremley grateful that the team behind Tailwind decided to go down the JIT route and produce this standalone version of Tailwind CSS as it has greatly improved my workflow, and further increased the usecase for Tailwind CSS as a whole.