Learn how to create a keyframe animation in Tailwind and apply it to any element in your markup.

Controlling Animation Delays and Fill Modes

[00:00] We're going to start by defining a keyframes animation in our Tailwind config. Remember, in Tailwind version 4, this configuration is going to move to the CSS file, and at the end of this workshop, we're going to port our work we're doing now in the JS config into the CSS config. Here's the Tailwind config file in TypeScript, and here you can see that we asked to create

[00:18] the slides top, slides up, or slides top. Well, let's call it slides top as it's how it's referred here. We're going to create a new keyframes definition. The way you do this is open the keyframes key in the config file, and then each keyframe animation will

[00:36] have a key named after the keyframe. Here we want slide top. You can call it slide up if you want. At the zero percent keyframe, or we can also call it from, we want the element to be transparent, so opacity zero. Fun fact, you can see that TypeScript is going to tell us that it needs to be a string.

[00:54] This is something that is commonly mistaken in a lot of Tailwind config files, but here because we use a TS file and we try to satisfy the config type, it's going to yell at us to be very specific. Opacity is zero, and then two is going to be opacity one. Again, let's make it a string.

[01:14] You could have zero percent and 100 percent as well here. We're going to push it down with translate y by 20 pixel, and here Copilot knows exactly what we're doing. We want to transform it to translate y is zero. To sum up, we start transparent and 20 pixel lower,

[01:32] and then go up and fade in nicely. This is just the keyframes definition, and then we also need to define an animation that essentially consumes, let me scroll down, that keyframe. You can call it completely differently, but we'll also call it slide top, but this could call be woof.

[01:50] What matter is that it consume the actual, as you can see here, slide top keyframe, and this keyframe needs to match the ones defined here. But let's call it slide top as well. So animation slide top will create an animate-slidetop utility

[02:07] that is going to use the slide keyframe and go from two over 0.3 seconds with the ease out easing curve. So we have done this. I will leave that comment here because we need to take care of that later, but let's try to implement what we've got,

[02:25] the slide top animation using the slide top keyframe. My expectation is we have a new animate-slidetop utility available, and so we can go in app.tsx. As it's suggested, we can add that slide top animation that we've created. So here, animate, and you can see the default tailwind animation

[02:43] and our new slide top utility that uses the slide top keyframes. Very cool. And as I refresh, look at the logo here. Starts down, fades in beautifully. So we're going to add the same animate-slidetop utility to the H1 and the paragraph.

[03:04] Here and here. And now when we refresh, all three animate, which is super cool. But remember, we want to stagger these animations so it feels a little bit more polished and organized. So we're going to leave the logo starting right at the start, a 0.3 second animation delay to the heading

[03:24] and 0.8 animation delay on the paragraph. Of course, we can play around with other values, but I think that feels pretty nice. So let's remove the comment here. And you might think, because tailwind has a delay utility, you might think that delay 300 is going to do what we want, but notice that is a transition delay

[03:44] and not an animation delay. In other words, it applies to transition like this hover rotation. So you could delay the rotation of this hover effect here. And matter of fact, let me go down to the anchor tag here where we have our hover rotate and go delay 300. And that when I hover,

[04:03] you can see that there is a slight delay before the animation occurs and on leave as well. Let me undo this. This is not what we want here, and this is not going to work. So I have my delay 300 here. And if I refresh, you can see that it still comes right away. We don't want a transition delay.

[04:22] We want an animation delay. As of version three of tailwind, there is no such utility, but we can use an arbitrary property where the key and value are defined arbitrary and do animation delay, 300 milliseconds. And if we look at the output of this, now we have our animation delay, just like we want.

[04:42] And of course you could also go 0.3 S. This will have the same result. Any CSS valid unit is going to work because these brackets are literally an escape hatch into any CSS syntax that you want. It's just a way to write CSS on the fly, create this funky looking class,

[05:01] but generating exactly a CSS that you want. And I often joke that tailwind CSS supports every single CSS property under the sun, even the ones that don't exist yet. I even made a fun video about this, but this is why. These arbitrary properties are like on-demand custom CSS. You don't always have to use this.

[05:18] There is nothing wrong with writing CSS in a CSS file or creating a plugin, but I think this is really useful. And here, that's a perfect use case for what we want. All right, so this is going to add a delay in our animation, but you will see that we have a problem. Let me refresh. Oh, so you can see the Epic stack headline

[05:36] is delayed by 300 milliseconds, but it's already showing before it starts animating. And then after 300 milliseconds, it starts its animation. And turns out we need to configure something else to our animation, and it's called the animation fill mode.

[05:53] So just like we did an arbitrary property here for the delay, we can do animation fill mode backwards. And now when I refresh, beautiful, you can see that the Epic stack headline is stuck at the from key frame,

[06:11] which is 0% opacity and translated down. And then when the delay happens, it eases into its final form. So we're going to do the exact same. I'll copy these two properties from the H1 tag, and we're going to paste them on the paragraph as well,

[06:28] but change the delay from 0.3 to 0.8 milliseconds. And the result should be fabulous. Zoop, zoop, zoop. And we could leave it like this, and this works, but this is going to create some frustration as we start doing responsive adjustments to our animation.

[06:45] So let me quickly show you why we need to make a change, and we'll make a change before we move forward. Let's take the H1, and to illustrate the friction we're going to face, I'm going to redefine the same animation, animate slide top, at the small breakpoint. So here we are on mobile below the small breakpoint,

[07:04] and you can see the animation and delay work fine. But if I grow past the small breakpoint, it looks like we have lost our animation delay and the animation triggers immediately. And if I inspect what is happening with our animation here, we're going to look at the small animation slide top class that we've just added.

[07:26] And if you look just below, animation fill mode backwards has been overridden, and so has the animation delay. Uh-oh, why is that? Well, let's toggle the animation shorthand. When you just use animation, it's a shorthand property to define a lot of different CSS animation properties.

[07:44] Duration, timing function, delay, iteration. And would you look at this? Every property that is not defined explicitly inside the animation shorthand will be reset to its initial value. So the animation delay is reset to zero seconds,

[08:00] and the animation fill mode is reset to none. That's a problem, and this is exactly why we are losing the delay on our animation. So why is that a frustration? Well, plain and simple, every single time that you redefine an animation at a breakpoint,

[08:19] you are going to wipe out this definition. There's a way to work around it, and it is to duplicate these and prefix them at the small breakpoint. So when we redefine the animation, we redefine these to override the default initial values at that small breakpoint.

[08:38] And now if I refresh, this is going to work again, because you can see that we're redefining the animation fill mode backwards. But interestingly, if I toggle this here, you can see that now these are being overridden by the small animation. If I turn that off, this one is going to win once again

[08:58] and set it to, where is it, fill mode, back to none. And if I turn it back on, the none gets overwritten. So you get the idea. Every time you make a responsive adjustment, you have to repeat yourself and redefine specific components of the animation properties. So is there a better way to handle this? And yes, there is.

[09:18] Well, partially. Okay, so why do I say partially? Well, there are things that never change. Every time we want to have an animation delay, we're going to have this animation fill mode backwards here and here, and essentially anywhere we want to have a delay, we're going to have to add this animation fill mode backwards property

[09:37] to make sure that the thing is hidden until it shows up. And because this is always going to be exactly the same definition, we can bake that in to our animation here. And that's the comment that I left before. You can see that you want to define the animation fill mode CSS property

[09:53] to the appropriate value that we've established is backwards. And we can do that directly inside the animation shorthand. So we have duration, keyframes, timing function, and fill mode. In other words, we can add here backwards, which means that anytime we use our animate slide top

[10:13] at the default or responsive breakpoints, it is going to bake in that animation fill mode backwards. And in turns, it means that I can get rid of that one. And let's get rid of the small overrides that I had done for my example. And we can get rid of the animation fill mode here as well.

[10:30] And now the animation works. We still have the redefinition just for debugging purposes on the small breakpoint. But if I go way past the small breakpoint, you can see that, oh, this is still a problem. So the problem is actually not related to the animation fill mode

[10:48] because now we are still baking that in. You can see animation fill mode is set to backwards here. The problem is our animation delay is still being reset to zero seconds. And what is sad here is we cannot bake the animation delay inside the animation definition

[11:08] because we want this to be changing every time we use this. We want to be able to stagger our delays. And so we can't hard code the value. It would be pretty nice if we could pass a function with a value inside the animation property. So do something like animate slide top 300 MS or something like this. But what we're going to do here

[11:28] is we're manually applying our animation delay. This is kind of a trade-off, but at least we've got rid of the animation fill mode backwards repetition. But now if we wanted to redefine the animation at the small breakpoint, we would unfortunately have to also redefine the animation delay like so.

[11:47] And this is now going to work responsively. All right, I want you to make sure this is super clear before we move on. I am going to remove this small animate slide top and the small animation delay override. And with that, we have our beautiful slide top animation

[12:08] and we are ready to move on to the next step.

Add an Enter Animation

[00:00] Remember, none of what we're doing here is present on the design in the Figma file. This is purely the light on top that we're going to wow the designers with. In this first exercise, we're going to focus on the content section here, and we're going to create a slide up, enter animation effect where the elements fade in while sliding up

[00:19] a little bit. And we're going to add a staggered delay, so the logo will slide up first, and then the epic stack title, and then the paragraph with maybe about half a second delay or something like this. So your job is to define a slide up keyframe animation in the Tailwind config, and then

[00:35] define an animation that consumes that slide up keyframe. So it's going to create an animate slide up utility that you can use on any element in the markup. So try to get that working first, and if you do, then you're going to add an animation delay on the heading tag and on the paragraph below. This might all sound complicated, but I'm sure you've got this.

[00:55] Make sure you read up on the refresher in the workshop documentation to remind yourself or learn how to define keyframe animations and animations in CSS, but also in the Tailwind config, and then I'm sure you're going to work it out. Good luck.

This workshop is designed to help you achieve 'pixel-perfect' design implementations, bridging the fidelity gap between design and development. Throughout this workshop, you’ll be guided along essential steps—from analyzing Figma designs to implementing responsive layouts and learn advanced CSS techniques.

## Project Setup

Before implementing Tailwind in your website, it's essential to set up and analyze the provided Figma design file. This ensures alignment with design elements and sets a solid foundation for your project. By analyzing and preparing the Figma design file upfront, you streamline development and ensure your Tailwind website reflects the intended design accurately.

- Semantic HTML structure
- Color and typography integration

## Mobile First

Prepare to bring your landing page design to life by focusing first on its mobile implementation, guided by insights from the Figma design file. Understanding the mobile layout is crucial before scaling up to larger screens. You'll dissect the mobile design into key segments: the content section featuring the logo, heading, and paragraphs; the arrangement of logo tiles; and the overall structural layout. By analyzing how these elements evolve across breakpoints, you'll gain a clear strategy for organizing your page effectively.

## Responsive Design

Ensure your website maintains consistent quality across all screen sizes by implementing precise design adjustments specified at different breakpoints.

- Current layout strength
- Design-Specific adjustments
- Attention to detail
- Tools for precision

## Art Directed Grid

CSS Grid provides a powerful feature that allows you to place elements in specific grid cells according to your design. By learning the placement of elements in a CSS Grid, you'll be able to create intricate and visually appealing designs with ease.

- Grid cell placement
- Precision positioning
- Create complex layouts

## Interaction

Add interaction styles to the application to clearly indicate interactive elements such as links and logo tiles. The goal is to closely recreate the designs specified in the Figma file to enhance the user experience and clearly indicate which elements are interactive within the application.

- Implementing hover states for links
- Defining focus states using Tailwind's outline and ring utilities
- Ensuring the implemented styles match the designer's vision

## Animation

Explore how to add engaging animations by to our user interface using exclusively CSS keyframe animations.

- Implementing a visually appealing role reveal effect on logo tiles
- Creating a staggered animation delay for a stunning waterfall entry effect
- Respecting users' preferences by providing a simple fade-in alternative for those who prefer reduced motion
- Ensuring accessibility by considering users with motion sensitivity

## Subgrid Alignment

CSS subgrid is a powerful feature that aligns a nested grid with its parent grid's cells. This section demonstrates its effectiveness in a specific design scenario, illustrating how it enables precise alignment and layout control.

## Migrate to Tailwind v4

Discover the enhanced flexibility of Tailwind CSS version 4, which introduces a streamlined method for configuring your theme directly in CSS using CSS variables. This update simplifies the customization process compared to the previous reliance on JavaScript config files.


Learn to implement 'pixel-perfect' designs from Figma with responsive layouts, advanced CSS techniques, and Tailwind v4 migration in this workshop.

Pixel Perfect Tailwind

Simon Vrachliotis

Pixel Perfect Figma to Tailwind

Welcome to the Pixel Perfect Tailwind Workshop. We'll implement a real-world redesign of the EpicStack website homepage from scratch using Figma design specs and tailwind. We'll cover tailwind theme configuration, design implementation, hover and focus states as well as some fun animations and CSS Grid techniques.

Pixel Perfect Tailwind Workshop Introduction

Introduction

exploring the design file and extracting the information we need to get started.

Preparing for a Custom Design

In this lesson, we'll use Figma to design the semantic structure of the Epic Stack homepage and then write the corresponding React markup in a Vite-powered site.

In this lesson, we'll add the HTML that will serve as the basis for our page. We'll import the logos from data and add the corresponding markup to the page. We'll also see how to use the size utility to ensure the logo has a good size on the page without having to specify both the width and the height.

Functional and Semantic Markup

Unstyled Markup

Learn how to configure Tailwind's theme to create bespoke, project-specific utilities that reflect your design system.

Tailwind config to change the breakpoints, colors and the font family and size as specified by our designer in Figma. 

Customizing Tailwind CSS Configuration for a Responsive Design

Tailwind Theme Customization and Configuration

Learn how to build a website from scratch using the utility-first CSS framework Tailwind. This lesson covers setting up the basic HTML structure of the website.

The Foundation is Built

Project Setup

In this exercise, you will learn how to use Figma to design the mobile version of the page and then replicate the design in HTML/CSS with Tailwind. We will look at the structural layout of the design and how to break it down into HTML components. We will also look at the typography and how to replicate it with Tailwind.

Designing for Mobile First

 We will create a basic page layout using the `div` wrappers and see how they can be used to define the structure of the page.

 We'll start with the `min-h-screen` class to create a full page container, then we'll add some padding using the `px` and `py` utility classes. 

Dynamic Layout Containers

Structural Layout

Start to design the HTML structure of the header section of the page. You will use CSS grid to contain the content and set the size and spacing of the elements.

We'll learn how to build a layout in Tailwind by creating a centered container with max width, and add some space between elements. 

Creating Layouts with Flexbox and Grid

Implementing the Content Section

In this lesson, you will recreate the logo list design using CSS grid. Pay attention to the max width container and the gaps between elements.

use Tailwind to build a responsive design for a component that will scale with the width of the container. 

Styling Lists with Flexbox & Grid

Building a Responsive Logo

You've done an amazing job so far! Take a break and get ready for the next challenge.

Mobile Layout Completed

Mobile First

Designers make changes to spacing, color, and more as the design scales up and down. We'll learn how to identify these changes and implement them in our code.

Identify Design Changes Across Breakpoints in Figma

learn how to use the `Typography` component to ensure that the font sizes of your headings and paragraphs are responsive. 

Learn how to use Tailwind's utility classes to make responsive typography adjustments for headings and paragraphs.

Responsive Typography

Implementing Responsive Typography 

In this lesson, you will learn how to use the spacing scale to manage the spacing around and between elements.

Importance of breaking out design into components when working on a responsive design.

Responsive Spacing

Spacing Around and Between Elements

At the Excel breakpoint we want to place the contents section on the right and the tiles on the left. We will use the grid to define the column widths.

Learn how to create a two column layout with auto-sizes and one fraction units, use the `order` feature to invert the order of the grid cells.

Responsive Grid Layouts

Creating Responsive Two-Column Layouts

refactor our flexbox layout to use the CSS Grid layout, create a grid with 5 columns and 6 rows and change the tile flow 

We will cover the simple process of switching from flexbox to css grid, changing the grid structure, and changing the auto flow direction.

Responsive Grids with Auto Flow Columns

Building a Structured Grid Layout

It's time for a break! We've covered a lot of material so far and it's time to recharge before we dive into some exciting stuff.

Responsive Design Completed

Responsive Design 

CSS Grid allows us to place items in specific grid cells. This lesson walks through the syntax to get items placed.

Place Items in a Grid

Learn how to use CSS grid lines as a coordinate system to place grid elements exactly where you want them to be inside the grid with Tailwind.

In this lesson, we will add a `column` and `row` property to each logo object, and use these properties to position each logo in the top left of the grid.

Adding Grid Coordinates to Logo Objects

Assign Coordinates to Elements

In this exercise, you will use the lookup directory pattern to dynamically compose grid classes based on an object’s values.

Leverage the power of TypeScript and dynamic styles to create a simple yet flexible grid system with Tailwind.

Dynamic Grid Placement 

Lookup Objects for Grid Placement

This section walks through how to use the utility-based approach of Tailwind to build out a simple landing page

Pixel Perfect Grid Completed

Art Directed Grid 

Learn how to use the hover, focus, and active states to improve the interactivity of links in your application by applying the design specified in the Figma file.

Adding Interaction Styles

Learn how to apply the hover and focus states for links by adding the hover "hover" and focus "focus" class to the link.

In this lesson, we’ll use Tailwind to remove the underline on

Accessibility with Focus and Hover Styles

Styling Text Interactions

In this lesson, you will learn how to style the logo tiles on hover and focus using the CSS `

In this lesson, you will learn how to use the utilities in Tailwind to completely customize the

Customizing Hover and Focus Styles 

Logo Interaction Styling

create a simple page layout using the Grid layout. We'll use the `display grid` and `display inline-grid` properties to define grid containers and grid items. 

Interactions Completed

Interaction

create a series of cool animations without forgetting about users who have set `prefers-reduced-motion` media query in their OS settings.

Creating Engaging UI Animations

In this exercise, you will learn how to set a responsive animation keyframe that will be applied at a specific breakpoint.

We'll create a new keyframe animation for the slide left and update our config to support it. We'll then apply the animation based on the Excel breakpoint.

Responsive Animations

Change Animations Based on Breakpoints

Learn how to create a cool logo reveal animation using keyframes and easing curves, leverage the open props library for advanced spring easing curves.

Learn how to create a reveal animation in Tailwind using Open Props. 

Roll Reveal and Fade-In Keyframe Animations

Implementing Roll Reveal Effect

Learn how to use the CSS `animation-delay` property to create a staggered reveal effect.

learn how to create an animated stagger effect using CSS and a render prop.

Delayed Animations Based on Loop Index

Adding Stagger Reveal to Animations

In this lesson, we'll add a small delay to the first keyframe so that the animation doesn't steal the focus from the rest of the page loading animation.

In this lesson, we'll add an animation delay to the logo and heading elements to create a balanced look in the Epic Stack animation.

Implementing a Wave Animation Delay

Animation Delay Adjustment

In this lesson we'll use the subgrid to align two grid components on the same level.

Animations Completed

Animation

Subgrid is a CSS feature that allows grid tracks to function as a subgrid to their parent grid. This can be used to create amazing layouts that lock and align grid cells.

Aligning Grids to Parent Cells

Subgrid is a feature that allows child grids to inherit the grid structure of their parent grid. 

In this lesson, we'll see how to span grid cells across the parent grid, and also how to align the gap values between the parent grid and the child grid.

Managing Nested Grids for Organized Layouts

Fixing Vertical Gap in a Subgrid

In this lesson, you will learn how to align grids within grids by matching the gap on the child grid with the gap on the parent grid.

By applying the `gap` property to the parent grid and controlling the row gaps, you can ensure that the grid children are properly spaced.

Adjusting Grid Gaps for Seamless Alignment

Child and Parent Grid Alignment

In this lesson, we use CSS grid to create a subgrid and align our content elements. This allows us to easily position them within our layout.

In this lesson, we will restructure our content section to use CSS grid and position it with grid columns and rows.

Managing Rows and Columns in Responsive Grid Layout

Aligning Elements with Parent Grid Using Subgrid

Learn how to use the grid system in Tailwind to organize content on the page, refactor the design to place the logo and heading tag on the same row.

Learn how to use the CSS Subgrid feature in Tailwind by building a two column grid within a subgrid. 

 Responsive Grid Columns

Content Placement with the Grid Layout

In this lesson, you will learn how to vertically and horizontally center content within a grid cell.

We'll see how to use `grid-template-rows` and `grid-template-columns` to place content in a subgrid

Optimizing Grid Layouts

Aligning Content Within Cells

Learn how to bring your CSS modules from Tailwind v1, v2, or the css in js output of bit styles to Tailwind v4.

Subgrids Completed

Subgrid Alignment

configure Tailwind version 4 using CSS custom properties. we'll take all of the config we've created in JavaScript and move it to CSS using CSS variables.

Migrate Tailwind v3 to v4

Tailwind v4 can be installed in several ways. In this lesson, you will install the Tailwind Vite plugin.

In this lesson, learn how to use Tailwind v4 with Vite. We will take a look at the Vite plugin for Tailwind and how it can simplify the configuration.

Upgrading to Tailwind v4 with Vite Plugin

Integrating Tailwind v4 with Vite

Learn how to customize the Tailwind theme by applying direct changes to the CSS config file.

Learn how to use the design token file to configure Tailwind's colors, font sizes, and custom breakpoints without leaving the CSS syntax you're used to.

Customizing Your Design with Tailwind Configuration

Customize the Tailwind Theme

LESS has a powerful feature that allows you to define object key and value pairs inline. This allows you to define multiple styles at the same time.

Learn how to use CSS variables with the designer tool Copilot to ensure consistency in your design system.

Custom Font Sizes and Line Heights

Fixing Font Sizes

Learn how to apply CSS animations and keyframe animations to React components to create smooth slide animations and reveal animations.

Tailwind version 4 introduces a lot of changes that make it easier to customize and maintain your project. 

Porting Keyframes and Animations 

Revamping Animations

Learn how to convert a Tailwind config from JavaScript to the new CSS config in v4. 

Tailwind v4 Migration Complete

Preparing for Tailwind v4

The next time you're tasked with converting a design to Tailwind, you can go through the same process of doing multiple passes from mobile to desktop, each time focusing on something different to make sure nothing goes through the cracks and end up with a really high-quality result.

Pixel Perfect Figma to Tailwind

Pixel Perfect Figma to Tailwind

Transcript

Add an Enter Animation

Transcript