Tailwind Css With Project

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