Master Tailwind CSS For Beginners
Tailwind CSS For Beginners
IT & Software,Other IT & Software,Tailwind CSS
Lectures -12
Duration -1 hours
30-days Money-Back Guarantee
Get your team access to 10000+ top Tutorials Point courses anytime, anywhere.
Course Description
Improve your skills and increase your value as a front-end web developer by learning the ins and outs of Tailwind CSS!
Tailwind CSS is a utility-first CSS framework packed with classes like flex, pt-4, text-center, and rotate-90 that can be composed to build any design, directly in your markup.
No more trying to think of appropriate class names, no more creating wrapper classes and inner classes, and no more wasting resources with unnecessarily large CSS files. Tailwind CSS makes building designs incredibly fast and easy, not to mention has built-in optimization out of the box. Not using a particular class in your HTML files? Then Tailwind CSS won't include it in the final build of your CSS!
In this course, we'll be creating a mobile-first landing page for a music festival website. We'll be covering layouts with flexbox and grid, Hero and Navbar components with menu and sub-menu items, targeting different states like hover and focus states, targeting different screen sizes, and extending beyond Tailwind's built-in theme and classes.
After getting comfortable with Tailwind CSS's utility classes, we'll be creating our own base, utility, and component classes, and even writing our own Tailwind CSS plugins! This course is packed with an incredible amount of value in such a short amount of time!
Increase your value as a front-end web developer today by learning a more advanced way of styling your websites using Tailwind CSS.
Who this course is for:
- Anyone who wants to get better at creating website and UI layouts
Goals
Learn how to set up a dev environment using the Tailwind CLI
Learn the Tailwind utility classes
Learn to create and edit layouts super fast
Configure your styles to create custom layouts
Prerequisites
You should know the basics of CSS
![Master Tailwind CSS For Beginners Master Tailwind CSS For Beginners](https://d3mxt5v3yxgcsr.cloudfront.net/courses/18055/course_18055_image.jpg)
Curriculum
Check out the detailed breakdown of what’s inside the course
Intro & Setup
1 Lectures
-
How to Set Up Tailwind CSS 11:43 11:43
Fonts & Colors
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Margin, Padding & Borders
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Custom Fonts
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Flexbox
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Cards
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Badges
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Grids
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Buttons
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Icons
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Hover Effects
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Group Hover Effects
1 Lectures
![Tutorialspoint](/market/public/assets/images/loader.gif)
Instructor Details
![Thilak S](https://www.tutorialspoint.com/assets/profiles/511710/profile/200_213710-1704872733.jpg)
Thilak S
Course Certificate
Use your certificate to make a career change or to advance in your current career.
![sample Tutorialspoint certificate](/market/public/assets/newDesign/img/primePacks/V-certificate.png)
Our students work
with the Best
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfc bank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
![adobe logo](/market/public/assets/newDesign/img/adobe.png)
![adp logo](/market/public/assets/newDesign/img/adp.png)
![apple logo](/market/public/assets/newDesign/img/apple.png)
![armani logo](/market/public/assets/newDesign/img/armani.jpg)
![bosch logo](/market/public/assets/newDesign/img/bosch.png)
![capegemini logo](/market/public/assets/newDesign/img/capegemini.png)
![cisco logo](/market/public/assets/newDesign/img/cisco.png)
![hdfcbank logo](/market/public/assets/newDesign/img/hdfcbank.png)
![ibm logo](/market/public/assets/newDesign/img/ibm.png)
![intel logo](/market/public/assets/newDesign/img/intel.png)
![mastercard logo](/market/public/assets/newDesign/img/mastercard.png)
![netflix logo](/market/public/assets/newDesign/img/netflix.png)
![qualcomm logo](/market/public/assets/newDesign/img/qualcomm.png)
![samsung logo](/market/public/assets/newDesign/img/samsung.png)
![sony logo](/market/public/assets/newDesign/img/sony.png)
![unilever logo](/market/public/assets/newDesign/img/unilever.png)
![walmart logo](/market/public/assets/newDesign/img/walmart.png)
Related Video Courses
View MoreAnnual Membership
Become a valued member of Tutorials Point and enjoy unlimited access to our vast library of top-rated Video Courses
Subscribe now![Annual Membership Annual Membership](/market/public/assets/newDesign/img/membership-large-small.jpg)
Online Certifications
Master prominent technologies at full length and become a valued certified professional.
Explore Now![Online Certifications Online Certifications](/market/public/assets/newDesign/img/traning-for-a-team.png)