Introduction to Tailwind CSS - GeeksforGeeks

03 Jul, 2021
Tailwind CSS can be used to make websites in the fastest and the easiest way.
Tailwind CSS is basically a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs without any annoying opinionated styles you have to fight to override. The beauty of this thing called tailwind is it doesn’t impose design specification or how your site should look like, you simply bring tiny components together to construct a user interface that is unique. What Tailwind simply does is take a ‘raw’ CSS file, processes this CSS file over a configuration file, and produces an output.Why Tailwind CSS?
Faster UI building process
It is a utility-first CSS framework which means we can use utility classes to build custom designs without writing CSS as in traditional approach.  
Advantages of Tailwind CSS:
No more silly names for CSS classes and Id’s.
Minimum lines of Code in CSS file.
We can customize the designs to make the components.
Makes the website responsive.
Makes the changes in the desired manner. CSS is global in nature and if make changes in the file the property is changed in all the HTML files linked to it. But with the help of Tailwind CSS we can use utility classes and make local changes.
Installation: Method 1: Install Tailwind via npm
Step 1:npm init -y
Step 2:npm install tailwindcss
Step 3:Use the @tailwind directive to inject Tailwind’s base, components, and utilities styles into your CSS file. @tailwind base; @tailwind components; @tailwind utilities;
Step 4:npx tailwindcss init This is used to create a config file to customize the designs. It is an optional step.
Step 5:npx tailwindcss build styles.css -o output.css This command is used to compile style.css is the file which has to be compiled and output.css is the file on which it has to be compiled.If the file output.css is not created earlier then it will automatically created.
Method 2: Using Tailwind via CDN
html
<!-- add it to the head section of the html file --><link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"      rel="stylesheet">
But there are some limitations when CDN is used. Some of them are:
Customize Tailwind’s default theme can’t be used
Directives like @apply, @variants, etc can’t be used
Can’t install third-party plugins
Example:
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">Large font size</h1>        <!-- font weight -->        <h1 class="font-bold">Bold fond weight</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-red-700                    bg-red-500 w-1/2 h-1/3 p-5 my-10                    border-t-2                    border-solid                    border-green-500                    opacity-40                    shadow-2xl">             <p>GeeksforGeeks</p>         </div>        <!-- focus pseudo class -->        <input class="border focus:border-red-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-blue-500                        p-5 md:w-1/3                        md:bg-pink-600">              GeeksforGeeks          </div>            <div class="bg-teal-500 p-5 md:w-1/3">              GeeksforGeeks          </div>            <div class="bg-yellow-500 p-5 md:w-1/3">              GeeksforGeeks          </div>        </div>    </body></html>
Output:
Supported Browser:
Google Chrome
Microsoft Edge
Firefox
Safari
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
ysachin2314
CSS-Misc
CSS
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to create footer to stay at the bottom of a Web page?
CSS to put icon inside an input element in a form
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to insert spaces/tabs in text using HTML/CSS?
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
How to set input type date in dd-mm-yyyy format using HTML ?