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
