Published 5/2023
MP4 | Video: h264, 1280x720 | Audio: AAC, 44.1 KHz
Language: English | Size: 4.68 GB | Duration: 4h 18m

Learn Tailwind CSS from scratch! Make good looking designs quickly.
What you'll learn
How to use Tailwind CSS classes
Make good looking designs
Reducing bundle sizes
How to customize Tailwind
Using Tailwind in VS Code
Creating common components
Tailwind css 3.0
Deploying it to Netlify
AlpineJS
vite JS installation
Requirements
Basic understanding of HTML and CSS
Description
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 classesHow to use the utility classes properly in our projectHow to customize the existing utilities of TailwindHow to add new utility classes to our projectTailwind LayoutsResponsive web designAnd Much More...
Overview
Section 1: Introduction
Lecture 1 Introduction
Section 2: Basic Concepts
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
Section 3: Layout Concepts
Lecture 13 Layout and Positioning
Lecture 14 Flexbox Part-1
Lecture 15 Flexbox Part-2
Lecture 16 Space Between Utilities
Lecture 17 Block Gallery Challenge
Lecture 18 Grid
Section 4: Creating Custom Components
Lecture 19 Basic Card Component with no image
Lecture 20 Card with and image
Lecture 21 Horizontal and Responsive Card
Lecture 22 Basic Buttons
Lecture 23 Outlined Button
Lecture 24 Grouped and with Icon Buttons
Lecture 25 Basic Form
Lecture 26 Minimal Login Form
Lecture 27 Floating Label Form
Section 5: Building a Course Project
Lecture 28 Installing TailwindCSS
Lecture 29 Deploying to Netlify
Lecture 30 Tailwind in VS Code
Lecture 31 Debug Screen Plugin
Section 6: Header/Navigation Section
Lecture 32 Header Layout
Lecture 33 Navigation Styling
Lecture 34 Navigation Responsive
Section 7: Hero Section
Lecture 35 Hero Layout
Lecture 36 Hero Styling
Lecture 37 Hero Decoration
Lecture 38 Hero Responsive
Section 8: About Me Section
Lecture 39 About Layout
Lecture 40 About Styling
Lecture 41 About Responsive
Section 9: What You'll Learn Section
Lecture 42 What You'll Learn Layout
Lecture 43 What You'll Learn Styling
Lecture 44 What You'll Learn Responsive
Section 10: What You'll Build Section
Lecture 45 Layout + Styling + Responsive
Section 11: Pricing Section
Lecture 46 Pricing Layout
Lecture 47 Pricing Styling
Lecture 48 Pricing Custom Class
Lecture 49 Pricing Responsive
Section 12: Video List Section
Lecture 50 Layout + Styling + Responsive
Section 13: FAQ Section
Lecture 51 Layout + Styling + Responsive
Section 14: Footer & Newsletter Section
Lecture 52 Layout + Styling + Responsive
Section 15: Using AlpineJS in our Project
Lecture 53 Creating our menu using AlpineJS
Section 16: Advance Configuration
Lecture 54 Customising Theme Part - 1
Lecture 55 Customising Theme Part - 2
Lecture 56 Disabling an entire core plugin
Anyone who wants to learn modern method of style web content with the most modern tool out there
Screenshots