Table of Contents

Installing TailwindCSS

There are 2 ways of installing Tailwind. In this guide we are going to be sticking with the first solution because it’s easier to get started.

Installing Tailwind via CDN

The first, and simplest, way to install Tailwind is to include the CDN link directly in your page, like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>TailwindCSS</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/1.5.1/tailwind.min.css">
</head>
<body>
    
</body>
</html>

It’s as simple as that, you can now start using Tailwind utility classes in your page.

Installing Tailwind via NPM

The second way to install Tailwind is a little bit more involved; however, this will allow you to add your own customizations and give you some more flexibility. If you are still learning tailwind, it’s totally fine to use the CDN link.

You can feel free to skip to the next section if you don't want to install it with NPM just yet.

To install Tailwind via NPM, you can run the following command:

npm install tailwindcss@latest postcss@latest autoprefixer@latest

After installing with NPM, you’ll need to initialize a new tailwind config file, which is where you will add your own customizations.

npx tailwindcss init

This will generate a new file located in the root of your project called tailwind.config.js, with the following content:

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

Finally, you’ll need to include the following tailwind import helpers inside of your CSS, Less, or SASS file like so:

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

You will then need to run your NPM build command to compile your final tailwind CSS file for use. If you are new to Tailwind or even package managers like NPM, don’t be confused by this step, I would just keep pushing forward and use the CDN link in the meantime.

Take TailwindCSS for a test-drive

TailwindCSS has a little playground where you can give it a try and see a live preview of the page at the same time. Be sure to check out this playground at https://play.tailwindcss.com.

Ok, that’s about it for installing Tailwind, let’s move on to the next section where we will start learning about the awesome utility classes we can use to create some awesome websites.

Previous Section Next Section