Tailwind CSS - Installation

Tailwind CSS - Installation and Setup

Getting started with Tailwind CSS is straightforward. There are two primary methods for using it in your project, each with its own use case:

1. Tailwind Play CDN: Perfect for quick prototyping, demos, or learning without any build setup.
2. Installing the Tailwind CLI: The recommended, production-ready approach that provides full customization, optimized performance, and integration with modern development tools.

Method 1: Using the Play CDN

The Play CDN is the fastest way to start using Tailwind. Simply add a single <script> tag to the <head> of your HTML file. The CDN script will scan your HTML for utility classes on-the-fly and generate the necessary CSS in the browser.

Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Tailwind with Play CDN</title>
  <!-- Add the Play CDN script -->
  <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-slate-200 flex justify-center items-center h-screen">
  <h1 class="text-3xl font-bold text-indigo-600 underline">
    Hello world from the Play CDN!
  </h1>
</body>
</html>

Important: The Play CDN is intended for development purposes only and is not the best choice for production due to performance considerations. For production sites, always use the CLI installation method.

Method 2: Installing the Tailwind CLI (Recommended)

For any real project, the Tailwind CLI is the way to go. It gives you access to all of Tailwind’s features, including customization via tailwind.config.js, using directives like @apply, and purging unused CSS for the smallest possible file size in production.

Prerequisites

• Node.js and npm: You need to have Node.js installed, which includes the npm package manager. You can download it from nodejs.org.

Step-by-Step Installation

Follow these steps in your project’s terminal:

Step 1: Create your project and install Tailwind CSS

# Navigate to your project folder or create a new one
cd my-tailwind-project

# Initialize a Node.js project
npm init -y

# Install Tailwind CSS as a development dependency
npm install -D tailwindcss

Step 2: Initialize Tailwind

Run the init command to generate a tailwind.config.js file. This file is where you will configure all aspects of your Tailwind setup.

npx tailwindcss init

This will create a minimal tailwind.config.js file in your project root.

Step 3: Configure your template paths

This is the most critical step. You must tell Tailwind where to look for your utility classes. Open tailwind.config.js and add paths to all of your HTML, JavaScript, and other template files in the content array.

tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    './src/**/*.{html,js}', // Adjust this to match your project structure
    './index.html'
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 4: Create your main CSS file

Create a CSS file (e.g., at src/input.css) and add the @tailwind directives for each of Tailwind’s layers. Tailwind will inject its generated styles at these points during the build process.

src/input.css

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

Step 5: Start the build process

Run the CLI tool to scan your template files and build your CSS. The --watch flag will automatically rebuild the CSS whenever you make changes to your templates or config file.

npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch

Pro Tip: Add this command to your package.json as an npm script for convenience:

package.json

{
  "scripts": {
    "dev": "tailwindcss -i ./src/input.css -o ./dist/output.css --watch"
  }
}

Now you can simply run npm run dev to start the watcher.

Step 6: Use it in your HTML

Finally, link to your compiled CSS file (dist/output.css) in your HTML’s <head> and start styling!

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>My Tailwind Project</title>
  <link href="./dist/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello from my production-ready setup!
  </h1>
</body>
</html>

Conclusion

While the Play CDN is excellent for learning and experimenting, the CLI installation is the standard for building modern, performant, and maintainable websites with Tailwind CSS. It unlocks the full power of the framework, from deep customization to automatic CSS purging, ensuring your users download the smallest possible stylesheet.