Lecture 1 - Introduction

Lecture 2 - Background Classes and Shades

Lecture 3 - Element Sizing & Tailwind's Numbering System

Lecture 4 - Padding & Margins

Lecture 5 - Styling Text

Lecture 6 - Borders and Radius

Lecture 7 - Display Modes

Lecture 8 - Responsive Design

Lecture 9 - Pseudo Classes

Lecture 10 - Transitions, Transforms and Animations

Lecture 11 - Gradients

Lecture 12 - Other Utilities

Untitled item

Lecture 13 - Layout and Positioning

Lecture 14 - Flexbox Part-1

Lecture 15 - Flexbox Part-2

Lecture 16 - Space Between Utilities

Lecture 18 - Grid

Block Gallery Challenge

Lecture 19 - Basic Card Component with no image

Lecture 20 - Card with and image

Basic Buttons

Basic Form

Lecture 26 - Installing TailwindCSS

Lecture 27 - Deploying to Netlify

Lecture 28 - Tailwind in VS Code

Lecture 29 - Debug Screen Plugin

Lecture 30 - Header Layout

Lecture 31 - Navigation Styling

Lecture 33 - Hero Layout

Lecture 34 - Hero Styling

Lecture 35 - Hero Decoration

Lecture 36 - Hero Responsive

Lecture 37 - About Layout

Lecture 38 - About Styling

Lecture 39 - About Responsive

Lecture 40 - What You'll Learn Layout

Lecture 41 - What You'll Learn Styling

Lecture 42 - What You'll Learn Responsive

Lecture 43 - Layout + Styling + Responsive

Lecture 44 - Pricing Layout

Lecture 45 - Pricing Styling

Lecture 46 - Pricing Custom Class

Lecture 47 - Pricing Responsive

Lecture 48 - Layout + Styling + Responsive

Lecture 49 - Layout + Styling + Responsive

Lecture 50 - Layout + Styling + Responsive

Lecture 51 - Creating our menu using AlpineJS

Learn Tailwind CSS from scratch! Make good looking designs quickly.

Tailwind CSS is a utility–first framework for rapidly building custom designs. This tutorial will teach your Tailwind from scratch.
During this course we will be exploring the features of Tailwind CSS. As a quick recap, Tailwind is a utility–first framework designed to speed up the design process by completely removing the need for custom CSS.
In the past, every HTML element would get a single class and that class would contain a lot of custom CSS in a separate CSS file. Though this is still the general practice, this practice leads to huge CSS files, reduces the ease of maintaining CSS and yields overall poorer developer experience.
Another advantage of a utility framework is its superior performance with caching due to not busting the cache for small CSS changes.
Tailwind has been designed with incredible sensible defaults to make your designs look and feel polished and designed through the careful use of color palettes, color shades, sizing consistency and modern web best–practices. It’s also worth noting, that Tailwind is mobile–first and has an easy naming convention with responsive designs built–in.
Need some customizations?
Tailwind’s robust customization system will allow you to customize/tweak/modify everything in the framework through the use of the tailwind.config.js file.
You Will Learn:
All the types of utility classes
How to use the utility classes properly in our project
How to customize the existing utilities of Tailwind
How to add new utility classes to our project
Tailwind Layouts
Responsive web design
And Much More...

I am Sarfaraz Kasmani a Front End Developer and Digital Marketer from Mumbai, India. I am having more than 9 years of experience in the field of Front End Development and Digital Marketing.

I'm excited to be here and to help people in becoming more experienced in the most interesting and powerful field in the world.

Certificate Details

Tailwind CSS Mastery

Course Goals

Sarfaraz Kasmani