illustration for Design with Tailwind CSS Masterclass

Design with Tailwind CSS Masterclass

Instructor

Adam Wathan
3h 4m closed-captioning
Updated a month ago
Bookmark
Download
RSS

Building your web app with a fully customized design is a daunting task. If you aren't a CSS expert, applying a design style to your markup can consume hours and hours as you try to tweak pixels, align elements, and bang your head on the desk in frustration.

There are options. You can turn to a full-blown CSS framework like Bootstrap to help build your app. But, out of the box, you end up building an app that people will look at and say, "Hey there, nice Bootstrap app."

So if you want a fully custom design, you are back at step 1.

There's a middle way. An approach that gives you the freedom to apply your custom design, but in a way that greatly simplifies the CSS, providing you with core functionality without applying heavily opinionated design to your app.

This is Tailwind, a utility-first CSS framework for rapidly building custom user interfaces.

Design with Tailwind CSS is a series that teaches you how to build fully responsive, professionally designed UIs from scratch using Tailwind CSS.

Together we’ll build Workcation, a property rental app loaded with interesting details that will help you master Tailwind in no time.

Still Awesome

Staff reviewed: a month ago

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.

What you'll learn

  • Get Tailwind CSS up and running in your project
  • Build complex application layouts with flexbox
  • Build accessible user interfaces following industry best practices
  • Remove unused CSS from production builds to maximum performance
  • Use responsive utility variants to build adaptive user interfaces
  • Use utilities to style elements on hover, focus, and other states
  • Extend Tailwind with custom utility classes
  • Work with Tailwind CSS plugins
  • Customize Tailwind CSS to meet the needs of your design
  • Augment Tailwind CSS with JavaScript to make your designs interactive

Quick Facts

  • Utility classes create an API on top of what is already a declarative API (CSS itself)
  • Every utility class is reusable so you rarely need to write new CSS
  • Tailwind CSS makes easier to maintain a large CSS codebase
  • Tailwind CSS uses a mobile first breakpoint system
  • Tailwind CSS is component-driven
  • Tailwind CSS is single source of truth for your CSS architecture

Questions to Reflect Upon:

  • How do you build visually consistent UIs?
  • What are the best practices for implementing design systems?
  • What makes a project maintainable?
  • How much design CSS do I need to know?

Modules

3h 4m • 22 lessons • 4 Modules

    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!