How to install tailwind CSS in HTML

Introduction

Nowadays, people use Tailwind CSS over pure CSS to style their web pages. Tailwind CSS is the framework of CSS and it saves time when styling. In this article, we'll learn different ways to install Tailwind CSS in our HTML project, and by the end of this, you will know how to use it for styling.

Install Tailwind CSS Via CDN

Use the CDN for development purposes only as it’s not the best choice for production.

Add the CDN script to your HTML file

  <script src="https://cdn.tailwindcss.com"></script>

Customize the config: This is optional, but if you want to customize your config, you only need to add, and customize this script tag.

  <script>
      tailwind.config = {
        theme: {
          extend: {
            colors: {
              clifford: '#da373d',
            }
          }
        }
      }
    </script>

Style your HTML tags using Tailwind CSS.

  <body>
    <h1 class="text-3xl font-bold underline text-clifford">
      Woah! I love Tailwind CSS
    </h1>
  </body>

Install Tailwind CSS Via CLI

This method is the fastest way to get your tailwind CSS up and running. You need to make sure to have node installed before installing it. Although you can install it without node, I will only show you how to install it with node using npm.

Run this in your terminal to create your tailwind config file.
```
  npm install -D tailwindcss
  npx tailwindcss init
```

Configure your template path. For tailwind CSS to work across all your files, ensure it has the correct path.

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

Add the Tailwind directives to your CSS

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

Run the CLI tool to scan your files and build your CSS

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

Try it out

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

Install Tailwind CSS Via PostCSS

If you use build tools like Vite, webpack, rollup, or Parcel, you can install tailwind CSS as a post-CSS plugin.

Install tailwind with npm in your terminal to create a config file.

  npm install -D tailwindcss postcss autoprefixer
  npx tailwindcss init

In your postcss.config.js, add tailwind CSS and autoprefixer

  module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    }
  }

In your tailwind.config.js, add all the file paths

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

Add tailwind directives to your index.css

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

Start the build process using the command in your package.json or simply use
```
  npm run dev
```

Start using Tailwind in your HTML

  <!doctype html>
  <html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="/dist/main.css" rel="stylesheet">
  </head>
  <body>
    <h1 class="text-3xl font-bold underline">
     Woah! I love Tailwind CSS
    </h1>
  </body>
  </html>

Conclusion

In conclusion, we've explored the different ways in which Tailwind CSS can be installed. Whether you opt for the convenience of CDN during development, the speed of the CLI setup, or integration with build tools through PostCSS, Tailwind offers flexibility tailored to your needs.