Setting Up Tailwind CSS v4 CLI for Beginners: A Comprehensive Guide

Introduction

Tailwind CSS's utility-first methodology has revolutionized how developers approach web styling. Version 4 continues this evolution with improved features and performance. This guide will walk you through setting up a Tailwind CSS v4 project from scratch, perfect for beginners who want to learn this powerful CSS framework.

I'll break down every step, from installing the necessary software to creating your first Tailwind-styled webpage. By the end of this guide, you'll have a functioning development environment with live updates and helpful coding assistance.

Prerequisites

Part 1: Installing Essential Software

Installing Visual Studio Code

Visual Studio Code (VS Code) is a free, powerful code editor that works wonderfully with Tailwind CSS.

1. Open your web browser and navigate to the Visual Studio Code website.

2. Click the download button for your operating system (Windows, macOS, or Linux).

3. Once downloaded, run the installer and follow the on-screen instructions.

4. After installation is completed, launch VS Code to ensure it's working properly.

Installing Node.js

Node.js is a JavaScript runtime that allows you to run JavaScript on your computer rather than just in browsers. We need it to install and run Tailwind CSS.

1. Visit the Node.js website.

2. Download the "LTS" (Long Term Support) version for your operating system.

3. Run the installer and follow the prompts to complete the installation.

4. To verify Node.js is installed correctly, open your terminal or command prompt and type:

    node -v
   

5. You should see a version number displayed (e.g., v18.12.1), confirming that Node.js is installed.

Part 2: Creating Your Tailwind CSS Project

Setting Up the Project Folder

1. Create a new folder for your project anywhere on your computer.

2. Open VS Code.

3. In VS Code, go to File > Open Folder and select the folder you just created.

4. Open a terminal in VS Code by going to Terminal > New Terminal.

Installing Tailwind CSS

Step 1: Install Tailwind CSS using the CLI tool The newest approach uses Tailwind CSS and the dedicated CLI tool:

1. In your terminal, run:

npm install tailwindcss @tailwindcss/cli

2. This command installs both the core Tailwind CSS package and the standalone CLI tool, which offers improved performance

3. Wait for the installation to complete - you'll see a success message when finished

4. After running this command, you'll notice three new items in your project:

   • node_modules: This directory contains all the installed packages and their dependencies. It includes Tailwind CSS, the CLI tool, and numerous other packages they rely on. You don't need to modify anything in this folder directly, as npm manages it automatically.

   • package.json: This file is your project's manifest. It keeps track of your project's metadata and, most importantly, lists all your project dependencies (like Tailwind CSS). It also can contain scripts, configuration settings, and other information about your project. You can modify this file to add custom scripts or configurations.

   • package-lock.json: This file locks the exact versions of all packages and their dependencies installed in your project. It ensures that everyone working on the project gets the same package versions when they run npm install, preventing inconsistencies across development environments. You shouldn't manually edit this file.

Step 2: Create Your SRC Folder and CSS Input File

Unlike older versions that used Tailwind directives, version 4 uses a simpler import approach:

1. Create a src folder in your project folder.

2. Create a new file called input.css in your src folder and import Tailwind in your CSS by adding the text:

@import "tailwindcss";

This import statement tells the build process to include all of Tailwind's styles

Step 3: Start the Tailwind CLI Build Process

Now we'll use the CLI tool to watch for changes and generate our CSS:

1. In your terminal, run:

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

2. Let's break down this command:

   • npx @tailwindcss/cli: Runs the Tailwind CLI tool

   • -i ./src/input.css: Specifies your input CSS file

   • -o ./src/output.css: Defines where to save the generated CSS

   • --watch: Keeps the process running, automatically updating the output when files change

3. You'll see a message indicating that Tailwind is watching for changes, and your output.css file will be generated

Step 4: Create Your HTML File

Let's create a basic HTML file that uses Tailwind classes:

1. In your project's root directory, create an index.html file.

2. Add the following content:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="./src/output.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

3. Notice how we're linking to the output.css file that's being generated by the Tailwind CLI

Part 3: Enhancing Your Development Workflow

Creating an npm Script for Convenience

1. Open your package.json file. This file is crucial for npm projects as it:

   • Stores project metadata (name, version, description)

   • Lists dependencies and their versions

   • Contains configuration settings

   • Houses custom scripts for common tasks

2. Add a script in the "scripts" section:

{
  "dependencies": {
    "@tailwindcss/cli": "^4.0.14",
    "tailwindcss": "^4.0.14"
  },
  "scripts": {
  "dev": "npx @tailwindcss/cli -i ./src/input.css -o ./src/output.css --watch"
}
}

3. Now you can stop your terminal with CTRL/CMD + C and simply run:

npm run dev

Installing Tailwind CSS IntelliSense

For a better coding experience with Tailwind:

1. Install the Tailwind CSS IntelliSense extension in VS Code

   • Search for "Tailwind CSS IntelliSense" in the Extensions Marketplace

   • Install the extension by Tailwind Labs

2. This extension provides autocomplete suggestions, hover previews, and linting for Tailwind classes

3. With the latest update, the intelligence feature isn't functioning correctly. To fix this, create a tailwind.config.js file in your project folder.

Conclusion

You have successfully set up a complete Tailwind CSS v4 development environment using the latest installation method. This approach, leveraging the dedicated CLI tool, enhances performance and simplifies configuration. With features like live reloading, intelligent code completion, and automatic CSS generation, you're fully equipped to build beautiful websites using Tailwind's utility-first framework.