Tailwind installation methods

Installation Methods of Tailwind CSS

Tailwind CSS can be installed in multiple ways depending on your project setup. The three most common installation methods are CDN, NPM, and Yarn. Let’s explore each one:

1. Using CDN (Content Delivery Network)

CDN installation is the quickest and easiest way to use Tailwind CSS without needing to set up a build process. It’s ideal for smaller projects, demos, or quick prototypes.

Steps:

Add the Tailwind CDN link to the <head> section of your HTML file.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind CDN Example</title>
  <!-- Tailwind CSS via CDN -->
  <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
</head>
<body>
  <div class="text-center p-4 bg-blue-500 text-white">
    Hello, Tailwind CSS!
  </div>
</body>
</html>

Pros:

No setup required.
Great for simple projects or quick testing.
Easy to integrate into any HTML file.

Cons:

You won’t be able to customize Tailwind’s default configuration (e.g., colors, spacing).
No PurgeCSS for removing unused CSS, so the file size remains large.
Not suitable for larger projects or production use due to limited customization and optimization.

2. Using NPM (Node Package Manager)

NPM installation is the most common method for larger projects that require customization, optimization, and better control over the CSS files.

Steps:

Initialize a new project (if you don’t have one yet).

npm init -y

Install Tailwind CSS and its dependencies via NPM.

npm install -D tailwindcss

Create a Tailwind configuration file (optional, but recommended for customization).

npx tailwindcss init

This creates a tailwind.config.js file where you can customize Tailwind's default settings, such as adding your own colors, spacing, and more.

Create your CSS file and include the Tailwind directives.

/* ./src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Build your Tailwind CSS file.

Add a script to your package.json file to build Tailwind:

{
  "scripts": {
    "build:css": "npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch"
  }
}

Run the build process:

npm run build:css

Pros:

Full customization via tailwind.config.js.
Can optimize the CSS output with PurgeCSS.
Works well for large-scale projects.
Automatically integrates with modern development environments (Webpack, Vite, etc.).

Cons:

Requires setting up Node.js and NPM.
More initial setup time than using a CDN.

3. Using Yarn

Yarn is an alternative package manager to NPM, offering faster installs and better dependency management. The process for installing Tailwind via Yarn is almost identical to the NPM process.

Steps:

Initialize a new project (if you don’t have one).

yarn init -y

Install Tailwind CSS.

yarn add tailwindcss --dev

Create a Tailwind configuration file.

npx tailwindcss init

Create your CSS file and include Tailwind’s directives.

/* ./src/styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Build your CSS file.

Add the following script to package.json:

{
  "scripts": {
    "build:css": "npx tailwindcss -i ./src/styles.css -o ./dist/output.css --watch"
  }
}

Run the build command:

yarn run build:css

Pros:

Faster installations compared to NPM.
Offers the same level of customization and optimization as the NPM method.
Handles dependencies more efficiently in some cases.

Cons:

Requires installing and setting up Yarn, which may be unnecessary if you're already using NPM.
Similar setup steps to NPM, so no significant advantage unless you're already familiar with Yarn.

Which Method Should You Use?

CDN: Best for simple projects, demos, or when you need to quickly experiment with Tailwind CSS without setting up a build process. Limited customization.
NPM: Ideal for larger projects or when you need full control over the customization, performance, and build process. Commonly used in modern web development environments.
Yarn: Useful if you prefer Yarn over NPM for package management. Offers the same benefits as the NPM method but with faster installation speeds.

Next Previous

Tailwind tutorial

What is Tailwind CSS

Key Features of Tailwind CSS

Tailwind CSS vs Other CSS Frameworks