pro

Design with Tailwind CSS Masterclass • Part 2

Design and Implement Common Tailwind Components

Instructor

Adam Wathan

tailwind
^1.0.4

47m

·

7 lessons

4.7

374

people completed

Published 5 years ago

|

Updated 4 years ago

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.

What you'll learn:

Style a Card Components
Style badges
Style SVG Icons
Style Images

You might also like these resources:

illustration for CSS Fundamentals

CSS Fundamentals

Tyler Clark・33m・Course

All developers can learn something new when it comes to using and understanding how the browser interprets CSS. 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 and columns. We will look at ways to divide the page into major regions.

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.

illustration for Design and Implement Common Tailwind Components

Course Content

47m • 7 lessons

1
Structure a Basic Card in Tailwind
5m 36s
2
Design Text in a Tailwind Card to Emphasize Important Content
11m 56s
3
Style SVG Icons with Tailwind Utility Classes
8m 24s
4
Use Tailwind to Design a span that Looks like a Badge
7m 11s
5
Crop and Position Images with Tailwind object-fit Utilities
3m 42s
6
Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind
5m 11s
7
Create Depth in a Tailwind Component with Shadows and Layers
5m 44s

You might also like these resources:

illustration for CSS Fundamentals

CSS Fundamentals

Tyler Clark・33m・Course

All developers can learn something new when it comes to using and understanding how the browser interprets CSS. 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 and columns. We will look at ways to divide the page into major regions.

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.