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

tailwind

Learn Tailwind

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. 

Introduction to Tailwind and the Utility First Workflow

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.


Design and Implement Common Tailwind Components

The Navbar is a common component you will find yourself styling in almost any application. 

In this course, we'll style a Navbar for a mobile view with a logo and toggleable hamburger button that will contain nav links.

After building up the mobile view, we will refactor the navbar to be responsive by removing the hamburger menu from the navbar and replacing that with the links directly inline within the Navbar

Build a Responsive Navbar with Tailwind

A menu dropdown is a common component that you will build and style in any application.

In this course, we'll start from scratch, build and style a static dropdown menu and then add functionality to the component so you can open and close the dropdown. There are some keyboard accessibility topics we'll cover when adding interactivity to the dropdown. We'll use Vue in this example but these concepts will apply to any framework. 

After the drop down is fully functional and styled properly, we'll see how sometimes you need to rethink the design of a component when considering the mobile view. For this case, the dropdown is removed entirely and the links shown inline underneath the navbar content.

Build and Style a Dropdown in Tailwind

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.

Tailwind provides us with highly composable utility classes but leaves the design specification entirely up to the user to maintain that custom look and feel to your app.

In this course, you'll learn how to handle responsive breakpoints, how to trigger specific element states, how to handle specificity, how to keep your bundle file size in check, and how to seamlessly extend Tailwind with your own custom utility classes.

By the end of the course, you should have a firm understanding of how Tailwind works and be able to create your own tailor-made design system and utility class CSS toolkit for your next project!

Build User Interfaces by Composing CSS Utility Classes with Tailwind

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.


Design with Tailwind CSS Masterclass

Migrate from Create-React-App to Gatsby - Start Project

React is one of the web’s most popular frameworks for building JavaScript applications. 

If you know what you’re doing, React can drastically simplify how you build, use, and maintain code.

Whether you’re a React newbie or you’re ready for advanced techniques, you can level-up with egghead. Explore our in-depth courses, lessons, and community resources to build more powerful applications and crack open your career.

react

Theming using TailwindCSS and CSS Variables

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 

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

Vue (pronounced /vjuː/, like view) is a progressive framework for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is very easy to pick up and integrate with other libraries or existing projects. On the other hand, Vue is also perfectly capable of powering sophisticated Single-Page Applications when used in combination with modern tooling and supporting libraries.

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

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

Before styling, we'll check out what data we're dealing with by dumping it into the browser to see how it fits with some initial HTML structure.

Once the structure is in place we'll start applying style to the card at the root level. The way I like to think of the root level is the styles that affect the edges of the card and only apply those styles to it. For example, we'll add a background color and border-radius to the card we are styling. If we want to add padding or style to the content of the card, we will group that content and apply the necessary styling directly which won't affect the root level styles.

Structure a Basic Card in Tailwind

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

In this lesson, we'll be replacing the text-based rating in our card to use SVG icons to signal how the property is rated.

To do this, we'll start with a custom, raw SVG icon that was exported from sketch (best to export as a square SVG for easier styling). One thing to note is that this file is much bigger than you need it to be when it's exported. To clean it up, you can run it through a service like [SVGOMG](https://jakearchibald.github.io/svgomg) that will reduce the file size drastically. After this, we'll remove the SVG color and sizing and use Tailwind utility classes to style these icons how we'd like them, with `h-` / `w-` utilities for size and `fill-current` for color. 

Lastly, the positioning of the icons will be adjusted with Tailwind's flexbox utility classes.

Style SVG Icons with Tailwind Utility Classes 

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 intrinsic aspect ratio has been controlling the look of the image in our card. If we wanted to adjust the styling of the image it could scale and distort in ways that wouldn't look good.

We need to tell the browser how to render the object regardless of the size. In Tailwind, we use the `object-fit` utilities which will let us crop and size an image in a way that works for our use-case. 

Note: IE11 doesn't support this feature so we'll see how we can get around this with setting the image as a `backgroundImage` style. This accessible so should be avoided whenever possible.

Crop and Position Images with Tailwind object-fit Utilities

Right now the card looks great at this screensize but when that is adjusted (and gets larger) you'll notice that the image resolution will stretch to fit the screen. We will want to respect the original aspect ratio of the image so as the image gets wider, it gets proportionally taller.

To respect the original aspect ratio of the image, we'll need to position the image `absolute`ly in a containing div that has its bottom padding set to a percentage. This will fix that div's aspect ratio which in turn will keep the images aspect ratio fixed as well.

Lock an Image to a Fixed Aspect Ratio with Percentage-based Padding in Tailwind

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.

Remove unused CSS with Purgecss

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

The dropdown looks great but right now it's completely static - it's stuck in an open position. For it to be complete, we'll want to be able to toggle it open and closed.

To do that, we'll add some Vue specific that will track an `isOpen` variable in the component state that we'll use to open and close the dropdown. After that we'll hook up a click handler to the button to do just that, close and open the dropdown. 

Once that is done, we'll handle the case where a user clicks outside of the dropdown to close it as well as add a keyboard accessible variant to close the dropdown

Topics

Instructors

Content Type

Tailwind