diff --git a/documentation/blog/2023-09-11-tailwind-flex.md b/documentation/blog/2024-08-19-tailwind-flex.md similarity index 72% rename from documentation/blog/2023-09-11-tailwind-flex.md rename to documentation/blog/2024-08-19-tailwind-flex.md index e934c13b6723..d5ed39572ba1 100644 --- a/documentation/blog/2023-09-11-tailwind-flex.md +++ b/documentation/blog/2024-08-19-tailwind-flex.md @@ -4,10 +4,12 @@ description: This post is about how to use TailwindCSS Flex classes effectively slug: tailwind-flex authors: abdullah_numan tags: [tailwind, css] -image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-09-11-tailwind-flex/social.png +image: https://refine.ams3.cdn.digitaloceanspaces.com/blog/2023-09-11-tailwind-flex/social-2.png hide_table_of_contents: false --- +**This article was last updated on August 19, 2024, to add sections on Flexbox Accessibility Considerations and Best Practices for Performance Optimization.** + ## Introduction [TailwindCSS](https://tailwindcss.com/) is a robust CSS framework that provides numerous utility classes for layout, sizing, colors, typography, etc. One of the most powerful capabilities Tailwind provides is responsive variants of utility classes for all screen sizes. Tailwind also supports variants for an element's states like `hover`, `focus`, `active`, and so on. @@ -25,12 +27,14 @@ Before starting, though, let's talk about the prerequisites that need to be mana Steps we'll cover: - [Starter Files](#starter-files) - - [`` Component](#navbar--component) - [Styling a Navbar with TailwindCSS classes](#styling-a-navbar-with-tailwindcss-classes) - - [Nav Items with Tailwind Flex](#nav-items-with-tailwind-flex) - - [Ordering List Items with Tailwind Flex](#ordering-list-items-with-tailwind-flex) - - [Search Bar](#search-bar) - - [Positioning Navbar Logo with Tailwind Flex](#positioning-navbar-logo-with-tailwind-flex) +- [Flexbox Accessibility Considerations](#flexbox-accessibility-considerations) +- [Best Practices for Performance Optimization](#best-practices-for-performance-optimization) +- [Avoid Layout Shifts](#avoid-layout-shifts) +- [Use Tailwind's JIT (Just-In-Time) Mode](#use-tailwinds-jit-just-in-time-mode) +- [Optimize for Critical Rendering Path](#optimize-for-critical-rendering-path) +- [Lazy Load Non-essential Content](#lazy-load-non-essential-content) +- [PurgeCSS with Tailwind](#purgecss-with-tailwind) ## Prerequisites @@ -147,7 +151,7 @@ const Navbar = () => {
@@ -250,29 +254,29 @@ body { } .navbar { - @apply fixed mx-auto px-2 w-full h-auto bg-slate-600; + @apply fixed mx-auto h-auto w-full bg-slate-600 px-2; } .nav-wrapper { - @apply h-14 bg-slate-600 w-full; + @apply h-14 w-full bg-slate-600; } .brand { max-width: 12rem; color: var(--primary-color); - @apply block text-4xl mx-2 py-2; + @apply mx-2 block py-2 text-4xl; } .nav-item { - @apply mx-2 p-1 rounded lg:mx-8 w-full lg:w-auto hover:scale-105 hover:backdrop-brightness-125 hover:shadow transition-all; + @apply mx-2 w-full rounded p-1 transition-all hover:scale-105 hover:shadow hover:backdrop-brightness-125 lg:mx-8 lg:w-auto; } .nav-link { - @apply text-center p-1; + @apply p-1 text-center; } .text-input { - @apply py-0.5 px-2 border rounded-l text-slate-800; + @apply rounded-l border px-2 py-0.5 text-slate-800; } .avatar { @@ -309,7 +313,7 @@ import React from "react"; export const HamburgerIcon = ({ isMobileMenuOpen, setIsMobileMenuOpen }) => { return (
setIsMobileMenuOpen(!isMobileMenuOpen)} > @@ -319,7 +323,7 @@ export const HamburgerIcon = ({ isMobileMenuOpen, setIsMobileMenuOpen }) => { viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" - className="w-6 h-6" + className="h-6 w-6" > { export const SearchIcon = () => { return ( +``` + +### ARIA Roles and Labels + +For better compatibility with screen readers, the use of appropriate ARIA roles is needed—such as `role="navigation"` for navbars—and labeling interactive elements by using `aria-label` to describe their purpose. This will help users understand the layout structure better. + +```tsx + +``` + +### Responsive Considerations + +As our Flexbox layout will change for sure according to device width, we must ensure that such change remains accessible. For example: If a menu is going to collapse in smaller screens, make sure there's always a way to expose it clearly, either by a button or link, which will then be marked up with the `aria-expanded` attribute. + +```tsx + + +``` + +## Best Practices for Performance Optimization + +I was thinking about squeezing the most performance out of our project since we are using a lot of Flexbox and TailwindCSS. Here are a few tips and tricks that may help us keep our layout fast and responsive: + +## Avoid Layout Shifts + +One thing we must be careful of is layout shifts, which can occur when our elements move around on the page while it is loading. We should give explicit sizes to our Flexbox containers and items. For example: + +```css +.flex-item { + width: 100px; + height: 100px; +} +``` + +Sizing definitions inform the browser how to assign space, which reduces the likelihood of unexpected shifts. + +## Use Tailwind's JIT (Just-In-Time) Mode + +The JIT mode from Tailwind can really help boost performance, as we only generate CSS that is actually in use. That potentially shrinks down the size of the CSS files, hence boosting the loading time of your pages. You enable it by tweaking your `tailwind.config.js` file: + +```javascript +module.exports = { + mode: "jit", + // The rest of your Tailwind config +}; +``` + +## Optimize for Critical Rendering Path + +Load the critical content first above-the-fold. In other words, don't be render blocking for any CSS or JS file above-the-fold. Some ways to do this is to directly inline critical CSS in the HTML: + +```html + +``` + +By doing so, the browser ensures that critical content gets loaded first, hence improving the perceived load time. + +## Lazy Load Non-essential Content + +Use lazy loading for images and any non-essential content so that they load only once in view. This reduces the initial load time and saves bandwidth. Here is how we can do it: + +```html +Description +``` + +This attribute ensures that the image is loaded only when it is about to become visible. + +## PurgeCSS with Tailwind + +Lastly, PurgeCSS allows us to discard any unused CSS classes in our codebase, making the file smaller. Using PurgeCSS in our Tailwind setup becomes easy through configuration in the `tailwind.config.js`: + +```javascript +module.exports = { + purge: ["./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"], + // the rest of your Tailwind config +}; +``` + +These steps should help us optimize our layout and improve performances across the board. Let me know if you have any other ideas or maybe we should try implementing these! + ## Summary In this post, we used Tailwind Flex classes to build a collapsible, responsive React navbar. The navbar hides the menu on mobile screens and can be toggled via clicking on a double cheese hamburger button. It hoists up to a horizontal bar after `md`.