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

[00:00] I'm going to scroll down to the unordered list section where we're going to do our work. We've been flip-flopping between grid and Flexbox up to this point, but in that case, I think that we need to use Flexbox, and let me tell you why. This element here, the last one, is sitting in between the two columns here.

[00:17] So if we had a grid, that would be really, really hard to achieve. We would have to have extra grid and make elements use multiple grids. So this one can use grid 3 to 5 or whatever chaos would happen. So when you need elements to spread, also worth noting, there is 3 and then 4 and then 5 and then 6.

[00:37] It looks like we want the element to spread to the right, based on whatever available space there is. And that's what I meant before, when you want things to use the space available, this is a really good use case for Flexbox, and it's much more adaptable and powerful than grid in that regard.

[00:53] So we're going to use Flex and then make the Flex container wrap to achieve that effect. So I will add some classes to my UL and I'm going to set it as a Flex. And let me show you what happens if you just set Flex. Flexbox is going to try to put every element on one single row, based on the available space,

[01:12] and then scrunch, squeeze, or actual shrink is the right word, each element. Here, we don't want our elements to shrink. Instead, we're going to tell the Flex container to wrap with flex-wrap. And now the elements will keep the same size, and when there's no more available space for one, it'll wrap to the next row.

[01:30] But look at this, as there is more space, elements fill up the horizontal container first before wrapping. This is very powerful and this does not happen at all in CSS grid land. So here, Flex is clearly a better choice, whereas before for the layout containers, I think grid made a little bit more sense.

[01:49] On the design, we have clearly the last elements aligning in the center. So we want to center align our wrapping rows, and we can do that with justify-content. So I'll add here justify-center to center it. So you can see now it's centered and the last elements come to the middle.

[02:07] I've turned on the Flex visual dev tools. I don't know if it's useful or not, but that shows us that there is no gap between elements. They're all snug together. So the next thing we can do is, according to the mobile design, have a gap of eight, which is level two.

[02:23] Here, I will add a class of gap two to create this two pixel gap between each tile. Beautiful. As of now, the elements will spread out for the whole width, no matter how wide our container is. We do not want that.

[02:38] Instead, we want to clamp the growth of this to, let's see here, this container. This is the logo list. You can see a width of 768 pixels. So let's see if we can find a max width container that matches that 768 pixels.

[02:57] Like we did for the content section, we'll go max width. And so empty was 448 and it looks like bingo, bingo. 3XL is perfectly what we're looking for. So if I add this, now we will stop the growing nonsense after a certain width.

[03:17] And this is looking fabulous. Nice. So that takes care of our actual UL container. And now we can go and style the individual elements. I don't want to style the LI items themselves. Really, the LI element here is here mostly for semantic and correct HTML reason.

[03:37] We are in an unordered list and the first child item in ULs needs to be an LI. But we really want the entire surface of the anchor tag clickable. So we're going to apply the styles on the A tag directly. That includes the padding, the background color. And this is going to make it easier to make the whole thing a link.

[03:55] So if I look at the mobile design, each tile looks like it has a padding of 16 before the image inside of it. It has rounded corners as well. You can see here the value is 16. So border radius of 16, padding of 16.

[04:12] And so that the image doesn't go crazy big, we are going to have a fixed width. It looks pretty intentional here of 80 pixels by 80 pixels. You can see that if I go to the bigger sizes, this changes to 96 pixels later. The gap changes and a few other things change.

[04:30] But it's quite clear that the tiles have a set width and height. Sorry. So we're going to go back here and set it to 80 by 80. So we need to do the size, the background color, the gap, and the rounded corners.

[04:46] And for the background color, you can see we're using this 7% opacity highlight color. I think that's all we need. Let's go and do that. So I will add some class names to our anchor tag. Let's start with the size. So we want 80 by 80. So I can go size 20, just like we did for the logo.

[05:06] And now that we're doing this, we should probably remove this placeholder class that we had on the images. Remember, we set the width to 16 so it didn't grow crazy big. But we can remove that for now. And it looks like we're doing something wrong. Oh yes, I know what's going on.

[05:21] Because the anchor tag by default is an inline element, it's not going to respect the width and height. If I set it to block, this would fix the problem. Like so. We're going to end up changing this to a grid container later. But let's go with that for now. So now we have our size. Let's maybe add the padding.

[05:39] So remember the padding is 16 pixels, so level 4. So p-4 will do the trick. And I think next we can add the background color to add a bit of splash. So bg highlight. But if I go with just highlight, it will be the full opacity highlight color. What we want is the 7% opacity.

[05:57] So Tailwind has nice inline opacity modifiers for colors. So I can go where the bg highlight is and go slash. And you can see I have 5%, 10% suggestions. 10% would look pretty close. But we're trying to go for 7% here. And we want to go pixel perfect.

[06:12] So because 7% doesn't exist in the default values, I will pass an arbitrary value here of 7%. And this will generate a background color which is 7% alpha transparent. The last thing we're missing is the border radius. And we can do this with rounded. And we wanted 16 pixels, remember?

[06:32] So it looks like 2xl is the one we're looking for. And it's looking really good. The last thing that is not correct is the images are not always vertically centered. I mentioned I was going to change block to grid. And that's exactly why. If I change this to display grid, I can then easily center the image vertically and horizontally

[06:52] with a good friend place items center like so. And I think that we are all good to go with that. So let me remove the overlay of the dev tools. So we have our actual clean design. And if I grow the width, you can see the elements readjust.

[07:12] But they will eventually stop growing at a specific width which is very, very, very cool. And you know what? I know of a pretty brutally honest way to verify how close we are to the design. We're going to do the dreaded screenshot overlay test.

[07:28] For that, I'm going to make sure that my UI is zoomed at 100% level which is like that. And I will do the same with option 0 in Figma to set it to 100% zoom level. I also need to remember because I zoomed in the actual UI of Figma to make it easier to read.

[07:44] So I want to make sure that the interface scale is reset to default. And now we are at the actual 100% scale. So let me hover on one of the elements like this. So we have clear proof that this is the Figma UI. And I will take a screenshot of all of this.

[08:04] And so to be precise, we need to know the width of this container here. And it looks like it's 320 pixels precisely. So with my screenshot in the clipboard, what I'm going to do is make that bigger. Open the dev tools in the same window on the right.

[08:22] And now look at this, I have a browser extension here called perfect pixel which matches the workshop name pretty nicely. Hang on, this is a bit confusing. So I'm going to make that bigger again. This is a previous image that I've used. So what I'm going to do is now upload the image that I just took. I have it right there.

[08:41] So I'm going to drag it here. And so that image here, let me set the opacity to 100% is the image we just took in Figma together a second ago. So what I'm going to do is try to overlay it over the UI at 320 pixels precisely.

[08:58] Let me move that to the bottom left here. While I set up, I can minify that. I'm going to set up my width back to 320 pixels. All right, now we should be good to go. So I'm going to take that image here and see how precisely it stacks over. Moment of truth, ready.

[09:21] Whoa, what do you think? That's looking pretty close to me. I will play with the opacity of it. And the only thing that changes slightly is if you look at the SVG elements here, they're exported slightly differently. But we've done a pretty bang on design job.

[09:47] Uh, the stuff is looking exactly the same. Let me put the opacity bigger again. Um, this falls in what I called pixel perfect territory. You can see if I place it right on, it is literally pixel perfect. Woohoo.

[10:07] All right, I am going to give us two thumbs up on the screenshot overlay test. This is looking really good.

Building a Responsive Logo

[00:00] Now that our content section is looking awesome, let's pivot to the logo tiles and once again here you're going to do your best to recreate this design as closely as possible. So you're going to need to pay attention to elements width, the gap between elements, etc. Make sure that you

[00:15] notice that just like we did for the content section with a max width container, it does appear like the logo list also has some sort of max width container. It doesn't flow all the way to the left and right as the container grows. So pay attention to this, try your best and

[00:33] I will see you for the solution. 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

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

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

Controlling Animation Delays and Fill Modes

Add an Enter Animation

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

Building a Responsive Logo

Transcript