Scribd
Upload
350 views

Introduction To Tailwind CSS - GeeksforGeeks PDF

Uploaded by

Abraxas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
350 views

Introduction To Tailwind CSS - GeeksforGeeks PDF

Uploaded by

Abraxas
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

Courses Tutorials Jobs Practice Sign In

HTML CSS JavaScript jQuery PHP Bootstrap NodeJS ReactJS AngularJS ExpressJS Tailwind Bulma Foundation React Desktop

Tailwind CSS

Introduction to Tailwind

Introduction to Tailwind CSS


CSS

Tailwind CSS Layout


Difficulty Level : Medium ● Last Updated : 03 Jul, 2021

Tailwind CSS Flexbox


Tailwind CSS can be used to make websites in the fastest and the
Tailwind CSS Grid easiest way.

Tailwind CSS is basically a utility-first CSS framework for rapidly


Tailwind CSS Alignment
building custom user interfaces. It is a highly customizable, low-

Tailwind CSS Spacing level CSS framework that gives you all of the building blocks you
need to build bespoke designs without any annoying opinionated
Tailwind CSS Sizing styles you have to fight to override. 
The beauty of this thing called tailwind is it doesn’t impose design
Tailwind CSS specification or how your site should look like, you simply bring tiny
Typography
components together to construct a user interface that is unique.
What Tailwind simply does is take a ‘raw’ CSS file, processes this CSS
Tailwind CSS
Backgrounds file over a configuration file, and produces an output.
Why Tailwind CSS?
Tailwind CSS Borders
Faster UI building process
It is a utility-first CSS framework which means we can use utility
Tailwind CSS Effects
classes to build custom designs without writing CSS as in
traditional approach. 
Tailwind Filters
 

Tailwind CSS Tables


Advantages of Tailwind CSS:

Tailwind CSS Transitions No more silly names for CSS classes and Id’s.
and Animation Minimum lines of Code in CSS file.
We can customize the designs to make the components.
Tailwind CSS Makes the website responsive.
Transforms Makes the changes in the desired manner. 
CSS is global in nature and if make changes in the file the
Tailwind CSS W H AT ' S N E W
property is changed in all the HTML files linked to it. But with the
Interactivity
help of Tailwind CSS we can use utility classes and make local
changes. Data Structures &
Tailwind CSS SVG
Algorithms- Self
Installation:  Paced Course
View Details
Method 1: Install Tailwind via npm

Step 1:npm init -y Complete Interview


Step 2:npm install tailwindcss Preparation- Self
Step 3:Use the @tailwind directive to inject Tailwind’s base, Paced Course
components, and utilities styles into your CSS file.  View Details

@tailwind base; 
@tailwind components;  Practice Problems,
@tailwind utilities; POTD Streak, Weekly
Step 4:npx tailwindcss init  Contests & More!
View Details
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  Online course for data analyst
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

Learn More
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">
Online course for data analyst

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</
<!-- 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

Like 21

Next

Tailwind CSS Container

R ECO M M E N D E D A RT I C L E S Page : 1 2 3

01 Which CSS framework


is better Tailwind CSS 05 Tailwind CSS Filter
04, Jun 21

or Bootstrap ?
28, Oct 21

06 Tailwind CSS

02 Tailwind CSS Text


Color
Grayscale
04, Jun 21
18, Feb 21

03 How to change svg


icon colors with 07 Tailwind CSS Mix
Blend Mode
Tailwind CSS ? 23, Jun 21
25, May 21

04 Tailwind CSS Stroke


Width 08 Tailwind CSS
Placeholder Color
22, Mar 21 16, Feb 21

Article Contributed By :

Sapna2001
@Sapna2001

Vote for difficulty


Current difficulty : Medium

Easy Normal Medium Hard Expert

Improved By : ysachin2314

Article Tags : CSS-Misc, CSS, HTML, Web Technologies

Practice Tags : HTML

Improve Article Report Issue

Company Learn News Languages Web Contribute


A-143, 9th Floor, Sovereign About Us Algorithms Python Development Write an Article
Corporate Tower, Top News
Sector-136, Noida, Uttar Pradesh - Careers Data Java Web Tutorials Improve an
201305 Technology
In Media Structures CPP Django Tutorial Article
feedback@geeksforgeeks.org Work &
Contact Us SDE Cheat Golang HTML Pick Topics to
Career
Sheet Write
Privacy Business C# JavaScript
Policy Machine Write Interview
Finance SQL Bootstrap
learning Experience
Copyright Kotlin ReactJS
Lifestyle
Policy CS Internships
Knowledge NodeJS
Subjects Video Internship
Video
Tutorials

Courses

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie
Got It !
@geeksforgeeks , Some rights reserved Policy & Privacy Policy

You might also like