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

Tailwind provides us with highly compassable utility classes but leaves the design specification completely up to the user to maintain that custom look and feel to your app. 

In this lesson we'll introduce Tailwind to a basic HTML project and see how it compiles into CSS with PostCSS. Tailwind can be configured in the tailwind.config.js file where you will define plugins for PostCSS to compile.

After that, we'll spin the project up with live-server and introduce styling with Tailwind utility classes. 

Set up Tailwind and PostCSS

Learn how to style HTML elements with Tailwinds utility classes.

We'll adjust size and positioning with padding, margin, and height as well as style text elements color, weight, and spacing through more utility classes

The Tailwind Utility-First Workflow

Tailwind has a set of Responsive breakpoints that you can add to any utility class. We'll see in this lesson how to apply `sm`, `md`, `lg`, and `xl` breakpoints to style according to the screen that you are targetting.

Make Styles Responsive in Tailwind

Tailwind has variants that you can use when you want to apply styles conditionally to elements. We will start off with the `hover` and `focus` variants.

One thing to note is that not all variants are available to you out of the box (e.g. the `active` variant) to save on file size when you get started with Tailwind. Additional variants can be configured to add functionality.

We'll finish the lesson by combining and adding custom Tailwind Variants.

Conditionally Style Elements with Tailwind Variants on Hover and Focus 

The @apply directive lets you compose utility classes so you can re-use common styles and not litter your html with a ton of repetitive styles.

Even when using @apply directives, it's still easy to start repeating yourself in your code. We'll use the multi-class component pattern to extract the common styles into a base class and then styling (e.g. color) can be additionally applied as another class.

Compose Tailwind Utilities with @apply

The styles aren't the only thing that can be duplicated - often times HTML structure is repeated in our applications. You don't want to just pull out the styles in a @apply directive.

This is where JavaScript comes in handy. We have the data available to us so we'll loop through that data and build repeated card components with Tailwind

Extract Reusable Tailwind Components

Sometimes you'll need to customize things for the exact look and feel you need within your application. This can range from any number of things like: breakpoints, color palette, and custom fonts.

The tailwind config file, you can customize all the values that tailwind uses for it's utility classes so that Tailwind works for you and your needs.

Customize the Tailwind Design System

Out of the box, tailwind generates a lot of css. For example, every background color, text color, and border color needs an object generated for it with each gradient available. In addition, more classes need to be generated for each breakpoint defined within tailwind as well as any variant that is available. Thousands and thousands of utility classes are generated.

Learn how Purgecss can remove all unused classes in your project.

Introduction to Tailwind and the Utility First Workflow

Instructor

Course content (8 lessons)

Instructor