Browser Support
Flex Direction
Flex Wrap
Justify Items
Justify Self
Menu

Tailwind CSS Size

Managing size is fundamental for building layouts and designing responsive web pages. Tailwind CSS offers a wide range of size-* utilities that give equal height and width to an element.

Let's explore how you can utilize these utilities effectively to build adaptable and visually appealing UIs.

ClassPropertiesExample
size-0width: 0px; height: 0px;<div className="size-0"></div>
size-pxwidth: 1px; height: 1px;<div className="size-px"></div>
size-0.5width: 0.125rem; height: 0.125rem; <div className="size-0.5"></div>
size-1width: 0.25rem; height: 0.25rem; <div className="size-1"></div>
size-1.5width: 0.375rem; height: 0.375rem; <div className="size-1.5"></div>
size-2width: 0.5rem; height: 0.5rem; <div className="size-2"></div>
size-2.5width: 0.625rem; height: 0.625rem; <div className="size-2.5"></div>
size-3width: 0.75rem; height: 0.75rem; <div className="size-3"></div>
size-3.5width: 0.875rem; height: 0.875rem; <div className="size-3.5"></div>
size-4width: 1rem; height: 1rem; <div className="size-4"></div>
size-5width: 1.25rem; height: 1.25rem; <div className="size-5"></div>
size-6width: 1.5rem; height: 1.5rem; <div className="size-6"></div>
size-7width: 1.75rem; height: 1.75rem; <div className="size-7"></div>
size-8width: 2rem; height: 2rem; <div className="size-8"></div>
size-9width: 2.25rem; height: 2.25rem; <div className="size-9"></div>
size-10width: 2.5rem; height: 2.5rem; <div className="size-10"></div>
size-11width: 2.75rem; height: 2.75rem; <div className="size-11"></div>
size-12width: 3rem; height: 3rem; <div className="size-12"></div>
size-14width: 3.5rem; height: 3.5rem; <div className="size-14"></div>
size-16width: 4rem; height: 4rem; <div className="size-16"></div>
size-20width: 5rem; height: 5rem; <div className="size-20"></div>
size-24width: 6rem; height: 6rem; <div className="size-24"></div>
size-28width: 7rem; height: 7rem; <div className="size-28"></div>
size-32width: 8rem; height: 8rem; <div className="size-32"></div>
size-36width: 9rem; height: 9rem; <div className="size-36"></div>
size-40width: 10rem; height: 10rem; <div className="size-40"></div>
size-44width: 11rem; height: 11rem; <div className="size-44"></div>
size-48width: 12rem; height: 12rem; <div className="size-48"></div>
size-52width: 13rem; height: 13rem; <div className="size-52"></div>
size-56width: 14rem; height: 14rem; <div className="size-56"></div>
size-60width: 15rem; height: 15rem; <div className="size-60"></div>
size-64width: 16rem; height: 16rem; <div className="size-64"></div>
size-72width: 18rem; height: 18rem; <div className="size-72"></div>
size-80width: 20rem; height: 20rem; <div className="size-80"></div>
size-96width: 24rem; height: 24rem; <div className="size-96"></div>
size-autowidth: auto; height: auto;<div className="size-auto"></div>
size-1/2width: 50%; height: 50%;<div className="size-1/2"></div>
size-1/3width: 33.333333%; height: 33.333333%;<div className="size-1/3"></div>
size-2/3width: 66.666667%; height: 66.666667%;<div className="size-2/3"></div>
size-1/4width: 25%; height: 25%;<div className="size-1/4"></div>
size-2/4width: 50%; height: 50%;<div className="size-2/4"></div>
size-3/4width: 75%; height: 75%;<div className="size-3/4"></div>
size-1/5width: 20%; height: 20%;<div className="size-1/5"></div>
size-2/5width: 40%; height: 40%;<div className="size-2/5"></div>
size-3/5width: 60%; height: 60%;<div className="size-3/5"></div>
size-4/5width: 80%; height: 80%;<div className="size-4/5"></div>
size-1/6width: 16.666667%; height: 16.666667%;<div className="size-1/6"></div>
size-2/6width: 33.333333%; height: 33.333333%;<div className="size-2/6"></div>
size-3/6width: 50%; height: 50%;<div className="size-3/6"></div>
size-4/6width: 66.666667%; height: 66.666667%;<div className="size-4/6"></div>
size-5/6width: 83.333333%; height: 83.333333%;<div className="size-5/6"></div>
size-1/12width: 8.333333%; height: 8.333333%;<div className="size-1/12"></div>
size-2/12width: 16.666667%; height: 16.666667%;<div className="size-2/12"></div>
size-3/12width: 25%; height: 25%;<div className="size-3/12"></div>
size-4/12width: 33.333333%; height: 33.333333%;<div className="size-4/12"></div>
size-5/12width: 41.666667%; height: 41.666667%;<div className="size-5/12"></div>
size-6/12width: 50%; height: 50%;<div className="size-6/12"></div>
size-7/12width: 58.333333%; height: 58.333333%;<div className="size-7/12"></div>
size-8/12width: 66.666667%; height: 66.666667%;<div className="size-8/12"></div>
size-9/12width: 75%; height: 75%;<div className="size-9/12"></div>
size-10/12width: 83.333333%; height: 83.333333%;<div className="size-10/12"></div>
size-11/12width: 91.666667%; height: 91.666667%;<div className="size-11/12"></div>
size-fullwidth: 100%; height: 100%;<div className="size-full"></div>
size-minwidth: min-content; height: min-content;<div className="size-min"></div>
size-maxwidth: max-content; height: max-content;<div className="size-max"></div>
size-fitwidth: fit-content; height: fit-content;<div className="size-fit"></div>

Overview of Size

Adding a Fixed Size

Size utilities in Tailwind CSS offer precise control over an element’s height and width through fixed or percentage-based values. To set fixed values for height and width, you can directly use Tailwind's predefined utilities.

Below is an example showing an image element with exact dimensions:

This is a live editor. Play around with it!
export default function App() {
  return (
    <div className="flex justify-center items-center h-screen w-screen bg-gray-100">
      <img
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Fixed Size Example"
        className="size-48 object-cover rounded-lg shadow-lg" 
        // height: 192px; width: 192px;
      />
    </div>
  );
}

In this example, the size-48 utilities ensure the image has a fixed size regardless of its container or screen size.

Adding a Percentage Size

For fluid layouts and responsiveness, percentage-based sizes are often more suitable than fixed values. Tailwind provides utilities for defining dimensions as percentages of their containing element.

This is a live editor. Play around with it!
export default function App() {
  return (
    <div className="flex justify-center items-center h-screen w-screen bg-blue-50">
      <div className="size-3/5 bg-blue-500 text-white text-center p-4 rounded-xl">
        <p className="text-lg font-bold">This box is proportionally sized.</p>
        {/* height: 60%; width: 60%; */}
      </div>
    </div>
  );
}

The size-3/5(60%) utility make the container adjust its size relative to its parent element.

Removing Dimensions

Resetting the size of an element is straightforward in Tailwind. By using size-auto, you can revert the height or width of an element to its intrinsic size. This utility works best when combined with a state or breakpoint modifier.

This is a live editor. Play around with it!
export default function App() {
  return (
    <div className="flex justify-center items-center h-screen w-screen bg-gray-200">
      <img
        src="https://images.unsplash.com/photo-1527443224154-c4a3942d3acf"
        alt="Reset Size"
        className="size-48 hover:size-auto max-h-64 max-w-full" 
        // On hover- height: auto; width: auto;
      />
    </div>
  );
}

States and Responsiveness

Hover and Focus States

Using pseudo-classes such as hover, focus, and others, you can modify an element’s size when users interact with it.

When you hover over or focus on this button, the width and height increase.

This is a live editor. Play around with it!
export default function App() {
  return (
    <div className="flex justify-center items-center h-screen w-screen bg-gray-50">
      <button className="size-24 hover:size-32 flex justify-center items-center bg-green-700 text-white rounded-lg">
        Hover Me
      </button>
      {/* Default: height: 6rem; width: 6rem; */}
      {/* Hover: height: 8rem; width: 8rem; */}
    </div>
  );
}

Breakpoint Modifiers

Tailwind lets you define size utilities that apply only on specific screen widths, perfect for creating responsive designs. You can use breakpoints like sm, md, and lg to apply size based on screen dimensions.

This is a live editor. Play around with it!
export default function App() {
  return (
    <div className="flex justify-center items-center h-screen w-screen">
      <div className="bg-pink-700 text-center p-4 rounded-lg text-white">
        <p className="sm:size-3/4 md:size-1/2 lg:size-1/3">Resize the screen to see changes!</p>
        {/* Default: 100%; Small Screens: 75%; Medium: 50%; Large: 33.33%; */}
      </div>
    </div>
  );
}

Custom Size

You might encounter cases where the predefined sizes aren't sufficient. Tailwind provides two ways to address this: customizing your theme and using arbitrary values.

Extending the Theme

Tailwind's configuration file (tailwind.config.js) allows you to add custom sizes to the theme under extend. These values can then be directly used in your markup.

The below example shows a card block using a custom size added to the configuration file:

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

export default function App() {
  return (
    <div className="flex justify-center items-center h-screen w-screen bg-purple-100">
      <div className="size-76 bg-purple-600 text-white text-center rounded-lg">
        <p>Custom size from theme</p>
        {/* height: 19rem; width: 19rem; */}
      </div>
    </div>
  );
}

Using Arbitrary Values

If adding to the theme isn't desirable, you can directly use arbitrary values in your Tailwind classes. Arbitrary values are formatted as className="size-[value]":

This is a live editor. Play around with it!
export default function App() {
  return (
    <div className="flex justify-center items-center h-screen w-screen bg-gray-50">
      <div className="bg-red-500 text-white text-center rounded-lg size-[16rem]">
        <p>Arbitrary size</p>
        {/* Tailwind supports inline arbitrary sizes like className="size-[16rem]". */}
      </div>
    </div>
  );
}

Real World Examples

Product Comparison Cards with Size Variations

This component displays product cards with different size options for an e-commerce platform.

This is a live editor. Play around with it!
export default function ProductSizeComparison() {
  const products = [
    {
      id: 1,
      name: "Classic Leather Bag",
      sizes: ["S", "M", "L"],
      price: "$129.99",
      src: "https://images.unsplash.com/photo-1548036328-c9fa89d128fa",
      alt: "Brown leather messenger bag"
    },
    {
      id: 2,
      name: "Denim Jacket",
      sizes: ["XS", "S", "M", "L", "XL"],
      price: "$89.99",
      src: "https://images.unsplash.com/photo-1542272454315-4c01d7abdf4a",
      alt: "Blue denim jacket"
    },
    {
      id: 3,
      name: "Running Shoes",
      sizes: ["US 7", "US 8", "US 9", "US 10", "US 11"],
      price: "$149.99",
      src: "https://images.unsplash.com/photo-1542291026-7eec264c27ff",
      alt: "Sport running shoes"
    },
    {
      id: 4,
      name: "Winter Coat",
      sizes: ["S", "M", "L", "XL", "XXL"],
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1539533113208-f6df8cc8b543",
      alt: "Warm winter coat"
    },
    {
      id: 5,
      name: "Silk Scarf",
      sizes: ["65x65cm", "90x90cm", "120x120cm"],
      price: "$59.99",
      src: "https://images.unsplash.com/photo-1601924994987-69e26d50dc26",
      alt: "Patterned silk scarf"
    },
    {
      id: 6,
      name: "Canvas Backpack",
      sizes: ["Small", "Medium", "Large"],
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1553062407-98eeb64c6a62",
      alt: "Vintage canvas backpack"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-6">
      {products.map((product) => (
        <div key={product.id} className="bg-white rounded-lg shadow-lg p-4">
          <img 
            src={product.src} 
            alt={product.alt} 
            className="size-40 object-cover rounded-md"
          />
          <h3 className="text-xl font-semibold mt-4">{product.name}</h3>
          <p className="text-gray-600 text-lg">{product.price}</p>
          <div className="mt-4">
            <p className="text-sm font-medium">Available Sizes:</p>
            <div className="flex flex-wrap gap-2 mt-2">
              {product.sizes.map((size) => (
                <span 
                  key={size} 
                  className="px-3 py-1 text-sm border border-gray-300 rounded-full hover:bg-gray-100 cursor-pointer"
                >
                  {size}
                </span>
              ))}
            </div>
          </div>
        </div>
      ))}
    </div>
  );
}

File Size Display Dashboard

This component shows different file sizes in a modern dashboard layout.

This is a live editor. Play around with it!
export default function FileSizeDashboard() {
  const files = [
    {
      id: 1,
      name: "Project_Presentation.pptx",
      size: "25.4 MB",
      type: "Presentation",
      icon: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      lastModified: "2023-10-15"
    },
    {
      id: 2,
      name: "Annual_Report_2023.pdf",
      size: "12.8 MB",
      type: "Document",
      icon: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      lastModified: "2023-10-14"
    },
    {
      id: 3,
      name: "Product_Photos.zip",
      size: "156.7 MB",
      type: "Archive",
      icon: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      lastModified: "2023-10-13"
    },
    {
      id: 4,
      name: "Database_Backup.sql",
      size: "89.2 MB",
      type: "Database",
      icon: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      lastModified: "2023-10-12"
    },
    {
      id: 5,
      name: "Marketing_Video.mp4",
      size: "234.5 MB",
      type: "Video",
      icon: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      lastModified: "2023-10-11"
    },
    {
      id: 6,
      name: "Source_Code.zip",
      size: "45.1 MB",
      type: "Archive",
      icon: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      lastModified: "2023-10-10"
    }
  ];

  return (
    <div className="p-6 bg-gray-50">
      <div className="bg-white rounded-xl shadow-md overflow-hidden">
        <div className="grid bg-gray-100 p-4 font-medium">
          <div className="col-span-5">File Name</div>
          <div className="col-span-2">Size</div>
          <div className="col-span-3">Type</div>
          <div className="col-span-2">Modified</div>
        </div>
        {files.map((file) => (
          <div 
            key={file.id} 
            className="grid p-4 border-b hover:bg-gray-50"
          >
            <div className="col-span-5 flex items-center gap-3">
              <img 
                src={file.icon} 
                alt={file.type} 
                className="size-6 object-cover"
              />
              {file.name}
            </div>
            <div className="col-span-2 text-gray-600">{file.size}</div>
            <div className="col-span-3 text-gray-600">{file.type}</div>
            <div className="col-span-2 text-gray-600">{file.lastModified}</div>
          </div>
        ))}
      </div>
    </div>
  );
}

Image Gallery with Size Controls

This component creates a responsive image gallery with size adjustment controls.

This is a live editor. Play around with it!
export default function ImageGalleryWithSizeControls() {
  const images = [
    {
      id: 1,
      src: "https://images.unsplash.com/photo-1682687220199-d0124f48f95b",
      alt: "City skyline",
      title: "Urban Landscape"
    },
    {
      id: 2,
      src: "https://images.unsplash.com/photo-1682687220509-61b8a906ca19",
      alt: "Desert dunes",
      title: "Desert Sands"
    },
    {
      id: 3,
      src: "https://images.unsplash.com/photo-1682687220923-c58b9a4592ae",
      alt: "Snow peaks",
      title: "Winter Mountains"
    }
  ];

  return (
    <div className="p-6 bg-gray-100">
      <div className="mb-6 flex flex-wrap gap-2">
        <h2 className="text-2xl font-bold">Photo Gallery</h2>
        <div className="flex gap-4">
          <button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
            Small
          </button>
          <button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
            Medium
          </button>
          <button className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700">
            Large
          </button>
        </div>
      </div>
      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
        {images.map((image) => (
          <div key={image.id} className="group relative size-64 overflow-hidden rounded-lg">
            <img 
              src={image.src} 
              alt={image.alt} 
              className="size-64 object-cover transition-transform duration-300 group-hover:scale-110"
            />
            <div className="absolute bottom-0 left-0 right-0 bg-gradient-to-t from-black/70 to-transparent p-4">
              <h3 className="text-white text-lg font-semibold">{image.title}</h3>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Avatar Size Showcase

This component displays different avatar sizes in a profile section.

This is a live editor. Play around with it!
export default function AvatarSizeShowcase() {
  const profiles = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile picture",
      size: "large"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "Developer",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "Michael Chen profile picture",
      size: "medium"
    },
    {
      id: 3,
      name: "Emma Wilson",
      role: "Designer",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emma Wilson profile picture",
      size: "small"
    },
    {
      id: 4,
      name: "James Rodriguez",
      role: "Manager",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Rodriguez profile picture",
      size: "large"
    },
    {
      id: 5,
      name: "Lisa Wang",
      role: "Marketing",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Wang profile picture",
      size: "medium"
    },
    {
      id: 6,
      name: "David Kim",
      role: "Support",
      src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d",
      alt: "David Kim profile picture",
      size: "small"
    }
  ];

  const sizeClasses = {
    small: "size-12",
    medium: "size-16",
    large: "size-24"
  };

  return (
    <div className="p-8 bg-white">
      <h2 className="text-2xl font-bold mb-6">Team Members</h2>
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
        {profiles.map((profile) => (
          <div key={profile.id} className="flex items-center space-x-4">
            <img
              src={profile.src}
              alt={profile.alt}
              className={`${sizeClasses[profile.size]} rounded-full object-cover border-4 border-gray-200`}
            />
            <div>
              <h3 className="text-lg font-semibold">{profile.name}</h3>
              <p className="text-gray-600">{profile.role}</p>
              <p className="text-sm text-gray-400">Size: {profile.size}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Icon Size Grid

This component shows a grid of icons with different sizes.

This is a live editor. Play around with it!
export default function IconSizeGrid() {
  const icons = [
    {
      id: 1,
      name: "Home",
      src: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      alt: "Home icon",
      size: "xs"
    },
    {
      id: 2,
      name: "Settings",
      src: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      alt: "Settings icon",
      size: "sm"
    },
    {
      id: 3,
      name: "Profile",
      src: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      alt: "Profile icon",
      size: "md"
    },
    {
      id: 4,
      name: "Messages",
      src: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      alt: "Messages icon",
      size: "lg"
    },
    {
      id: 5,
      name: "Notifications",
      src: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      alt: "Notifications icon",
      size: "xl"
    },
    {
      id: 6,
      name: "Dashboard",
      src: "https://images.unsplash.com/photo-1618609378039-b572f64c5b42",
      alt: "Dashboard icon",
      size: "2xl"
    }
  ];

  const sizeClasses = {
    xs: "size-4",
    sm: "size-6",
    md: "size-8",
    lg: "size-12",
    xl: "size-16",
    "2xl": "size-20"
  };

  return (
    <div className="p-8 bg-gray-50">
      <h2 className="text-2xl font-bold mb-6">Icon Sizes</h2>
      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-8">
        {icons.map((icon) => (
          <div 
            key={icon.id} 
            className="flex flex-col items-center justify-center p-4 bg-white rounded-lg shadow-sm"
          >
            <img
              src={icon.src}
              alt={icon.alt}
              className={`${sizeClasses[icon.size]} text-gray-700 mb-2`}
            />
            <span className="text-sm font-medium">{icon.name}</span>
            <span className="text-xs text-gray-500">Size: {icon.size}</span>
          </div>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Custom Product Card Grid with Dynamic Sizing

This example demonstrates how to create a responsive product card grid with custom sizes for different breakpoints.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Headphones",
      price: "$299",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e"
    },
    {
      id: 2,
      name: "Wireless Speaker",
      price: "$199",
      image: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1"
    },
    // Add more products as needed
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
      {products.map((product) => (
        <div 
          key={product.id}
          className="size-product-md md:size-product-md lg:size-product-lg 
                   bg-white rounded-xl shadow-lg overflow-hidden"
        >
          <img 
            src={product.image} 
            alt={product.name}
            className="size-product-sm object-cover rounded-lg w-full"
          />
          <div className="p-4">
            <h3 className="text-xl font-semibold">{product.name}</h3>
            <p className="text-gray-600 mt-2">{product.price}</p>
          </div>
        </div>
      ))}
    </div>
  );
}

Profile Avatar Size Configuration

This example shows how to implement custom avatar sizes for a user profile system.

This is a live editor. Play around with it!
import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function UserProfile() {
  const user = {
    name: "Jane Cooper",
    role: "Product Designer",
    avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
    stats: {
      followers: "8.9K",
      following: "2.3K",
      posts: "932"
    }
  };

  return (
    <div className="flex flex-col items-center bg-gray-50 p-8 h-screen">
      <div className="relative">
        <img
          src={user.avatar}
          alt={user.name}
          className="size-avatar rounded-full object-cover border-4 border-white shadow-lg"
        />
        <div className="absolute bottom-0 right-0 bg-green-500 rounded-full border-4 border-white"></div>
      </div>
      <h2 className="mt-4 text-2xl font-bold">{user.name}</h2>
      <p className="text-gray-600">{user.role}</p>
      <div className="flex gap-8 mt-6">
        {Object.entries(user.stats).map(([key, value]) => (
          <div key={key} className="text-center">
            <p className="font-bold">{value}</p>
            <p className="text-gray-600 capitalize">{key}</p>
          </div>
        ))}
      </div>
    </div>
  );
}

Custom Modal Size Configuration

This example demonstrates how to create modals with different size variations.

This is a live editor. Play around with it!
import { useState } from "react";
  import tailwindConfig from "./tailwind.config.js";
tailwind.config = tailwindConfig;

// App.js
export default function ModalExample() {
  const [isOpen, setIsOpen] = useState(false);
  const [modalSize, setModalSize] = useState('modal-md');

  return (
    <div className="min-h-screen bg-gray-100 p-8">
      <div className="flex flex-wrap gap-4 mb-8">
        {['modal-sm', 'modal-md', 'modal-lg', 'modal-xl'].map((size) => (
          <button
            key={size}
            onClick={() => {
              setModalSize(size);
              setIsOpen(true);
            }}
            className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
          >
            Open {size} Modal
          </button>
        ))}
      </div>

      {isOpen && (
        <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center">
          <div 
            className={`size-${modalSize} max-h-[size:modal-height] 
                       bg-white rounded-xl shadow-2xl overflow-hidden`}
          >
            <div className="p-6 border-b">
              <div className="flex justify-between items-center">
                <h3 className="text-xl font-semibold">Modal Title</h3>
                <button 
                  onClick={() => setIsOpen(false)}
                  className="text-gray-500 hover:text-gray-700"
                >
                  ✕
                </button>
              </div>
            </div>
            <div className="p-6">
              <p className="text-gray-600">
                This is a custom-sized modal content area. The modal size can be
                adjusted using the buttons above.
              </p>
            </div>
            <div className="p-6 border-t bg-gray-50">
              <button
                onClick={() => setIsOpen(false)}
                className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700"
              >
                Close Modal
              </button>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}

These examples demonstrate how to effectively customize sizes in Tailwind CSS for different UI components. Each example includes both the configuration changes needed in tailwind.config.js and the implementation in React components. Remember to adjust the values according to your specific design requirements.

Best Practices

Maintain Design Consistency

When extending your theme in tailwind.config.js, customize spacing, widths, and heights thoughtfully. Add only the values that align with your project's design guidelines. Avoid overloading your configuration with arbitrary sizes that may create inconsistencies. For instance, specify uniform sizings for cards, buttons, etc. to achieve architectural consistency.

Additionally, document your size conventions within a style guide or component library. This practice will help other developers on your team follow the same sizing patterns, minimizing discrepancies and improving maintainability.

Balance with Other Layout Properties

Effective size management in Tailwind CSS goes hand-in-hand with other layout utilities like flex, grid, and gap. You can achieve precise alignment by using size utilities in combination with align-* or justify-* properties. For example, in a grid layout, setting grid-cols-* and adjusting column sizes with col-span-* helps balance responsiveness with clarity.

Consider layering size utilities with space-x or space-y for consistent spacing between grouped items.

Accessibility Considerations

Enhance Readability and Navigability

Proper sizing directly impacts readability and navigability. Maintaining consistent sizing for interactive elements such as cards and buttons is crucial. Adequate size ensures that users can easily tap or click these elements.

Additionally, ensure that text and interactive elements are neither too small nor too large on any device. For instance, using responsive size classes like md:size-24 ensures that on medium screens and above, the element's dimensions are set to 6rem, adapting to the screen size for optimal readability.

Focus on High Contrast

While size is important, contrast between elements also plays a significant role in accessibility. Once proper sizing of your elements is set for various breakpoints, also try to work on the colors. High contrast between text and backgrounds ensures that content is distinguishable for users with visual impairments, including those with color blindness.

Tailwind provides utilities to manage color and background settings, allowing developers to achieve sufficient contrast ratios. For example, using classes like text-white on a dark background can enhance readability. It's advisable to refer to accessibility guidelines, such as the Web Content Accessibility Guidelines (WCAG), to ensure that contrast ratios meet the recommended standards.

Debugging Common Issues

Handle Nested Element Challenges

When dealing with nested elements, applying size-* utilities can lead to unintended consequences if parent and child elements have conflicting size definitions.

For example, setting a parent element to size-64 and a child to size-full will make the child inherit the 64px dimensions of the parent, which might not be the intended outcome. To prevent such issues, ensure that size utilities are applied thoughtfully, considering the hierarchical structure of your elements. If necessary, use specific width (w-) and height (h-) utilities to achieve the desired layout without conflicts

Max HeightMargin

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy