DEV Community: Méschac Irung

TailwindCSS Tip : How to prevent Layout Shifts With Aspect Ratio

Méschac Irung — Tue, 28 Jan 2025 17:27:47 +0000

Imagine you’re reading a blog post. You’re immersed in the text when, suddenly, an image or video loads above the section you’re reading, and the content shifts downwards. You lose your place, get frustrated, and might even leave the page. Sounds familiar? It’s happened to almost everyone.

This happens because the browser didn’t know how much space the media element would take up until it was fully loaded.

<div class="max-w-md">
    <div>
        <img class="rounded-md" src="https://images.unsplash.com/photo-1668541491433-e96f4059e345?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gorilla in Congo"/>
        <span class="text-xs text-gray-500">Photo by <a href="https://unsplash.com/@cecile_colombo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">cecile colombo</a> on <a target="_blank" href="https://unsplash.com/photos/a-gorilla-standing-on-a-log-in-the-woods-GNnqwEouj-U?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></span>
    </div>
    <p class="mt-6">
        Here’s the paragraph you were reading before the image pushed it down unexpectedly.
    </p>
</div>

The image loads dynamically, pushing the paragraph down and disrupting your reading flow.

The Solution: Use aspect-ratio

By applying the aspect-ratio utilities, you tell the browser exactly how much space the image or video will occupy, avoiding any layout shifts.

The aspect-* utilities in TailwindCSS are essential for eliminating layout shifts—those sudden changes in the layout caused by dynamically loaded content like images, videos, or iframes. By setting a consistent aspect ratio, you ensure the browser reserves the correct amount of space for the element before the content is loaded, preventing the rest of the page from jumping unexpectedly.

<div class="max-w-md w-full">
    <div>
        <div class="aspect-3/4">
            <img class="rounded-md size-full object-cover" src="https://images.unsplash.com/photo-1668541491433-e96f4059e345?q=80&w=2835&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D" alt="Gorilla in Congo" loading="lazy"/>
        </div>
        <span class="text-xs text-gray-500">Photo by <a href="https://unsplash.com/@cecile_colombo?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash" target="_blank">cecile colombo</a> on <a target="_blank" href="https://unsplash.com/photos/a-gorilla-standing-on-a-log-in-the-woods-GNnqwEouj-U?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash">Unsplash</a></span>
    </div>
    <p class="mt-6">
        Here’s the paragraph you’re reading, undisturbed by layout shifts.
    </p>
</div>

aspect-3/4: Reserves space for the media, maintaining a 3:4 ratio.
Result: The layout remains stable, and the reading experience is smooth.

Indispensable for User Experience

Consistent Proportions: Whether it’s a video, image, or card, aspect-ratio ensures every element scales uniformly.
Better Performance: Reduces layout shifts, improving Core Web Vitals (like CLS—Cumulative Layout Shift) and SEO rankings.
Enhanced User Experience: Keeps content stable, preventing frustrating disruptions.

Flexible Ratios with aspect-[ratio]

TailwindCSS only includes 3 aspect-ratio utilities by default: aspect-auto, aspect-square, and aspect-video.

For other proportions such as 3:4, use arbitrary values like aspect-3/4. This allows you to create custom aspect ratios for any element, ensuring a consistent layout across your site.

Build Stable, Professional Layouts

The aspect-* utilities aren’t just a convenience—they’re a necessity for polished, stable, and responsive designs. By reserving space and preventing layout shifts, they ensure your pages look professional and provide a smooth, frustration-free experience for users.

Say goodbye to layout jumps and hello to visually stable designs with aspect-ratio!

More Resources

Learn more about the aspect-* utilities in the TailwindCSS documentation.
Use Aspect Calculator to generate custom aspect ratios for your projects.

More Tips

Want to take your TailwindCSS skills to the next level? Tailtips is packed with actionable tips and tricks to help you build better, faster, and smarter with TailwindCSS. From creative solutions like gradient borders to advanced techniques and best practices, Tailtips has everything you need to master TailwindCSS.

Discover Tailtips

✨ 1 Thing I Love About TailwindCSS v4 Beta and 1 Thing I Hate ✨

Méschac Irung — Fri, 10 Jan 2025 09:18:46 +0000

TailwindCSS v4 Beta is shaping up to be an exciting update, but as always, there are things I absolutely love and a few that... well, annoy me. Here's my take:

✅ What I Love:

Hover states are disabled on touch screens by default. 🙌 This is such a thoughtful move! It eliminates unnecessary hover effects where they don’t make sense, creating a cleaner, more intentional user experience on mobile devices.

❌ What I Hate:

In v4 Beta, buttons now have the default CSS cursor (cursor: default) instead of Tailwind's previous cursor-pointer. This means I have to explicitly add cursor-pointer every time I want my buttons to behave intuitively—like clickable elements. 😤 It's not a huge deal, but it adds an extra step that didn’t exist before.

What’s your take on this change? Do you love it, hate it, or don’t care? Let’s hear your thoughts! 👇

[Boost]

Méschac Irung — Sat, 30 Nov 2024 11:24:47 +0000

How to create gradient borders with tailwindcss

Méschac Irung for Tailus ・ Jul 10 '23

#webdev #tailwindcss #webdesign

This web application layout is free

Méschac Irung — Mon, 08 Jul 2024 07:38:51 +0000

Since the release of Tailus UI React, this application layout example has stood out as the most requested by our community. Today, we're thrilled to make it available and free for everyone to use.

Supports light and dark mode

Adapts perfectly to your theme preferences

Modern

Built following modern trends and meticulous attention to detail

Highly customizable

Change easily all aspects to meet your needs

Whether you're building an admin dashboard, a user management system, or a data visualization tool, this layout provides a sleek, modern, and highly functional design to streamline your development process.

Start using

Left-aligned headings in the hero section are the best

Méschac Irung — Sat, 15 Jun 2024 06:53:40 +0000

A non-exhaustive list of the best landing pages with the hero section heading left-aligned :

1. Huly

2. Super Power

3. GitHub

4. Twingate

5. Planet Scale

6. Linear

7. Shopify

8. Obsidian

What are you building this week ?

Méschac Irung — Mon, 10 Jun 2024 04:46:36 +0000

Forget Shadcn, Tailus UI React is now stable

Méschac Irung — Sat, 08 Jun 2024 14:45:53 +0000

Tailus UI React is a modern React UI Kit for building custom, accessible web UIs on top of Radix UI and Tailwind Css.

Top-level customization

When it comes to customization, Tailus UI React stands out as a highly flexible option within the realm of React UI Kits. Here’s a deeper dive into its customization strengths:

Component Part Variants

Tailus UI React offers more than just pre-built components. It provides the ability to customize individual parts within each component using variants.

For example, consider the Annonce component. You can modify the variant and size of the <Annonce.Root /> part, change the variant, intent and size of <Annonce.Concern />, and even add a <Annonce.Message /> with its own unique variants. Each part can be customized independently, giving you the flexibility to create highly tailored user interfaces.

Theme Customization

Tailus UI React allows you to tailor the overall theme by using data attributes. This method simplifies the process of adjusting various properties such as palette colors, border radius values, background and border shades, and shadows.

For instance, imagine you’ve set the border radius for your entire app theme to xl. With Tailus UI React, you have the flexibility to override this setting and adjust the border radius to 2xl for a specific component, simply by using data attributes.

This approach is superior to using the “className” property for components that need to calculate their border radius based on the border radius of their parent component. With data attributes, you can directly and independently adjust the theme of each component, providing a more intuitive and flexible customization process.

Css Variables

While theming is based on data attributes, you can also use CSS Variables to customize your theme.

Why is Tailus UI React better than Shadcn UI

Both Tailus UI React and Shadcn leverage Radix UI and Tailwind CSS, but Tailus UI React takes customization a step further:

Built in Palette colors

Tailus UI React comes with built-in palettes that leverage familiar Tailwind CSS defaults, making it easier to quickly start building your UI.

Multi theming support

Tailus UI React empowers you to create multi-themed applications with ease.

Component part variants

Tailus UI React components offer granular customization through part variants.

Data attributes

Tailus UI React empowers you to customize your theme with ease using data attributes. This approach simplifies adjusting various properties for both the entire application and individual components.

Shadcn offers a solid foundation with Radix and Tailwind, but Tailus UI React empowers you to achieve a truly unique and tailored user interface through its superior customization features.

With component part variants, data attributes, thoughtful design choices, and CSS variables, you can achieve a high level of design control without sacrificing development speed.

Get Started

What are you building this weekend?

Méschac Irung — Sat, 27 Apr 2024 16:34:41 +0000

On the side, I'm writing the documentation for Tailus UI React

How to build in public ?

Méschac Irung — Thu, 04 Apr 2024 15:26:06 +0000

Do you listen to music while coding ?

Méschac Irung — Wed, 03 Apr 2024 16:42:27 +0000

Atom : The most customizable free Astro landing page

Méschac Irung — Tue, 02 Apr 2024 13:26:07 +0000

Unleash the potential of your project with a website designed for impact. Showcase your innovative tech tool with intuitive simplicity and elegance.

Atom is built with meticulous attention to detail as your creation and features a trendy and modern design look and feel to make your website standout.

Above all, Atom is entirely free, offering a premium template experience at no cost.

Screenshots

Make it yours with ease

Change colors, shadows, border radius, border and background contrast easily.

Ready to unlock the potential of Atom ?

Get your copy now

Ada: The most beautiful free Tailwind Css landing page template

Méschac Irung — Sat, 09 Mar 2024 09:26:56 +0000

Ada is a contemporary, free landing page HTML template designed with meticulous attention to detail and a modern aesthetic.

Ideal for startups, SaaS businesses, and open-source projects, Ada boasts a polished and sophisticated interface that elevates your brand with its clean, modern layout and thoughtful design.

Experience the difference:

Refined shadows and borders for a touch of elegance.
Carefully structured layout and sections for optimal user experience.
Versatile design adaptable to diverse projects.

Support Dark Mode

Adapts to your user's system preferences

Make it yours with ease

Change colors, shadows, border radius, border and background contrast easily.

Ready to unlock the potential of Ada ?

Get your copy now