illustration for Design and Implement Common Tailwind Components

Design and Implement Common Tailwind Components


Adam Wathan
47m closed-captioning
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
Star icon$$$
people completed

Now that we covered fundamentals, we're going to design and implement common components that you will see in the wild.

We'll start with a basic Vue.js application and some hard-coded data that will be displayed within the application.

Still Awesome

This course is direct from the library author and is still awesome even though it’s built on the previous version and there are minor API changes.

This course is part of the Design with Tailwind CSS Masterclass.

What you'll learn

  • Style a Card Components
  • Style badges
  • Style SVG Icons
  • Style Images

Learner Reviews

  • Arkadiusz Wasilonek
    6 months ago
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    Star icon$$$
    What did you like about this course?

    Simply amazing – I've played around with tailwind on my own. But even having lots of css under my belt, it's not that straightforward to "convert" to this way of thinking (in utility classes).

    You show how to do some base stuff in simple steps, but this also has a tremendous design / UX value; explaining the rationale behind each change, why emphasize this or that.

    The actual recording quality, speech – superb ;) I would probably watch an 1-2 hour session where you design a complex page with tailwind just for fun ;D

Course Content

47m • 7 lessons

    You might also like these resources:

    illustration for CSS Fundamentals

    CSS Fundamentals

    Tyler Clark・33m・Course

    Even the most experienced developer can learn something new when it comes to using and understanding how the browser interprets CSS. In this course, we will slowly style a website according to a mocked image

    illustration for Build Complex Layouts with CSS Grid Layout

    Build Complex Layouts with CSS Grid Layout

    Rory Smith・42m・Course

    CSS Grid layout is a two-dimensional layout method that gives you control over items in rows as well as columns. In this course we will look at multiple ways to divide the page into major regions with control of the size, position, and layer.

    illustration for Flexbox Fundamentals

    Flexbox Fundamentals

    Garth Braithwaite・18m・Course

    Flexbox is a wonderful tool built into the CSS specification. Using flexbox doesn't require any special framework or library, just a browser with CSS3 support. It is so awesome, and makes the arranging elements on a page almost fun!