How to Quickly Install Tailwind CSS

Get up and running with all available features

Published in

HTML All The Things

5 min readMay 27, 2019

Tailwind CSS is gaining traction among UI developers across the industry and as you’d imagine, there are a variety of ways to get it up and running depending on your development environment. As a result of this popularity I thought it only appropriate to give it a spin to see what all the buzz is about. The focus of this guide will be getting Tailwind CSS installed quickly and easily so you can get right to coding.

Method 1: Install via CDN

Fastest, but has limited features

Generally when it comes to CSS frameworks the fastest way to get up and running is to use the framework’s CDN, avoiding any sort of involved installation process entirely. Tailwind CSS is no different in this regard, with a single <link> tag that houses the latest default configuration build to get you up and running.

Place the following line in between your HTML's <head> tags<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Unfortunately going down this route will lock you out of a bunch of functionality that you may want to familiarize yourself with including:

Unable to customize the default theme
Unable to install third-party plugins
Unable to use directives
Unable to enable features (ie group-hover)

Method 2: Tailwind CLI

Least involved, fully featured

Coming from vanilla CSS, I knew that I wanted to learn everything that Tailwind had to offer, but at the same time I didn’t want to contend with setting up a full developer environment with the likes of something like Webpack. As a result, I decided to use the Tailwind CLI to get up and running.

Here’s how I did it:

Note: I did this on a Windows 10 PC with npm installed

Create a new folder/directory for your project
Open up an admin command prompt and select your project’s folder/directory

Replace C:\Users\mattl\Documents\temp\tailwindcsstest with your project's directorycd C:\Users\mattl\Documents\temp\tailwindcsstest

3. Initialize your project with npm in your command prompt

npm init

This will take you through creating a package.json file, for our purposes I left all the values at their defaults. Once complete you should have a package.json file inside your project’s folder.

4. Install Tailwind using the command prompt

npm install tailwindcss --save-dev

Once that completes you should have a node_modules folder and a package-lock.json file in your project’s folder.

5. Now that Tailwind is installed, it’s time to start testing it out. To do this, we’ll create a basic website file structure. Here’s how I set that up…

In the root of the project’s folder I made an index.html file and a styles folder. Inside of the styles folder, I created a styles.css file. You can check the visual reference below for clarity.

.
├── index.html
├── styles
|   ├── styles.css

Next, I added the following HTML into the index.html file

<! DOCTYPE html>
<html>
 <head>
  <link href="styles/output.css" type="text/css" rel="stylesheet" />
 </head>
 
 <body>
 
 </body></html>

Once that was done, I added the following Tailwind directives into the styles.css

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

6. Now that we have Tailwind installed and our basic website setup, it’s time to process our CSS. We’ll be doing this using the Tailwind CLI in the command prompt.

In your command prompt window from before, select your styles folder that you made in step 5 (see below).

cd styles

With that selected, run the Tailwind CLI tool with the following command

npx tailwind build styles.css -o output.css

If run successfully, you should now have an additional file in your styles folder named output.css which means you have successfully installed Tailwind CSS, all there is left to do is test to make sure.

7. To test out my Tailwind installation, I simply copied and pasted one of the navbar examples from the documentation into my index.html as shown below. Official documentation source

<! DOCTYPE html>
<html>
 <head>
  <link href="styles/output.css" type="text/css" rel="stylesheet" />
 </head>
 
 <body>
  <nav class="flex items-center justify-between flex-wrap bg-teal-500 p-6">
    <div class="flex items-center flex-shrink-0 text-white mr-6">
   <svg class="fill-current h-8 w-8 mr-2" width="54" height="54" viewBox="0 0 54 54" xmlns="http://www.w3.org/2000/svg"><path d="M13.5 22.1c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05zM0 38.3c1.8-7.2 6.3-10.8 13.5-10.8 10.8 0 12.15 8.1 17.55 9.45 3.6.9 6.75-.45 9.45-4.05-1.8 7.2-6.3 10.8-13.5 10.8-10.8 0-12.15-8.1-17.55-9.45-3.6-.9-6.75.45-9.45 4.05z"/></svg>
   <span class="font-semibold text-xl tracking-tight">Tailwind CSS</span>
    </div>
    <div class="block lg:hidden">
   <button class="flex items-center px-3 py-2 border rounded text-teal-200 border-teal-400 hover:text-white hover:border-white">
     <svg class="fill-current h-3 w-3" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><title>Menu</title><path d="M0 3h20v2H0V3zm0 6h20v2H0V9zm0 6h20v2H0v-2z"/></svg>
   </button>
    </div>
    <div class="w-full block flex-grow lg:flex lg:items-center lg:w-auto">
   <div class="text-sm lg:flex-grow">
     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
    Docs
     </a>
     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white mr-4">
    Examples
     </a>
     <a href="#responsive-header" class="block mt-4 lg:inline-block lg:mt-0 text-teal-200 hover:text-white">
    Blog
     </a>
   </div>
   <div>
     <a href="#" class="inline-block text-sm px-4 py-2 leading-none border rounded text-white border-white hover:border-transparent hover:text-teal-500 hover:bg-white mt-4 lg:mt-0">Download</a>
   </div>
    </div>
  </nav>
 </body></html>

If you’ve done everything right so far, running your index.html in your browser should produce an image like below.

And that’s it! You’re ready to get familiar with all that Tailwind CSS has to offer!

Something to Note…

The above methods of installing Tailwind CSS are for trying out the framework, familiarizing yourself with it, or simple projects — there are a variety of install methods that are suitable for different developer environments that you may already be using. They can all be found here in the official installation documentation.

In the next guide we’ll be taking a look at putting together a custom navbar with Tailwind CSS, once it’s available it will be linked here.

Connect With Us