Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2023

Tailwind CSS - effortlessly build a tailwind css music festival site & build custom tailwind plugins, components & more!

4.65 (150 reviews)
Web Development
Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2023
3.5 hours
May 2023
last update
regular price

What you will learn

Increase your value as a front end web developer

Build a landing page with Tailwind CSS

Create custom Tailwind CSS plugins

Extend the default Tailwind CSS theme

Create custom animations with Tailwind CSS


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, no more wasting resources with unecessarily large CSS files. Tailwind CSS makes building designs incredibly fast and easy, not to mention has built-in optimisation 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 incredibly 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.



Important! Read this before you begin this course
Udemy ratings & reviews
Project setup & tailwind css overview

Building the navbar

Create the navbar and logo (with spacing, flexbox, and gradients)
Apply Google Fonts to tailwind project
Create the first menu item, add classes on hover, & add transitions
Finish the menu items, editing techniques, & tailwind css components
Create the sub menu items & use tailwind css group functionality
Create the mobile menu icon
Animate mobile menu icon & create custom variant plugin with "addVariant"
Extend tailwind css custom open variant & implement mobile menu functionality
Implement mobile sub menu with custom group open tailwind variant

Building the Hero section

Create the Hero section and background image
Add the hero content
Create the waveform logo animation
Create custom animation delay tailwind css plugin with "matchUtilities"

Building the headliners section & carousel

Default base styles for headings
Create a scrollable & snappable carousel in tailwind css

Light and dark mode

Implement light and dark mode based on user's local machine settings
Implement tailwind css light & dark mode with toggle button

Building the tickets & lineup timeline sections

Create the tickets table & custom tailwind plugin with "addUtilities"
Start the lineup timeline (with advanced background gradients in tailwind)
Finish the lineup timeline
Advanced tailwind css plugins & creating dynamic button component plugin


March 8, 2023
Tom is an excellent teacher, I love his way to explain easily every complex matter, and this course is a fast way of learning all the Tailwind Css secrets. Absolutely recommended.
March 6, 2023
The course was very fast paced. To fast for me actually. While we built a very nice looking website, the course was manly just smashing out one css class after another.
March 3, 2023
I just wanted a not too elaborate into into tailwindcss, but covering as much features as possible. My hopes were fulfilled as he was short and consise and very very fast. But most of the time I had no trouble typing along and then there still was the pause button of course. Highly recommended.
February 20, 2023
Overall Summary: GREAT COURSE with a fun project that has a REAL-WORLD level of COMPLEXITY- Thank you, Tom, for not going so basic. You will leave this course with a good idea of how to work with customizing Tailwind. A nice course length to watch in a weekend. The instructor is highly responsive in the Q & A and respects student feedback. CAVEAT: If you like courses with lots of practice exercises, then take this course after completing some other one -- this is a project-based "learn by coding along" course. Good explanations, but Tom speaks quickly so be prepared to alter the playback speed if necessary. This course covers not only the typically used styles, but takes it to the next level by covering how to do your own customizations. The course has nuggets of info not only for newcomers to Tailwind, but also for those who have been using it for some time. He shows how to work with custom colors as well as creating plugins. I'd suggest that this course is best understood after viewing maybe some short course on TW basics as Tom speaks quickly. However, if you are unfamiliar with TW, don't be intimidated - just alter the speed at which you watch the course. Smash that "BUY NOW" button - you won't be disappointed. Tom is very responsive in the QA, and takes his viewers' suggestions for improvement seriously. He is already going to add another section on setting up files from scratch, uploading to Github, and deploying based on user feedback in the QA. This is the mark of a professional wanting to make his course even better!
February 3, 2023
This has been the best course on Tailwind CSS I've seen. The instructor is very knowledgeable, responsive, and he covers topics I have not seen referenced in other Tailwind CSS courses such as creating custom components and implementing dark mode. If you want a thorough understanding of Tailwind CSS, this course is highly recommended.
January 28, 2023
This course is very well organized and everything works. The speed is perfect for me and Tom presents the material in a easy to follow way.
January 12, 2023
Honestly, Over dozens of the Udemy courses I've purchased, nearly ALL of them are 4 stars and higher, this one is probably the most thorough and concise of them all. He explained everything I could think of, including stuff I hadn't, removed all the filler you usually get in Udemy tutorials. The project gone over in this tutorial is deceivingly good and without question curated to showcase advanced tailwind concepts as quickly as possible. I'm blown away by this course, and this course will remain a PRIZED addition to my collection. I can't recommend enough!
December 27, 2022
It is a very good course for learning tailwind-css. I do not recommend using the example course for a real website. The HTML was not structure very well, plus not a big fan of using JavaScript on an HTML page.
December 18, 2022
The in-depth dive into pros and cons of different techniques to accomplish the same task is very helpful, as is the live troubleshooting. I appreciate the building/agile approach rather than writing out an entire section and going over what is happening.
December 17, 2022
If you don't have any prior knowledge or experience about TailwindCSS then this video will give you a good insight and basic knowledge. But, one of the video was not good in audio and i think for future videos, kindly improve more on audio and lessen the echo. But overall, it is good! Highly recommend.
December 12, 2022
Fast paced and wastes no time in presenting the core details, there's always replay if you miss a bit. I'm actually styling a live site applying the principles being taught as I go. It's working great and the course is already paying for itself.
December 11, 2022
Great job of easing into building something new. While it is accelerated in delivery, there are moments where the "why" is explained with the "how".
December 2, 2022
I was pretty conflicted about this course when it came to rating it. I think one thing that the trainer did very well was to keep the course concise and not just provide trivial code to instruct with, but something which could be real-world. As a result I picked up a tonne of knowledge outside of Tailwind. The trainer was clearly a subject matter expert, and it's the first course I've watched a long time when I wasn't running it at 2.0x speed. However, in doing so, I think you can't reasonably expect this course to be for beginners with just a basic concept of HTML and CSS. As someone who is primarily a backend engineer who took this course to up skill his frontend dev skills, I ended up Googling a lot of concepts (admittedly outside of Tailwind) to understand what was going on. The lesson on the openVariant plugin was particularly perplexing as I found the tutor skipped over the merge method pretty quickly. I'm glad I spend the time to up-skill these other concepts before proceeding, and found the course very worthwhile. However, it may frustrate those who don't have a good understanding of flexbox, positioning, grids, and animations. The other small critique I have is that I found myself needing to rewind the video particularly at the end of a lesson as I hadn't quite caught what the trainer had typed, or because his Visual Studio Code was blocking some text preventing me from seeing what he had typed without rewinding. It's possibly a little 'too fast' at those junctures. If you're someone who considers yourself a frontend developer, this is an automatic 5 star course for you. I wish more trainers would use this approach.
November 15, 2022
Very nice course, good explanations, short and concise. I like that you went with direct approach, no big project with wasting time on bunch of other development stuff. Big plus for clean audio, and good articulation. Another big plus is update of this course with suggestions from the Q&A section. Some critique would be in manner that you could give more detailed explanation about Tailwind and tailwind configuration meanings, (but I really liked the plugins topic, kudos to that!) and I didn't like embedded js script and no semantics in html. It's just a little more effort, but much cleaner and professional approach.
November 3, 2022
Amazing course. As a beginner tailwind user, I wanted to learn more about changing default styles, and utilizing css properties that weren't available in tailwind. This course delivered all of that and more in only 3 hours!



Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2023 - Price chart


Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2023 - Ratings chart

Enrollment distribution

Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2023 - Distribution chart

Related Topics


Notre nouveau site qui scanne en temps reel les prix sur Amazon Warehouse (FR)

> 40% reduction sur le prix initial

Notre nouveau site qui scanne en temps reel les prix sur Amazon Warehouse (FR)

> 40% reduction sur le prix initial
udemy ID
course created date
course indexed date
course submited by