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

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

4.59 (283 reviews)
Web Development
Tailwind CSS - Zero to Hero tailwind css - tailwind v3 2024
3.5 hours
Mar 2024
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


June 30, 2023
Clear pronunciation and in depth explanations. I have been using Tailwind CSS for a couple of years. Even though I get fairly good results, this course really brings my knowledge to a new level
June 29, 2023
Der Kurs bietet eine gute Übersicht über Tailwinds. Auch werden die einzelnen Konzepte gut erklärt. Ein paar Punkte haben mir jedoxh nicht so gefallen. Man wird relativ schnell ins kalte Wasser gestoßen. Eine Einführung und vor allem eine genauere Erklärung des Projekt Setups haben mir hier gefehlt. Auch ist das Sprechtempo sehr schnell.
June 12, 2023
While it has a lot of information, it would probably be impossible to follow at the speed it's narrated with. 0.75x speed the whole course. This reason alone might not seem like enough to remove two stars, but actually it became quite annoying the more and more I continued.
June 12, 2023
Course complete and clear, it explored many different topic in depth. The only side note is the really fast audio pace, it's quite hard to write along: it requires you to stop and get back multiple times. Except for this, it's been a very well structured course, great teacher.
May 18, 2023
The pacing is perfect! This is the first time that I have not had to slow down or speed up the video. Also, the design is beautiful. I love what we are building. I'd love more of these to walk us through building out different designs. Thanks Teach!
May 17, 2023
Quick and easy to follow course. All of the base knowledge required to get started with using Tailwind outside of this course. I particularly liked the re-usable component functionality with the lighOrDarkColor comparison. Great course. Thanks a lot
May 9, 2023
materinya sangat bagus dan saya akan merekomendasikan ini. penjelasannya rinci dan mudah dipahami oleh pemula seperti saya. saya jadi bersemangat untuk menggunakan tailwind di projek saya kedepannya. terimakasih
April 30, 2023
I had to update the bad review posted originally. My issue with the course was that I was struggling to make it work because at the beggining the course didn't explain that you had to run the script in the tailwindcss every single time you start to work in the project for the changes to be updated in the CSS. I quit this course and started another one on YouTube just to discover this little detail that ruined my experience with the course. On a positive note, and once solved this issue, the course is pretty good and coming from literally 0 experience with tailwind now I feel much more confident to be able to create and work with the "framework". It touches a lot of advanced topics like creating static and dynamic plugins, but maybe a little too fast and assuming you already know JS pretty well. The course is not perfect, but it didn't deserve the poor rating I previously gave, since I came back to it and managed to finish it. Thanks to professor Tom!
April 19, 2023
This was an amazong TailWindCSS project for me personally. Now I have much better understanding of how to implement TailwindCSS for my future projects!
April 13, 2023
All good so far and details and particularities are explained clearly. The speech is a bit too fast but with the pause button it can be sorted.
April 10, 2023
I like the course. The author explains every topic he touches. This course doesn't explain every Tailwind detail but can be a good starting point to move further with Tailwind CSS.
April 10, 2023
Speaks a bit fast (but I can slow it down). I'm not fully tracking the :merge function yet (but I will).
April 9, 2023
Excellent course it was really helpful as a first-timer using Tailwind. But my drawback will be the audio it was too fast, I had to slow down to 0.5 to catch up. Also, the build files should be provided in the introductory video and step-by-step how to set it up in vs code. After uploading on Github my repository still points to yours.
April 3, 2023
The speaker is quite fast so there is a lot of pausing and rewinding. Also while the course is teaching TailwindCSS, more semantic HTML I think could be used, especially for newer developers. Otherwise the content is great!
March 13, 2023
I really enjoy Tom's courses, punchy delivery, videos/lectures not overly long and I'm learning plenty on the way. Thoroughly recommended!



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


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

Enrollment distribution

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

Related Topics

udemy ID
course created date
course indexed date
course submited by