Teach on Udemy

Turn what you know into an opportunity and reach millions around the world.

Learn More

Your cart is empty.

Keep shopping

Tailwind CSS 3, The Complete Guide, Build Projects

Name: Tailwind CSS 3, The Complete Guide, Build Projects
Rating: 4.2 (23 reviews)

Learn Utility-first Tailwind CSS framework from scratch, Learn Tailwind directives, modules, and code reusability.

Created byShakil Khan

Last updated 8/2022

English

What you'll learn

Your will learn The Tailwind CSS basics
You will learn the Tailwind directive like @tailwind, @apply and @layer
You will learn, how to use multiple CSS files in Tailwind CSS
You will will learn responsive design
You will learn code reusability

Course content

19 sections • 139 lectures • 11h 19m total length

Download VS Code and Node JS1:59
In this video, we are going to download vs code and nodejs, In this course I will use vs code is my text editor
Install VS Code Extensions3:01
In this video, we are going to install some vs code extensions, the first extension I will install the live server extension, the second I will install one monokai theme, and the third I will install the material icon theme.
Download Source Code6:41
In this video, we are going to download the source code from GitHub and I will run all projects in the browser.

Section Intro0:35
In this video, I will give an overview of this section, and what we will learn in this section.
What is Tailwind CSS ?6:13
In this video, we will talk about that, what is Tailwind CSS.
Link Tailwind CSS Through CDN4:04
In this video, we are going to link Tailwind CSS through CDN, which is the easiest way to use Tailwind CSS in local projects.
Setup Tailwind CSS Through CLI15:21
In this video, we will setup Tailwind CSS through CLI (Command Line Interface) tool.
Setup Tailwind CSS Through PostCSS & Vite8:49
In this video, we are going to setup Tailwind CSS through PostCSS and Vitejs bundler tool.
Setup Tailwind CSS Through PostCSS & Parcel8:40
In this video, we are going to set up the Tailwind CSS through PostCSS and the Parcel bundler tool.

Section Intro0:28
In this video, I will give you a short overview of this section that, and what we will learn in this section.
@tailwind Directive3:47
In this video, we are going to explore the @tailwind directive, what is @tailwind directive and for what purpose we use the @tailwind directive.
Install VS Code Tailwindcss Intellisense Extension1:11
In this video, we are going to install a vs code extension for the Tailwindcss IntelliSense.
Background Colors & Text Colors7:04
In this video, we are going to explore the font size classes.
Font Sizes3:46
In this video, we are going to explore the font size classes.
Padding and Margin Classes3:41
In this video, we are going to explore the margin and padding classes.
Width Classes5:52
In this video, we are going to explore the width classes.
Height Classes2:10
In this video, we are going to explore the height classes.
Borders and Border Radius Classes5:30
In this video, we are going to explore the border classes and border-radius classes.
Shadow Classes1:38
In this video, we are going to explore shadow classes.
Gradient Background3:02
In this video, we are going to explore that, how to create gradient backgrounds using the tailwindcss classes.
Before and After Pseudo Classes3:10
In this video, we are going to talk about that, how to use the pseudo before and after classes in tailwindcss.
Hover Effect3:01
In this video, we are going to talk about that how to use hover effect on HTML elements using the tailwindcss classes.
Flex Container2:41
In this video, we are going to talk about that, what is flex box? and what is flex container and what are flex items?
Flex Items4:59
In this video, we are going to talk about that, how to assign width to each flex item and how to distribute the free available space between all items. .
Flex Wrap2:03
In this video, we are going talk about that, how to wrap flex items if we don't have any free available space in a row.
Align Items Vertically and Horizontally3:44
In this video, we are going to that, how to align items vertically and horizontally using the tailwindcss classes.
Block Elements and Inline Elements4:38
In this video, we are going to talk about that, what is the basic difference between block elements and inline elements.

Section Intro0:38
In this video, I will give you an overview of this section, and what we will learn in this section.
Responsive Classes7:07
In this video, we are going to talk about that, how we can use the responsive classes in tailwind css.
Create Responsive Grid System7:37
In this video, we are going to create a responsive grid system using Tailwind CSS responsive classes.
Customize tailwind.config.js file5:42
In this video, we are going to talk about that, how we can customize the tailwind.config.js file.
Set Default Font Family5:00
In this video, we are going to set the default font family, Tailwind CSS has some default font families but in this video we are going to replace those with a default font family.
Tailwind CSS Prefix1:59
In this video, we are going to talk about that, how we can prefix the tailwind CSS classes.
@apply Directive3:36
In this video, we are going to talk about @apply directive, @apply is a tailwind CSS directive it's apply the tailwind css classes into custom classes.
@layer Directive5:16
In this video, we are going to talk about @layer directive, layer directive inject your classes into your specified layer like base, components and utilities.

Buttons Demo1:09
In this video, I will give an overview of this section that, we will create in this section.
Create New Project7:50
In this video, we are going to create a new tailwindcss project and for that I will use postcss along with vite bundler.
Buttons HTML Code5:34
In this video, we are going to write the HTML code for buttons.
Style Buttons4:46
In this video, we are going to style the buttons which we created in the previous video.
Rounded Buttons2:09
In this video, we are going to create rounded buttons, rounded means buttons will have samll shadow.
Shadow Buttons7:12
In this video, we are going to shadow buttons, which means below the buttons we will have the shadow.
Button Ring9:21
In this video, we are going to add ring around the buttons, ring basically means border so ring class add border around the button or any HTML element.
Material Buttons8:53
In this video, we are going to create the material buttons through Tailwind CSS.
Sweet Buttons13:01
In this video, we are going to create sweet buttons.
Solve Sweet Buttons Issue3:09
In this video, we are going to solve one small issue, and the issue is if hover on the sweet button around the button we have a little bit of white space and I want to hide that white space.
Outline Buttons7:18
In this video, we are going to create outline buttons through Tailwind CSS.
Smart Buttons5:37
In this video, we are going to create smart buttons through Tailwind CSS.
Gradient Buttons7:53
In this video, we are going to create gradient buttons through Tailwind CSS.
Loading Buttons5:41
In this video, we will create loading buttons through Tailwind CSS utility classes.
Block Buttons3:13
In this video, we will create block buttons using Tailwind CSS.
Make Buttons Container Responsive8:30
In this video, we are going to make the buttons container responsive.

Alerts Demo0:53
In this video, I will give you an overview of this section that, what we will create in this section.
Multiple CSS Files6:36
In this video, we are going to use the postcss-import plugin with the help of postcss-import plugin we can use multiple css files same as sass partials.
Alert HTML Code5:02
In this video, we are going to write the HTML code for alert component.
Style Alert Style3:22
In this video, we will style the alert component using Tailwind CSS.
Create More Alerts6:45
In this video, we will create more alerts, like danger alerts, warning alerts, and primary alerts.
Rounded Alerts3:38
In this video, we are going to create rounded alert components.
Beautify Alerts7:41
In this video, we are going to beautify alerts, beautify alerts means that, alerts will have 5px border left.
Alerts with Close Option9:09
In this video, we are going to create alerts with close option.
Alerts with Close Option JavaScript7:57
In this video, we are going to close the alert with javascript.

Login Form Demo0:41
In this video, I will show you the demo of login form along with dark and white theme.
Create Card10:14
In this video, we are going to create a card the login form.
Create Login Form7:59
In this video, we are going to create the login form.
Dark Mode4:30
In this video, we are going to enable dark mode, if we have dark mode then the login form will have different look.
Dark Mode Manually17:06
In this video, we are going to enable and disable dark and white themes manually through JavaScript.

Table Demo0:24
In this video, I will show you the demo of the table which we will build in this section.
Table Head6:30
In this video, we are going to create and style the table head section
Table Body8:42
In this video, we are going to create the table body, inside of table body we will have the actual data.
More Table Data5:14
In this video, we are going to add more data inside of table.
Create More Table Rows5:18
In this video, we will create more table rows for more data.
Target Even Rows2:34
In this video, we will target the even rows, and we will change the background color of even rows and also we will make the table responsive.

Section Intro0:34
In this video, I will give an overview of this section that what we will do in this section.
Create New Tailwind CSS Project9:04
In this video, we are going to create a new tailwind CSS project through postcss and vite.
Chose Font Family2:47
In this video, we will choose a google font family for our website.
Favicon and Meta Description3:47
In this video, we are going to add a favicon and meta description for the index file.

Header Demo0:31
In this video, I will show you the demo of the hero section which we will create in this section.
Create Container4:26
In this video, we will create the container, container we will have a specific width inside the container we will have our all website contents.
Create Badge5:04
In this video, we will create a badge for the header section.
Header Heading5:08
In this video, we will create and style the header main heading.
Header Sub Heading2:00
In this video, we will create the subheading of the header section.
Customers List8:41
In this video, we will create the customer list.
Header Foods Image6:03
In this video, we will add the food's image on the right side of the header.
Add Logo4:36
In this video, we will add the logo to the top left corner of the header.

Requirements

Basic HTML and CSS knowledge is required

Description

What is Tailwind CSS?

Tailwind CSS is a mobile-first utility classes-based CSS framework, which means through Tailwind CSS utility classes we create our own CSS components unlike Bootstrap because Bootstrap gives you free build components and Tailwind CSS gives you the flexibility to create your own components, these days many large companies are using the Tailwind CSS framework for their user interfaces.

What you will learn in this course?

The Tailwind CSS basics
Code reusability through the @apply directive
Responsive design
Create your own beautiful looking buttons
Login form with the dark and light theme.
Responsive Tables
Finally, we will create a responsive restaurant website from scratch through Tailwind CSS.

Why this course is different from other courses!

In this course, you will not only learn the basics of Tailwind CSS, but you will also learn how to create different UI components through Tailwind CSS, and finally, we will create a real-world responsive restaurant website from scratch.

Why learn Tailwind CSS?

As a web developer Tailwind, CSS is everywhere these days because many large companies are using it, so if you go for a job, the company will ask you about the tailwind CSS.

You don't need any Tailwind CSS knowledge!

To start this course you don't need any tailwind CSS knowledge, you just need the basics of HTML and CSS nothing else.

Who this course is for:

Anyone who wants to enhance their UI skills

Tailwind CSS 3, The Complete Guide, Build Projects

What you'll learn

Explore related topics

Course content

Tools3 lectures • 12min

Tailwind CSS Setup6 lectures • 44min

Tailwind CSS Basics18 lectures • 1hr 2min

Responsive Design & Tailwind CSS Customization8 lectures • 37min

Create Tailwind CSS Button Components16 lectures • 1hr 41min

Alert Components9 lectures • 51min

Login Form with Dark Mode5 lectures • 41min

Table6 lectures • 29min

Caferio Foods Website (Setting)4 lectures • 16min

Caferio Foods Website (Header)8 lectures • 36min

Requirements

Description

Who this course is for: