Browser Support
Flex Direction
Flex Wrap
Flex
Flex Basis
Menu

Tailwind CSS Flex Basis

Flex Basis determines the initial size of a flex item before the remaining space is distributed. When working with flex layouts, the property essentially serves as the width (or height in certain contexts) that a flex item will occupy in a container.

Tailwind CSS provides a set of utilities that enable you to set flex-basis effortlessly. Whether you need to establish a uniform distribution of space or precisely define how your components adapt across screen sizes, Tailwind’s utilities equip you to configure flexible and responsive layouts with ease.

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

Overview of Flex Basis

Adding the Flex Basis

To give an initial size to your flex items, use utilities such as basis-1, basis-2, basis-3, etc.

This is a live editor. Play around with it!
export default function LayoutOne() {
  return (
    <div className="bg-gray-100 h-screen w-screen flex items-center justify-center">
      {/* flex-basis: 8rem; (96px) */}
      <div className="basis-24 bg-blue-200 h-64" /> 
      {/* flex-basis: 12rem; (192px) */}
      <div className="basis-48 bg-red-200 h-64" />
    </div>
  );
}

States and Responsiveness

Tailwind also supports various state and responsive modifiers to enhance the user experience on interactions and different screen sizes. This allows you to apply these utilities conditionally, reacting to user states like hover or focus, or scaffolding your layout to shift at specific breakpoints.

Hover and Focus States

Tailwind has state modifiers like hover, focus, etc. to target these states. Prefix these modifiers to the flex basis utilities to change the basis value when a certain state is active, e.g., hover:basis-12, focus:basis-20, etc.

This is a live editor. Play around with it!
export default function StateBasis() {
  return (
    <div className="bg-gray-100 h-screen w-screen flex items-center justify-center">
      {/* flex-basis: 8rem; (96px); On hover- flex-basis: 12rem; (192px); */}
      <div className="basis-24 hover:basis-48 bg-blue-200 h-64" /> 
      {/* flex-basis: 12rem; (192px); On hover- flex-basis: 8rem; (96px) */}
      <div className="basis-48 hover:basis-24 bg-red-200 h-64" />
    </div>
  );
}

Breakpoint Modifiers

Tailwind has breakpoint modifiers to assign custom flex basis values at different breakpoints. Prefix these modifiers(sm, md, lg, etc.) to the flex basis utilities to change the basis value as the screen dimensions change, e.g., sm:basis-12, md:basis-24, lg:basis-60, etc.

This is a live editor. Play around with it!
export default function ResponsiveFlex() {
  return (
    <div className="bg-gray-100 h-screen w-screen flex items-center justify-center">
        {/* For default screens basis-24, for medium screens basis-32, for large screens basis-40 */}
        <div className="basis-24 md:basis-32 lg:basis-40 bg-blue-200 h-64" /> 
      <div className="basis-24 md:basis-32 lg:basis-40 bg-red-200 h-64" />
    </div>
  );
}

Custom Flex Basis

Tailwind allows you to define custom flex-basis values when the pre-defined utilities don’t meet your needs. These custom values can be added to the configuration file and then used directly in your markup. Alternatively, for quick, one-time adjustments where updating the theme is too much effort, you can use arbitrary values for greater flexibility.

Extending the Theme

Tailwind’s configuration file (tailwind.config.js) provides a convenient route for customizing your theme. By introducing a fresh set of values under the flexBasis section (within the theme.extend key), you can map your own unique classes.

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

export default function CustomBasisLayout() {
  return (
    <div className="bg-gray-100 h-screen w-screen flex items-center justify-center p-6">
      <div className="basis-75 bg-blue-200 h-64" /> 
      <div className="basis-35 bg-red-200 h-64" />
    </div>
  );
}

Using Arbitrary Values

Sometimes you require a precise number or fraction that doesn’t exist in Tailwind’s defaults or even your extended theme. Tailwind also supports arbitrary values, letting you specify exact flex-basis values when the situation calls for it.

This is a live editor. Play around with it!
export default function ArbitraryFlexBasis() {
  return (
    <div className="bg-gray-100 h-screen w-screen flex items-center justify-center p-6">
      <div className="basis-[75px] bg-blue-200 h-64" /> 
      <div className="basis-[135px] bg-red-200 h-64" />
    </div>
  );
}

Real World Examples

Product Comparison Cards

A flexible product comparison layout where each card has a fixed basis width but can grow based on content.

This is a live editor. Play around with it!
export default function ProductComparison() {
  const products = [
    {
      name: "Premium Laptop",
      price: "$1299",
      rating: 4.8,
      src: "https://images.unsplash.com/photo-1487017159836-4e23ece2e4cf",
      alt: "Premium laptop on wooden desk",
      specs: ["16GB RAM", "512GB SSD", "4.5GHz CPU"]
    },
    {
      name: "Standard Laptop",
      price: "$899",
      rating: 4.5,
      src: "https://images.unsplash.com/photo-1496181133206-80ce9b88a853",
      alt: "Standard laptop model",
      specs: ["8GB RAM", "256GB SSD", "3.8GHz CPU"]
    },
    {
      name: "Budget Laptop",
      price: "$599",
      rating: 4.2,
      src: "https://images.unsplash.com/photo-1541807084-5c52b6b3adef",
      alt: "Budget laptop display",
      specs: ["4GB RAM", "128GB SSD", "2.4GHz CPU"]
    }
  ];

  return (
    <div className="flex flex-wrap gap-4 p-6">
      {products.map((product) => (
        <div key={product.name} className="basis-36 grow-0 shrink-0 bg-white rounded-lg shadow-lg p-4">
          <img src={product.src} alt={product.alt} className="w-full h-48 object-cover rounded-md" />
          <h3 className="text-xl font-bold mt-4">{product.name}</h3>
          <p className="text-2xl text-blue-600">{product.price}</p>
          <div className="mt-4">
            {product.specs.map((spec) => (
              <span key={spec} className="inline-block bg-gray-100 px-3 py-1 rounded-full text-sm mr-2 mb-2">
                {spec}
              </span>
            ))}
          </div>
        </div>
      ))}
    </div>
  );
}

Team Member Directory

A responsive team directory with flex-basis controlling card sizes for different screen sizes.

This is a live editor. Play around with it!
export default function TeamDirectory() {
  const team = [
    {
      name: "Sarah Johnson",
      role: "CEO",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile photo",
      department: "Executive",
      location: "New York"
    },
    {
      name: "Michael Chen",
      role: "CTO",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "Michael Chen profile photo",
      department: "Technology",
      location: "San Francisco"
    },
    {
      name: "Emily Rodriguez",
      role: "Design Director",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Emily Rodriguez profile photo",
      department: "Design",
      location: "London"
    },
    {
      name: "James Wilson",
      role: "Sales Director",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "James Wilson profile photo",
      department: "Sales",
      location: "Chicago"
    }
  ];

  return (
    <div className="bg-gray-100 p-8">
      <div className="flex flex-wrap gap-6">
        {team.map((member) => (
          <div key={member.name} className="basis-64 grow shrink-0 bg-white rounded-xl overflow-hidden shadow-md">
            <img src={member.src} alt={member.alt} className="w-full h-64 object-cover" />
            <div className="p-4">
              <h3 className="font-bold text-lg">{member.name}</h3>
              <p className="text-blue-600">{member.role}</p>
              <div className="mt-4 flex flex-col gap-2">
                <span className="text-sm text-gray-600">{member.department}</span>
                <span className="text-sm text-gray-600">{member.location}</span>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Feature Showcase Grid

A feature showcase with varying flex-basis values for different content types.

This is a live editor. Play around with it!
export default function FeatureShowcase() {
  const features = [
    {
      title: "Cloud Storage",
      description: "Secure and scalable storage solutions for your business",
      icon: "https://images.unsplash.com/photo-1590859808308-3d2d9c515b1a",
      alt: "Cloud storage icon",
      category: "Infrastructure"
    },
    {
      title: "Analytics Dashboard",
      description: "Real-time insights and data visualization",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics dashboard icon",
      category: "Business Intelligence"
    },
    {
      title: "API Integration",
      description: "Seamless third-party integrations and workflows",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API integration icon",
      category: "Development"
    },
    {
      title: "24/7 Support",
      description: "Round-the-clock technical assistance",
      icon: "https://images.unsplash.com/photo-1549923746-c502d488b3ea",
      alt: "Customer support icon",
      category: "Service"
    }
  ];

  return (
    <div className="bg-gradient-to-br from-indigo-500 to-purple-600 p-8">
      <div className="flex flex-wrap gap-8">
        {features.map((feature) => (
          <div key={feature.title} className="basis-72 grow-0 bg-white/10 backdrop-blur-lg rounded-lg p-6 text-white">
            <img src={feature.icon} alt={feature.alt} className="w-16 h-16 rounded-full mb-4" />
            <h3 className="text-xl font-bold mb-2">{feature.title}</h3>
            <p className="text-white/80 mb-4">{feature.description}</p>
            <span className="inline-block px-3 py-1 bg-white/20 rounded-full text-sm">
              {feature.category}
            </span>
          </div>
        ))}
      </div>
    </div>
  );
}

Project Timeline Cards

A horizontal scrolling timeline with fixed flex-basis for consistent card widths.

This is a live editor. Play around with it!
export default function ProjectTimeline() {
  const milestones = [
    {
      phase: "Planning",
      date: "Jan 2024",
      status: "Completed",
      tasks: ["Requirements gathering", "Resource allocation", "Timeline definition"],
      color: "green"
    },
    {
      phase: "Design",
      date: "Feb 2024",
      status: "In Progress",
      tasks: ["UI/UX design", "Architecture planning", "Prototype development"],
      color: "blue"
    },
    {
      phase: "Development",
      date: "Mar 2024",
      status: "Pending",
      tasks: ["Frontend implementation", "Backend development", "API integration"],
      color: "yellow"
    },
    {
      phase: "Testing",
      date: "Apr 2024",
      status: "Pending",
      tasks: ["Unit testing", "Integration testing", "User acceptance"],
      color: "purple"
    }
  ];

  return (
    <div className="bg-gray-50 p-6">
      <div className="flex flex-wrap gap-6 pb-4">
        {milestones.map((milestone) => (
          <div key={milestone.phase} className="basis-11/12 shrink-0 bg-white rounded-lg shadow-md p-6 border-t-4 overflow-scroll" style={{ borderColor: milestone.color }}>
            <div className="flex justify-between items-center mb-4">
              <h3 className="text-xl font-bold">{milestone.phase}</h3>
              <span className="text-sm text-gray-500">{milestone.date}</span>
            </div>
            <span className={`inline-block px-3 py-1 rounded-full text-sm mb-4 ${
              milestone.status === "Completed" ? "bg-green-100 text-green-800" :
              milestone.status === "In Progress" ? "bg-blue-100 text-blue-800" :
              "bg-gray-100 text-gray-800"
            }`}>
              {milestone.status}
            </span>
            <ul className="space-y-2">
              {milestone.tasks.map((task) => (
                <li key={task} className="flex items-center">
                  <span className="w-2 h-2 rounded-full bg-gray-400 mr-2"></span>
                  {task}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
    </div>
  );
}

Service Pricing Tiers

A pricing table with basis-full to occupy 100% available space.

This is a live editor. Play around with it!
export default function PricingTiers() {
  const plans = [
    {
      name: "Starter",
      price: "$29",
      period: "monthly",
      features: ["5 Users", "10GB Storage", "Basic Support", "Email Integration", "API Access", "Community Forums"],
      highlight: false
    },
    {
      name: "Professional",
      price: "$79",
      period: "monthly",
      features: ["25 Users", "100GB Storage", "Priority Support", "Advanced Analytics", "Custom Integration", "Training Sessions"],
      highlight: true
    },
    {
      name: "Enterprise",
      price: "$199",
      period: "monthly",
      features: ["Unlimited Users", "1TB Storage", "24/7 Support", "Custom Solutions", "Dedicated Manager", "SLA Guarantee"],
      highlight: false
    }
  ];

  return (
    <div className="bg-gray-50 p-8">
      <div className="flex flex-wrap gap-8 justify-center">
        {plans.map((plan) => (
          <div
            key={plan.name}
            className={`basis-96 grow-0 p-6 rounded-2xl ${
              plan.highlight
                ? "bg-gradient-to-br from-blue-500 to-purple-600 text-white transform scale-105"
                : "bg-white"
            }`}
          >
            <h3 className="text-2xl font-bold mb-2">{plan.name}</h3>
            <div className="mb-6">
              <span className="text-4xl font-bold">{plan.price}</span>
              <span className="text-sm">/{plan.period}</span>
            </div>
            <ul className="space-y-4 mb-8">
              {plan.features.map((feature) => (
                <li key={feature} className="flex items-center">
                  <svg
                    className={`w-5 h-5 mr-2 ${plan.highlight ? "text-white" : "text-green-500"}`}
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                  >
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M5 13l4 4L19 7" />
                  </svg>
                  {feature}
                </li>
              ))}
            </ul>
            <button
              className={`w-full py-3 rounded-lg font-bold ${
                plan.highlight
                  ? "bg-white text-blue-600"
                  : "bg-blue-600 text-white"
              }`}
            >
              Choose Plan
            </button>
          </div>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Product Card Grid with Custom Flex Basis

This example demonstrates a responsive product card grid using custom flex basis values 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,
      title: "Wireless Headphones",
      price: "$299",
      image: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
    },
    // ... more products
  ];

  return (
    <div className="container mx-auto p-6">
      <div className="flex flex-wrap gap-4">
        {products.map((product) => (
          <div
            key={product.id}
            className="basis-card-sm md:basis-card-md lg:basis-card-lg grow-0 shrink-0 bg-white rounded-xl shadow-lg"
          >
            <img
              src={product.image}
              alt={product.title}
              className="w-full h-48 object-cover rounded-t-xl"
            />
            <div className="p-4">
              <h3 className="text-xl font-semibold">{product.title}</h3>
              <p className="text-gray-600 mt-2">{product.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

Dashboard Sidebar with Dynamic Width

This example shows how to create a collapsible dashboard sidebar with custom flex basis transitions.

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

// App.js
import { useState } from 'react';

export default function DashboardLayout() {
  const [isExpanded, setIsExpanded] = useState(true);

  return (
    <div className="flex h-screen">
      <aside
        className={`
          transition-all duration-300 ease-in-out
          basis-sidebar-collapsed
          ${isExpanded ? 'basis-sidebar-expanded' : 'basis-sidebar-collapsed'}
          bg-gray-900 text-white
        `}
      >
        <button
          onClick={() => setIsExpanded(!isExpanded)}
          className="w-full p-4 hover:bg-gray-800"
        >
          <img
            src="https://images.unsplash.com/photo-1518780664697-55e3ad937233"
            alt="toggle"
            className="w-6 h-6"
          />
        </button>
        <nav className="mt-6">
          {/* Navigation items */}
          <ul className="px-4 text-xs text-gray-50 font-[Inter] flex flex-col gap-4">
            <li>Getting Started</li>
            <li>Components</li>
            <li>Styling</li>
            <li>Hooks</li>
            <li>API Reference</li>
            <li>Deployment</li>
        </ul>
        </nav>
      </aside>
      <main className="flex-1 bg-gray-100 p-6">
        {/* Main content */}
      </main>
    </div>
  );
}

Gallery Masonry Layout with Variable Widths

This example creates a responsive masonry-style gallery using custom flex basis values.

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

// App.js
export default function GalleryMasonry() {
  const images = [
    {
      id: 1,
      size: 'small',
      url: "https://images.unsplash.com/photo-1501785888041-af3ef285b470",
    },
    {
      id: 2,
      size: 'medium',
      url: "https://images.unsplash.com/photo-1449034446853-66c86144b0ad",
    },
    {
      id: 3,
      size: 'large',
      url: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05",
    },
    // ... more images
  ];

  const getSizeClass = (size) => {
    switch (size) {
      case 'small':
        return 'basis-gallery-small';
      case 'medium':
        return 'basis-gallery-medium';
      case 'large':
        return 'basis-gallery-large';
      default:
        return 'basis-gallery-medium';
    }
  };

  return (
    <div className="container mx-auto p-6">
      <div className="flex flex-wrap gap-4 justify-center">
        {images.map((image) => (
          <div
            key={image.id}
            className={`
              ${getSizeClass(image.size)}
              grow-0 shrink-0
              transition-transform duration-300
              hover:scale-105
            `}
          >
            <img
              src={image.url}
              alt={`Gallery item ${image.id}`}
              className="w-full h-full object-cover rounded-lg shadow-lg"
            />
          </div>
        ))}
      </div>
    </div>
  );
}

Best Practices

Maintain Design Consistency

To ensure design consistency, apply the same flex-basis rules to similar elements such as cards, buttons, or images. Tailwind’s basis-* utilities allow you to define consistent sizes, such as basis-1/4 for equally sized cards or basis-auto for dynamic content. Using responsive variants like sm:basis-1/3 md:basis-1/4 ensures layouts adapt seamlessly across different screen sizes.

If required, you can define project-specific reusable class names for recurring patterns that cannot be easily expressed with utility classes. For example, you might create classes like card-layout-sm, card-layout-md, and card-layout-lg for consistent card sizes at different breakpoints.

Testing layouts across different screen sizes is another critical step in maintaining consistency. Ensure that the utilities adapt well to varying viewport dimensions, avoiding unpredictable behavior or misaligned elements in responsive designs.

Leverage Utility Combinations

Combining flex basis with other utilities like grow, shrink, and alignment classes allows you to create powerful and visually appealing layouts. For example, using basis-1/3 alongside grow ensures that each item in a row starts at one-third width but can expand to fill additional space if available. This is particularly useful for layouts with variable content.

Additionally, pairing basis utilities with responsive prefixes (sm:basis-1/2, lg:basis-1/4) allows you to adapt layouts to different screen sizes.

Use these combinations strategically to maintain simplicity and clarity in your code. Avoid overloading components with unnecessary utilities, as this can make your layout harder to maintain and debug.

Accessibility Considerations

Support Accessible Interactive Elements

Interactive elements like modals, forms, and dropdown menus benefit from precise size control using flex basis utilities.

For example, when designing navigation menus, use basis utilities to ensure consistent spacing between menu items. Additionally, apply spacing classes (gap-4, px-2) to maintain a clean and organized structure, making it easier for users to navigate your interface.

Regularly test your layouts with screen readers and keyboard navigation to confirm that they provide a great experience for all users. Ensuring logical structure and spacing not only enhances accessibility but also improves the overall usability of your design.

Focus on High Contrast

Combining Tailwind’s basis-* utilities with high-contrast colors ensures your designs are both visually appealing and accessible to all users. For example, in a form layout, using basis-1/2 for buttons can provide consistent sizing and alignment, making the buttons more prominent. Pair this with strong color contrasts, such as a dark background (e.g., bg-gray-900) and light text (e.g., text-white), or the reverse, to improve readability and accessibility.

To ensure your designs meet accessibility standards, test them under high-contrast settings and extreme zoom levels. Thoughtful use of basis-* helps prioritize essential content by structuring layouts clearly, while high-contrast color combinations ensure that users with low vision can easily identify and interact with key elements. Together, these strategies create layouts that are both functional and inclusive.

FlexFlex Grow

Resources

DocsBlogEmail Templates

Legal Stuff

Terms & ConditionsPrivacy PolicyAcceptable Use Policy