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

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

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

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It is a highly customizable, low-level CSS framework that gives you all of the building blocks you need to build bespoke designs. 

Craft Scalable, Custom-Made Interfaces with Tailwind CSS

Architect an Extensible Digital Garden with Next.js, Tailwind, and Nx

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

In this lesson, we learn how to generate CSS utility classes from Tailwind's JavaScript config file. We set up a new project from scratch, install tailwind, generate a config file and build a simple gulp task that runs that file through PostCSS to generate the desired CSS output.

file through PostCSS via gulp.

Compile Tailwind to CSS with gulp

When creating UIs with utility classes, a lot of repetition can occur within the HTML markup. In this lesson, we see how this concern can be addressed by extracting a group of tailwind utility classes into a component classname. We create a Blocks Elements and Modifier (BEM) button component with a few style modifiers, that can be used everywhere in our project.

Abstract Utility Classes to BEM Components in Tailwind

In this lesson, we learn how to generate custom utility classes in tailwind. We add new properties to our JavaScript config object to generate new helper classes to suit our needs.

Create Custom Utility Classes in Tailwind

In this lesson, we take a look at tailwind's mobile-first CSS architecture and learn how to apply styles to specific media queries only. We also discover a couple of ways we can define custom media queries in the config file.

Apply mobile-first Responsive Classes in Tailwind

In this lesson, we use utility class composition to put together a responsive card component. With this approach, we don't write any additional CSS. We never stop to come up with class names. Our workflow is very productive and free of constant context switching. 

Create a Responsive Card Component by Composing Tailwind's Utility Classes

In this lesson, we learn how to target specific states of elements and apply styles only when those states are triggered.

Style Elements on hover and focus with Tailwind’s State Variants

Sometimes, you want to update styles for multiple children elements when hovering over a parent. The `group-hover` class in Tailwind lets you do just that in a very elegant way!

Change Styles on Multiple Elements with Tailwinds group-hover

In this lesson, we learn how to control what utility classes are generated for each utility class module. We look at how we can “opt-in” for responsive variations, as well as different states like hover and focus.

Control What Variations are Generated for Each Utility Class Module in Tailwind

In this lesson, we learn different ways to handle specificity in Tailwind, depending on the context of your project. We look at how your should order your CSS declarations in your stylesheet, discover the “important” config option for a “utility-last” approach.

Keep Specificity in Check when Working with Tailwind

In this lesson, we discover how to generate custom utility classes that follow Tailwind’s mobile-first, responsive naming convention pattern, using the 'variants' PostCSS directive.

Extending Tailwind with Responsive Custom Utility Classes

In this lesson, we look at the “prefix” and “separator” options, that let you customise the naming convention for your utility classes, which can be useful to avoid naming collisions or incompatibilities with specific templating languages.

Tailwind