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:
