Scribd
Upload
5 views

react3 - tailwindcss

Uploaded by

huzaifa ali
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
5 views

react3 - tailwindcss

Uploaded by

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

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.

You might also like