OpenCourser
Learn skills that shape your future
Visit OpenCourser.com
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?
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.
In this video, we are going to download vs code and nodejs, In this course I will use vs code is my text editor
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.
In this video, we are going to download the source code from GitHub and I will run all projects in the browser.
In this video, I will give an overview of this section, and what we will learn in this section.
In this video, we will talk about that, what is Tailwind CSS.
In this video, we are going to link Tailwind CSS through CDN, which is the easiest way to use Tailwind CSS in local projects.
In this video, we will setup Tailwind CSS through CLI (Command Line Interface) tool.
In this video, we are going to setup Tailwind CSS through PostCSS and Vitejs bundler tool.
In this video, we are going to set up the Tailwind CSS through PostCSS and the Parcel bundler tool.
In this video, I will give you a short overview of this section that, and what we will learn in this section.
In this video, we are going to explore the @tailwind directive, what is @tailwind directive and for what purpose we use the @tailwind directive.
In this video, we are going to install a vs code extension for the Tailwindcss IntelliSense.
In this video, we are going to explore the font size classes.
In this video, we are going to explore the margin and padding classes.
In this video, we are going to explore the width classes.
In this video, we are going to explore the height classes.
In this video, we are going to explore the border classes and border-radius classes.
In this video, we are going to explore shadow classes.
In this video, we are going to explore that, how to create gradient backgrounds using the tailwindcss classes.
In this video, we are going to talk about that, how to use the pseudo before and after classes in tailwindcss.
In this video, we are going to talk about that how to use hover effect on HTML elements using the tailwindcss classes.
In this video, we are going to talk about that, what is flex box? and what is flex container and what are flex items?
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. .
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.
In this video, we are going to that, how to align items vertically and horizontally using the tailwindcss classes.
In this video, we are going to talk about that, what is the basic difference between block elements and inline elements.
In this video, I will give you an overview of this section, and what we will learn in this section.
In this video, we are going to talk about that, how we can use the responsive classes in tailwind css.
In this video, we are going to create a responsive grid system using Tailwind CSS responsive classes.
In this video, we are going to talk about that, how we can customize the tailwind.config.js file.
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.
In this video, we are going to talk about that, how we can prefix the tailwind CSS classes.
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.
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.
In this video, I will give an overview of this section that, we will create in this section.
In this video, we are going to create a new tailwindcss project and for that I will use postcss along with vite bundler.
In this video, we are going to write the HTML code for buttons.
In this video, we are going to style the buttons which we created in the previous video.
In this video, we are going to create rounded buttons, rounded means buttons will have samll shadow.
In this video, we are going to shadow buttons, which means below the buttons we will have the shadow.
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.
In this video, we are going to create the material buttons through Tailwind CSS.
In this video, we are going to create sweet buttons.
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.
In this video, we are going to create outline buttons through Tailwind CSS.
In this video, we are going to create smart buttons through Tailwind CSS.
In this video, we are going to create gradient buttons through Tailwind CSS.
In this video, we will create loading buttons through Tailwind CSS utility classes.
In this video, we will create block buttons using Tailwind CSS.
In this video, we are going to make the buttons container responsive.
In this video, I will give you an overview of this section that, what we will create in this section.
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.
In this video, we are going to write the HTML code for alert component.
In this video, we will style the alert component using Tailwind CSS.
In this video, we will create more alerts, like danger alerts, warning alerts, and primary alerts.
In this video, we are going to create rounded alert components.
In this video, we are going to beautify alerts, beautify alerts means that, alerts will have 5px border left.
In this video, we are going to create alerts with close option.
In this video, we are going to close the alert with javascript.
In this video, I will show you the demo of login form along with dark and white theme.
In this video, we are going to create a card the login form.
In this video, we are going to create the login form.
In this video, we are going to enable dark mode, if we have dark mode then the login form will have different look.
In this video, we are going to enable and disable dark and white themes manually through JavaScript.
In this video, I will show you the demo of the table which we will build in this section.
In this video, we are going to create and style the table head section
In this video, we are going to create the table body, inside of table body we will have the actual data.
In this video, we are going to add more data inside of table.
In this video, we will create more table rows for more data.
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.
In this video, I will give an overview of this section that what we will do in this section.
In this video, we are going to create a new tailwind CSS project through postcss and vite.
In this video, we will choose a google font family for our website.
In this video, we are going to add a favicon and meta description for the index file.
In this video, I will show you the demo of the hero section which we will create in this section.
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.
In this video, we will create a badge for the header section.
In this video, we will create and style the header main heading.
In this video, we will create the subheading of the header section.
In this video, we will create the customer list.
In this video, we will add the food's image on the right side of the header.
In this video, we will add the logo to the top left corner of the header.
In this video, I will show you the demo of navigation bar which we will create in this section.
In this video, we will write the HTML code for the navbar.
In this video, we are going to style the navbar which we have created in the previous video.
In this video, we are going to add close icon on the top left corner of the navbar.
In this video, we are going to add an open icon to open the navigation bar.
In this video, we are going to open and close the navigation bar using JavaScript.
Save
Provides foundation in essential Tailwind CSS 3 features.
Learn by building practical components and a full website.
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
