Web Technologies (9FC06) -
UNIT I
Tailwind
CSS
Tailwind 1 / 40
Web Technologies (9FC06) -
UNIT I
Tailwind CSS : Content
What is Tailwind
CSS? Why Tailwind
CSS?
Pre - Requisites
Bootstrap VS
Tailwind Utility-First
Approach Tools
Required
First Project
First Project -
Node Utility
Classes Sample
Code Tailwind 2 / 40
Web Technologies (9FC06) -
UNIT I
What is Tailwind CSS?
Tailwind is an open-source CSS framework that was released on
November 1st, 2017. Unlike traditional frameworks like Bootstrap
or Materialize, which provide pre-designed components, Tailwind
uses a "Utility-First" approach. This means instead of writing
custom CSS, you can apply small utility classes directly to your
HTML elements to style them.
This makes it faster and easier for both front-end and back-end
developers to build custom designs without having to write a lot of
CSS from scratch. It's become very popular because of how
flexible and easy it is to use.
Why the name Tailwind so Given?
As the wind blowing behind a vehicle makes vehicle moves
faster and faster, Similarly as long as the requirement or
changes needed we can append CSS to the html element to
design unique and customized user interfaces.
Tailwind 3 / 40
Web Technologies (9FC06) -
UNIT I
Why Tailwind CSS?
Benefits/Advantages:
It is Highly Customizable
It Has Common Utility Patterns.
It Can Be Optimized Using PurgeCSS.
It Enables Building Complex Responsive
Layouts Freely. You can easily interact with the
community.
Limitations/Disadvantages
It is Necessary to Build a
Step Larger HTML Sizes
Tailwind 4 / 40
Web Technologies (9FC06) -
UNIT I
Pre- Requisites
1 Basic HTML
Understanding HTML tags and elements.
Familiarity with HTML attributes and their
usage.
2 Knowledge of how to structure a webpage
using HTML.
Basic CSS
Understanding of CSS syntax and
3 properties.
Familiarity with CSS selectors, combinators, and
specificity. Knowledge of how to apply styles to
HTML elements.
Basic JavaScript (Optional)
While not mandatory for learning Tailwind CSS itself, basic
JavaScript knowledge can be helpful.
Understanding how to Tailwind
manipulate the DOM with JavaScript. 5 / 40
Web Technologies (9FC06) -
UNIT I
Exampl
e
Tailwind 6 / 40
Web Technologies (9FC06) -
UNIT I
Tools Required?
1 Code Editor(Any)
Visual Studio Code (VSCode): A popular, feature-rich code
editor with numerous extensions.
Sublime Text: A lightweight and fast editor.
Atom: An open-source editor with a strong community.
2 Node.js and npm (Node Package Manager)
Node.js: A JavaScript runtime required to use npm.
npm: The package manager for Node.js, used to install
Tailwind CSS and other dependencies.
3 Web Browser(Any)
Google Chrome: Offers robust developer tools for
inspecting and debugging CSS.
Firefox: Also provides excellent developer tools and is
known for its CSS Grid and Flexbox support.
Internet Ex: Also provides excellent developer tools and is
known for its
CSS Grid and Flexbox support.
Tailwind 7 / 40
Web Technologies (9FC06) -
UNIT I
Visual Studio
Code
Download Link:
https://code.visualstudio.com/
Tailwind 8 / 40
Web Technologies (9FC06) -
UNIT I
Node.js and npm(Node package
manager)
Download Link: https://nodejs.org/en/download/prebuilt-
installer
Tailwind 9 / 40
Web Technologies (9FC06) -
UNIT I
Verify Installation
Node: Go to the command prompt and type node –v or
node –version npm: Go to the command prompt and type
npm –v or npm –version
Tailwind 10 /
Web Technologies (9FC06) -
UNIT I
First
Project
Steps to implement Tailwind
Create a project folder in the machine.
Open project folder using Visual studio
Code. create a file index.html
include the tailwind.css as below:
< l i n k h r e f = " h tt p s : / / cdn . j s d e l i v r . n e t / npm / t a i l w i n d c s s @ 2
. 2 . 1 9 / d i s t / t a i l w i n d . min . c s s " r e l = " s t y l e s h e e t " >
write the sample code
below:
<div c l a s s = " tex t - 6 x l font - bold unde r l i ne " >
welcome t o S N I S T
</ d i v >
open the
index.html Tailwind 11 /
Web Technologies (9FC06) -
UNIT I
First
Project
Output
Tailwind 12 /
Web Technologies (9FC06) -
UNIT I
First
Project
Steps to create the project
Create a project folder in the machine.
Open project folder using Visual studio Code.
Go the terminal and type the following
command npm install -D [email protected]
postcss autoprefixer
Tailwind 13 /
Web Technologies (9FC06) -
UNIT I
First Project continued..
In the above command:
’
[email protected]’: This specifies that you want to install
the latest version of the Tailwind CSS framework. Tailwind
CSS is a utility-first CSS framework used for designing web
interfaces.
’postcss’: PostCSS is a tool for processing tailwindcss
’autoprefixer’: It ensures compatibility with different
browsers.
Tailwind 14 /
Web Technologies (9FC06) -
UNIT I
First Project continued..
Understanding folder
structure
1 nodemodules: It is a package manager folder for node.js
consists all the necessary modules installed.
2 package.json: It shows all the dependencies installed in
the project with the versions.
3 package-lock.json: It locks all the dependencies installed
and make sure those versions will get installed in various
environments.
Tailwind 15 /
Web Technologies (9FC06) -
UNIT I
First Project continued..
Creating a configuration file
Go to the terminal and type the command npx
tailwindcss init will generate tailwind.config.css file
Configure the
above file to refer all files(html/js/css) in src folder as
shown right side.
Tailwind 16 /
Web Technologies (9FC06) -
UNIT I
First Project continued..
Creating a CSS file: src/input.css and write the below
code:@ t a i l w i n d b a se ;
@tailwind
components; @ t a i l w i n d
u ti l i ti e s ;
This file is created to pull out the tailwind directives,
through which we generate a output css file with these
directives to use in html to develop unique and
customizable web pages. Path: src/input.css
Tailwind 17 /
Web Technologies (9FC06) -
UNIT I
First Project continued..
Process a css file created above and generate new file:
This can be done in multiple ways, one way is to type the
following command in terminal:
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Tailwind 18 /
Web Technologies (9FC06) -
UNIT I
First Project continued..
Create a Webpage
Create a new file index.html under src folder
Import the output.css in the above html file and include
the following code as a sample:
<div c l a s s = " text - 6 x l font - bold unde r l i ne " >
welcome t o S N I S T
</ d i v >
Output
Tailwind 19 /
Web Technologies (9FC06) -
UNIT I
Utility Classes
Common Utility Classes:
Margin and padding (’m-4’,
’p-4’) Text alignment (’text-
center’) Background color
(’bg-blue-500’)
Tailwind 20 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Flexbox Utilities:
Using ’flex’, ’flex-row’, ’flex-col’
Aligning items (’items-center’, ’justify-between’)
Example:
Tailwind 21 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Grid Utilities:
Using ’grid’, ’grid-
cols-3’ Gap utilities
(’gap-4’)
Example:
Tailwind 22 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Typography:
Font size (’text-lg’, ’text-2xl’)
Font weight (’font-bold’, ’font-
light’) Line height (’leading-
tight’)
Tailwind 23 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Color Utilites:
Text color (’text-red-500’)
Background color (’bg-green-
500’) Border color (’border-
blue-500’)
Example:
Tailwind 24 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Spacing Utilities:
Margin (’m-4’, ’mt-2’)
Padding (’p-4’, ’pt-2’)
Space between (’space-x-4’, ’space-y-4’)
Example:
Tailwind 25 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Spacing Utilities: Spacing
Example
Tailwind 26 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Background Utilities:
Background color (’bg-yellow-
300’) Background image and
position Example:
Tailwind 27 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Responsive Utilities:
’sm’: Small screens (min-width:
640px) ’md’: Medium screens (min-
width: 768px) ’lg’: Large screens
(min-width: 1024px)
’xl’: Extra large screens (min-width:
1280px) ’2xl’: 2x Extra large screens
(min-width: 1536px) Example:
Tailwind 28 /
Web Technologies (9FC06) -
UNIT I
Utility Classes..
Responsive Utilities: One more
example
Tailwind 29 /
Web Technologies (9FC06) -
UNIT I
Utility
Classes..
Responsive Utilities: Output
Tailwind 30 /
Web Technologies (9FC06) -
UNIT I
Questionnaire
Short Answer
Questions
1 What is Tailwind CSS, and what makes it different from
other CSS frameworks?
2 Why would you choose Tailwind CSS for a project instead
of other frameworks?
3 What prior knowledge is helpful before starting with
4 Tailwind CSS?
What does the ”utility-first” design philosophy mean in the
5 context of Tailwind CSS?
What are utility classes in Tailwind CSS?
Tailwind 31 /
Web Technologies (9FC06) -
UNIT I
Long Answer Questions
1 What are utility classes in Tailwind CSS, and how do they
function within the framework? Describe how these classes,
such as text-center or bg-blue-500, are used to apply
specific styles directly in the HTML markup and how they
2 contribute to a utility-first design approach.
What are the essential steps to create and configure a
3 project with Tailwind CSS?
How can you customize Tailwind CSS classes to fit
4 specific design requirements for your project? Explain in
detail?
What are the main reasons for choosing Tailwind CSS over
5 other CSS frameworks or writing custom CSS? Elaborate
the Advantages and Disadvantages
What are utility classes in Tailwind CSS used to give
responsive design, and how are they used to style HTML
elements? Explain with an example?
Tailwind 32 /
Steps to execute a Tailwind project without CDN link
1.node -v
2.npm -v
3.npm init -y
4.npm install -D [email protected] postcss autoprefixer
5. npx tailwindcss init
in tailwind.config.js in content
["./src/**/*.{html,js}"],
6. create folder src ,in src create a file input.css
@tailwind base;
@tailwind components;
@tailwind utilities;
7. create index.html in src
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-
scale=1.0">
<title>Document</title>
<link href="output.css" rel="stylesheet">
</head>
<body>
<div class="text-6xl font-bold underline">
welcome to SNIST
</div>
</body>
</html>
8.npx tailwindcss -i ./src/input.css -o ./src/output.css --watch
Output
Web Technologies (9FC06) -
UNIT I
Thank you
Tailwind 36 /
