Tailwind CSS Installation

Here, we will discuss the installation method of Tailwind CSS using two strategies discussed as follows:

Strategy 1: Install Tailwind through npm

Step 1: npm init - y

Step 2: npm install tailwindcss

Step 3: Use the @tailwind mandate to infuse Tailwind's base, parts, and utility styles into your CSS document, as shown below:

@tailwind base;

@tailwind component;

@tailwind utilities;

Step 4: npx tailwindcss init
This is utilized to make a config document to modify the plans. It is a discretionary advance.

Step 5: npx tailwindcss construct styles.css - o output.css
This order is utilized to compile style.css is the document that must be compiled and output.css is the record on which it must be compiled. If the document output.css isn't made before then it will automatically be made.

Strategy 2: Utilizing Tailwind through CDN.

<- - - add it to the head segment of the html file- - ->

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

• However, there are a few constraints when CDN is used.
  Some of them are:
  • Customize Tailwind's default theme can't be utilized
  • Orders like @apply, @variants, and so forth can't be utilized
  • Can't introduce outsider modules (third-party plugins)

• Below browsers are supported by tailwind CSS:
  • Google Chrome
  • Firefox
  • Safari
  • Microsoft Edge

Let’s consider an example.

Example / code of html:

<!-- Write HTML code here -->
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport"
      content="width=device-width,
          initial-scale=1.0" />
    <title>Tailwind CSS</title>
    <link rel="stylesheet"
      href="./style.css" />
  </head>
  <body>
    <!-- font size -->
    <h1 class="text-lg">Font Size- Large</h1>
    <!-- font weight -->
    <h1 class="font-bold">Fond Weight- Bold</h1>
    <!-- Typography -->
    <h1 class="tracking-widest">Spacing Between Words</h1>
    <!-- Transform -->
    <h1 class="uppercase">Uppercase Word</h1>
    <!-- line height align color background
      width padding margin border opacity shadow-->
    <div class="leading-9 text-right
          text-black -650
          bg-yellow-500 w-1/2 h-1/3 p-5 my-10
          border-t-2
          border-solid
          border-pink-500
          opacity-40
          shadow-2xl">
      
<p> Tutorial And Example </p>


    </div>
    <!-- focus pseudo class -->
    <input class="border focus:border-blue-500
          focus:outline-none p-5 m-5
          placeholder-red-500"
      type="text"
      name=""
      value=""
      placeholder="name" />
    <!-- layout -->
    <div class="md:flex md:flex-wrap m-5">
      <div class="bg-orange-500
            p-5 md:w-1/3
            md:bg-red-600">
      Tutorial And Example
    </div>
      <div class="bg-blue-500 p-5 md:w-1/3">
      Tutorial And Example
    </div>
      <div class="bg-pink-500 p-5 md:w-1/3">
      Tutorial And Example
    </div>
    </div>
  </body>
</html>

The output for the above code is as follows: