Get started with Tailwind CSS: A quick guide to installation using NPM

Introduction

Tailwind CSS is a popular utility-first CSS framework that enables developers to quickly build responsive user interfaces. Tailwind classes can be used to style HTML elements. Most developers prefer this framework because it gives them control over components.

In this article, we'll go over how to install Tailwind CSS into our project in these simple steps.

How to Install Tailwind CSS

Take the following steps to install Tailwind CSS:

1. Create an index.html file in your code editor.

2. Open your terminal, input the code and press enter. This command creates a package.json file.

    npm init
   

3. Install the Tailwind CSS package. These commands initializes and creates a tailwind.config.js file.

    npm install -D tailwindcss
    npx tailwindcss init
   

4. Now, enter your tailwind.config.js file. Copy and paste the code below. This is where we intend to use our Tailwind CSS files.

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

5. Create an src (source) folder.

6. Create an input.css file in the src folder.

7. Copy and paste the following lines of code into your input.css file.

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

8. Start your Tailwind CSS

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

   And that's it! Happy Coding!