TAILWIND CSS
WITH REACT
IRFAN JAVED
M HUZAIFA ALI
TABLE OF CONTENTS
01 03
Overview What is
Tailwind CSS
02 04
Utility First Installation
Approach
01
OVERVIEW
WHAT IS UTILITY FIRST CSS?
A different way to write
CSS.
• Instead of writing CSS
in separate files, you
work primarily in HTML.
• Small CSS classes with
a single responsibility.
• Classes are named by
THE TRADIONAL CSS
APPROACH
SAME CLASSES BEING USED
MULTIPLE TIMES
SAME CLASSES BEING USED
MULTIPLE TIMES
02
UTILITY FIRST APPROACH
WHAT PROBLEMS DOES THIS
SOLVES?
Reusability
You don't
waste time
and energy
inventing
class names
No switching Your CSS
between CSS stops
and HTML growing
files.
03
WHAT IS TAILWIND CSS?
Tailwind CSS is a
highly
customisable, low-
level CSS
framework
CLASSES SUPPORTED BY
TAILWIND
04
INSTALLATION
THINGS YOU NEED
NODE AND VS CODE
NPM
You can You can
download the download the
latest latest
a version of a version of
Node.js from the Visual Studio
official website Code from the
(https://nodejs.or official website
g/) and install it
using the
instructions
THINGS YOU NEED
Tailwind Library
Tailwind IntelliSense
Extension
Setup Tailwind CSS
STEP 1:
STEP 2:
Setup Tailwind CSS
STEP 3:
Setup Tailwind CSS
STEP 4:
STEP 5:
05
EXAMPLE PROJECT
MAKE A SIMPLE LOGIN PAGE USING TAILWIND CSS
CODE:
https://github.com/zayfaali/simple-tailwind-login
END
CREDITS: This presentation template was
created by Slidesgo, incluiding icons by
Flaticon, and infographics & images by
Freepik.
