Install Tailwind via npm

In this lesson, we'll dive into the process of installing Tailwind CSS using npm, the Node.js package manager. We'll explore the various configurations necessary for a quick and efficient setup, ensuring you can start using the framework with ease.

Since we recommend using Tailwind alongside Next.js and React, you can skip this lesson and move on to the next one, where we provide detailed instructions on installing Tailwind with Next.js. However, if you intend to use Tailwind independently of any framework, please follow the instructions in this lesson.

Install Tailwind via npm

Pre-requisites

To effectively install and work with Tailwind CSS, it's essential to have Node.js version 12.13.0 or higher. This version is particularly important for building your CSS in the latest versions of Tailwind CSS. Always check for the latest version of Node.js on the Node.js website.

Steps to Install Tailwind CSS

1. Start by installing Tailwind CSS through npm. In your project directory, run:

Code block

npm install -D tailwindcss

In the command, the -D flag is used to specify that Tailwind CSS should be installed as a development dependency. This means Tailwind CSS will be added under the devDependencies section in your project's package.json file. Development dependencies are generally those modules that are needed during the development process but are not required to run the application in production. This distinction helps manage and optimize dependencies for different environments, ensuring that only necessary packages are included in the production build.

2. Run the following command to create the tailwind.config.js file:

Code block

npx tailwindcss init

This command initializes Tailwind CSS in your project and generates a basic configuration file, which you can then customize according to your project's requirements. The tailwind.config.js file is crucial for defining customizations and configurations for Tailwind CSS.

3. Open the project folder in VSCode and update the tailwind.config.js file to add the paths to all of your source code files.

Code block

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}

This is done to specify where Tailwind should look for class names to generate the styles. In the configuration file, you usually define these paths under the content section, ensuring Tailwind scans your HTML, JavaScript, or any other template files where you use Tailwind classes for creating the final, optimized CSS output.

4. Create a folder with the name "src" and then create input.css file in the src folder. Add the @tailwind directives for each of Tailwind’s layers to this input.css file.

src/input.css

Code block

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

@tailwind base; – This injects Tailwind's base styles, which are a set of normalize.css styles and additional base styles defined by Tailwind.

@tailwind components; – This is for any component classes you might define.

@tailwind utilities; – This injects Tailwind's utility classes, which are the core of the framework.

By doing this, you're essentially setting up your CSS file to include all of Tailwind's styling tools.

5. Run the following command on the terminal to scan your template files for classes and build your CSS.

Code block

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

This command tells Tailwind to process the file located at ./src/input.css, apply Tailwind's transformations based on your configuration and source files, and output the result to ./dist/output.css. The --watch flag means Tailwind will watch your source files for changes and automatically rebuild the CSS file when changes are detected, which is useful during development.

6. Create your first html file in the src folder with the name index.html and add the compiled CSS file path to the <head> tag.

Code block

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

This setup links your HTML file to the Tailwind CSS styles, ensuring that the Tailwind utility classes you use in your HTML are styled correctly. The link tag in the <head> section of your index.html should reference the path to the output.css file generated by Tailwind.

In the code above, we utilized the 'text-3xl', 'font-bold', and 'underline' utility classes from Tailwind CSS. Detailed information about these classes will be provided in subsequent lessons.

7. Now, open the index.html file in any modern browser to view the output.

If you encounter any errors during installation, please install the latest Node.js version. If the issue persists, feel free to post your question in the Q&A section, and someone from our channel community will be happy to assist you.

Next lesson - Install Tailwind with Next.js

In this lesson, we will explore the integration of Tailwind CSS with Next.js, a popular React framework. As we progress through the course, we'll be using Next.js and Tailwind CSS in tandem, providing you with the opportunity to become familiar with both React and Next.js. You'll learn how to build reusable components, leveraging the strengths of these powerful tools to create efficient, modern web applications.

All Modules