Tailwind CSS : Beginner to Advanced 2023 (with Project)

What is Tailwind CSS?

Tailwind CSS is a utility-first CSS framework for creating modern designs quickly. In this definition "Utility-First" means It provides a set of predefined classes which usually apply a single style.

Adam Wathan is introduce tailwind in 2017. And In this course I will teach Latest version 3.0 on Tailwind CSS

Setting up the development environment:

1. Node

2. Visual Studio Code (any text editor)

Extensions you need in VS Code:

1. Live Server (For Run live your HTML file on localhost)

2. Tailwind CSS IntelliSense (For Auto-Complete Feature)

In this lecture, I will show you how you can start work quickly by using the CDN link without installing Tailwind CSS.

You just need to paste this link into your HTML file and you can start working with Tailwind CSS. But this method is only for development purpose so don't use it in production.

In this lecture, we will see how to install Tailwind CSS with PostCSS. and this is the best way to use Tailwind CSS.

If you have some doubt you can refer to this Installation Guide file and in this file, I explain all things about this process. Download this file in the resources of this video.

We need to add a watch script for continuously running build command when you change/update your code. After that, you don't need to manually build your tailwind.css file

In this lesson, we update our build and watch scripts for POSTCSS.

In this section, we are going to learn some of the basic and advanced concepts of tailwind like :

• How to use the documentation

• Most common classes

• Hover, Focus & active effects

• Concept of responsive design

• Dark mode

• Customize default style

• Directives and Functions and much more

In this lesson, I will show you how you can use Tailwind CSS documentation so you can find any styles from the official site and you don't need to rely on any courses or tutorials.

In this lesson, I will show you some classes which are used often when we create websites.

You can find the exercise file in the resources. Open this word file and you get all the exercises here with the checklist of tasks. I will show you how to do this exercise

In this lesson, we are going to talk about responsive design. Responsive design is one of the most important and easy topics in tailwind CSS.

It works the same as hover and focus effects. You just need to understand the basic concept of it.

So In this lesson, I will show you some of the best features in tailwind CSS. You can see Hover, Focus, and active effects in tailwind CSS.

Dark mode in websites is pretty common. So almost every tech company wants their website in light version and dark version.

You will learn how to use dark mode in tailwind and create the best websites for both light and dark versions.

In this lesson, we are talking about tailwind CSS configuration for customized styles or we can say that to add our own style in tailwind CSS.

We can also apply custom styles with the help of square brackets [ ].

It works the same for margin, padding, grids, positions, colors, and many more. You will get all properties on this page https://tailwindcss.com/docs/adding-customstyles(click here).

We can also add custom size using the tailwind.config.js file. Add your styles in theme object

Directives are custom Tailwind-specific at-rules you can use in your CSS that offer special functionality for Tailwind CSS projects.

There are three directives and two function available in tailwind CSS.

In this lesson, I will show you "What we are going to build". I will demonstrate the project overview.

In this lesson, we will set up our project and add resources. After that, we will change the title and description.

If you didn't download the resource zip file in Section 1, you can download it from below. In that zip, you will get an images folder.

In this lesson, we will create a full navbar with styles.

I divide the navbar into three sections that will make our styling process faster.

In this lesson, we are going to create a car image section which is a car image.

In this lesson, we will create a car Heading and add a tagline and we will also add a design for them.

In this lesson, we are going to add buttons to the image section.

1. Custom Order

2. Existing Inventory

In this lesson, we will create all sections of the Tesla landing page.

Note: Please follow navbar links order. If you don't follow that order, you can't get that smooth scroll effect for the bouncing arrow.

In this lesson, we will make our website responsive. You can try this step by yourself and after that, you can watch the solution of it :)

In this lesson, we will optimize our CSS file for production. It means our Tailwind.css file size is going to reduce by 40% - 50% (in just one step).