Menu

Tailwind CSS Order

The order property in CSS plays a crucial role in defining how flex and grid items are laid out within their container. By default, items are arranged in the order they appear in the markup. However, the order property provides a way to rearrange items visually without changing the source HTML structure. Tailwind CSS simplifies this with a range of utility classes for controlling the order property, catering to both simple and advanced layouts.

In this document, we'll dive into the mechanics of order utilities in Tailwind CSS, examining their usage with flex and grid containers, applying conditional logic based on states, and customizing the order for specific needs.

ClassPropertiesExample
order-1order: 1;<div className="order-1"></div>
order-2order: 2;<div className="order-2"></div>
order-3order: 3;<div className="order-3"></div>
order-4order: 4;<div className="order-4"></div>
order-5order: 5;<div className="order-5"></div>
order-6order: 6;<div className="order-6"></div>
order-7order: 7;<div className="order-7"></div>
order-8order: 8;<div className="order-8"></div>
order-9order: 9;<div className="order-9"></div>
order-10order: 10;<div className="order-10"></div>
order-11order: 11;<div className="order-11"></div>
order-12order: 12;<div className="order-12"></div>
order-firstorder: -9999;<div className="order-first"></div>
order-lastorder: 9999;<div className="order-last"></div>
order-noneorder: 0;<div className="order-none"></div>

Overview of Order

Tailwind CSS offers utility classes to control the order property seamlessly, making it straightforward to reorganize content dynamically. Here's how to get started with adding order adjustments:

Adding the Order

Reordering items in flex and grid layouts is simple using Tailwind's utilities. By assigning order values to items, you can dictate their rendered position, overriding the natural flow of the document.

This is a live editor. Play around with it!
export default function OrderDemo() {
  return (
    <div className="flex h-screen w-screen gap-4">
      {/* First item */}
      <div className="order-3 bg-blue-200 flex justify-center items-center h-28 w-28">
        Box 1
      </div>

      {/* Second item */}
      <div className="order-1 bg-green-200 flex justify-center items-center h-28 w-28">
        Box 2
      </div>

      {/* Third item */}
      <div className="order-2 bg-yellow-200 flex justify-center items-center h-28 w-28">
        Box 3
      </div>
    </div>
  );
}

Adding the Negative Order

Sometimes, negative ordering is essential when you need certain elements to appear before others. Tailwind simplifies this with negative utility classes.

This is a live editor. Play around with it!
export default function NegativeOrder() {
  return (
    <div className="flex h-screen w-screen gap-4">
      {/* First item */}
      <div className="order-1 bg-blue-200 flex justify-center items-center h-28 w-28">
        Box 1
      </div>

      {/* Second item */}
      <div className="-order-2 bg-green-200 flex justify-center items-center h-28 w-28">
        Box 2
      </div>

      {/* Third item */}
      <div className="order-1 bg-yellow-200 flex justify-center items-center h-28 w-28">
        Box 3
      </div>
    </div>
  );
}

States and Responsiveness

Tailwind CSS order utilities integrate seamlessly with responsive design principles and dynamic states.

Hover and Focus States

Dynamic states like hover or focus enable reordering items based on user interactions. This technique is useful for creating engaging and interactive layouts.

This is a live editor. Play around with it!
export default function HoverOrder() {
  return (
    <div className="flex h-screen w-screen gap-4">
      {/* First item */}
      <div className="hover:order-3 bg-blue-200 flex justify-center items-center h-28 w-28">
        Box 1
      </div>

      {/* Second item */}
      <div className="bg-green-200 flex justify-center items-center h-28 w-28">
        Box 2
      </div>

      {/* Third item */}
      <div className="bg-yellow-200 flex justify-center items-center h-28 w-28">
        Box 3
      </div>
    </div>
  );
}

Breakpoint Modifiers

Tailwind enables applying order preferences based on viewport size with responsive classes. This is achieved via breakpoint modifiers such as sm:, md:, and lg:.

This is a live editor. Play around with it!
export default function ResponsiveOrder() {
  return (
    <div className="flex h-screen w-screen gap-4">
      {/* First item */}
      <div className="lg:order-3 bg-blue-200 flex justify-center items-center h-28 w-28">
        Box 1
      </div>

      {/* Second item */}
      <div className="bg-green-200 flex justify-center items-center h-28 w-28">
        Box 2
      </div>

      {/* Third item */}
      <div className="bg-yellow-200 flex justify-center items-center h-28 w-28">
        Box 3
      </div>
    </div>
  );
}

Custom Order

For more flexibility, Tailwind's configuration allows extending or specifying custom order values in your project.

Extending the Theme

The order utility set can be extended or customized by modifying the Tailwind theme configuration. This is particularly useful for integrating project-specific naming conventions or values.

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

export default function CustomOrder() {
  return (
    <div className="flex h-screen w-screen gap-4">
      {/* First item */}
      <div className="order-custom-large bg-blue-200 flex justify-center items-center h-28 w-28">
        Box 1
      </div>
      {/* Second item */}
      <div className="order-custom bg-green-200 flex justify-center items-center h-28 w-28">
        Box 2
      </div>

      {/* Third item */}
      <div className="bg-yellow-200 flex justify-center items-center h-28 w-28">
        Box 3
      </div>
    </div>
  );
}

Using Arbitrary Values

For scenarios requiring precise control, arbitrary values can be powerful. These values override the predefined set, ensuring ultimate customization flexibility.

This is a live editor. Play around with it!
export default function ArbitraryOrder() {
  return (
    <div className="flex h-screen gap-4 w-screen">
      {/* First item */}
      <div className="order-[9] bg-blue-200 flex justify-center items-center h-28 w-28">
        Box 1
      </div>

      {/* Second item */}
      <div className="order-custom bg-green-200 flex justify-center items-center h-28 w-28">
        Box 2
      </div>

      {/* Third item */}
      <div className="order-custom-large bg-yellow-200 flex justify-center items-center h-28 w-28">
        Box 3
      </div>
    </div>
  );
}

Real World Examples

A dynamic product grid layout where featured items appear first in the order using Tailwind's order utilities.

This is a live editor. Play around with it!
export default function FeaturedProductGrid() {
  const products = [
    {
      id: 1,
      name: "Premium Wireless Headphones",
      price: "$299.99",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Premium wireless headphones in black"
    },
    {
      id: 2,
      name: "Smart Watch Pro",
      price: "$199.99",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1546868871-7041f2a55e12",
      alt: "Smart watch with black strap"
    },
    {
      id: 3,
      name: "Bluetooth Speaker",
      price: "$89.99",
      isFeatured: true,
      src: "https://images.unsplash.com/photo-1608043152269-423dbba4e7e1",
      alt: "Portable bluetooth speaker"
    },
    {
      id: 4,
      name: "Wireless Earbuds",
      price: "$159.99",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1590658268037-6bf12165a8df",
      alt: "White wireless earbuds"
    },
    {
      id: 5,
      name: "Gaming Mouse",
      price: "$79.99",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1527814050087-3793815479db",
      alt: "RGB gaming mouse"
    },
    {
      id: 6,
      name: "Mechanical Keyboard",
      price: "$129.99",
      isFeatured: false,
      src: "https://images.unsplash.com/photo-1511467687858-23d96c32e4ae",
      alt: "Mechanical gaming keyboard"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-4 p-6">
      {products.map((product) => (
        <div
          key={product.id}
          className={`bg-white rounded-lg shadow-lg ${
            product.isFeatured ? 'order-first md:col-span-3' : 'order-last'
          }`}
        >
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-48 object-cover rounded-t-lg"
          />
          <div className="p-4">
            <h3 className="text-xl font-bold">{product.name}</h3>
            <p className="text-gray-600">{product.price}</p>
            {product.isFeatured && (
              <span className="bg-yellow-400 text-xs px-2 py-1 rounded-full">
                Featured
              </span>
            )}
          </div>
        </div>
      ))}
    </div>
  );
}

Priority Navigation Menu

A responsive navigation menu that prioritizes important items using order classes.

This is a live editor. Play around with it!
export default function PriorityNavigation() {
  const menuItems = [
    {
      id: 1,
      name: "Dashboard",
      priority: "high",
      icon: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
    },
    {
      id: 2,
      name: "Analytics",
      priority: "medium",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71"
    },
    {
      id: 3,
      name: "Settings",
      priority: "high",
      icon: "https://images.unsplash.com/photo-1537432376769-00f5c2f4c8d2"
    },
    {
      id: 4,
      name: "Messages",
      priority: "medium",
      icon: "https://images.unsplash.com/photo-1557200134-90327ee9fafa"
    },
    {
      id: 5,
      name: "Profile",
      priority: "low",
      icon: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7"
    },
    {
      id: 6,
      name: "Help",
      priority: "low",
      icon: "https://images.unsplash.com/photo-1486312338219-ce68d2c6f44d"
    }
  ];

  return (
    <nav className="bg-gray-800 p-4">
      <div className="flex flex-wrap items-center justify-start gap-4">
        {menuItems.map((item) => (
          <a
            key={item.id}
            href="#"
            className={`
              flex items-center text-white px-4 py-2 rounded-lg
              ${item.priority === 'high' ? 'order-first bg-blue-600' : ''}
              ${item.priority === 'medium' ? 'order-2 bg-gray-700' : ''}
              ${item.priority === 'low' ? 'order-last bg-gray-600' : ''}
            `}
          >
            <img
              src={item.icon}
              alt={item.name}
              className="w-5 h-5 mr-2 rounded"
            />
            {item.name}
          </a>
        ))}
      </div>
    </nav>
  );
}

Social Media Feed Layout

A social media feed that orders posts based on engagement levels.

This is a live editor. Play around with it!
export default function SocialFeed() {
  const posts = [
    {
      id: 1,
      author: "Jane Cooper",
      content: "Just launched my new portfolio!",
      engagement: "high",
      likes: 1542,
      comments: 89,
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      image: "https://images.unsplash.com/photo-1498050108023-c5249f4df085"
    },
    {
      id: 2,
      author: "John Smith",
      content: "Check out this amazing sunset!",
      engagement: "high",
      likes: 982,
      comments: 45,
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      image: "https://images.unsplash.com/photo-1472214103451-9374bd1c798e"
    },
    {
      id: 3,
      author: "Sarah Williams",
      content: "New recipe just posted!",
      engagement: "medium",
      likes: 456,
      comments: 23,
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      image: "https://images.unsplash.com/photo-1467003909585-2f8a72700288"
    },
    {
      id: 4,
      author: "Mike Johnson",
      content: "Working on a new project",
      engagement: "medium",
      likes: 234,
      comments: 12,
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      image: "https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
    },
    {
      id: 5,
      author: "Emily Brown",
      content: "Happy Monday everyone!",
      engagement: "low",
      likes: 89,
      comments: 5,
      avatar: "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e",
      image: "https://images.unsplash.com/photo-1497032628192-86f99bcd76bc"
    },
    {
      id: 6,
      author: "David Wilson",
      content: "Coffee time ☕",
      engagement: "low",
      likes: 67,
      comments: 3,
      avatar: "https://images.unsplash.com/photo-1527980965255-d3b416303d12",
      image: "https://images.unsplash.com/photo-1495474472287-4d71bcdd2085"
    }
  ];

  return (
    <div className="max-w-2xl mx-auto p-4 space-y-4">
      {posts.map((post) => (
        <div
          key={post.id}
          className={`bg-white rounded-xl shadow-md p-4
            ${post.engagement === 'high' ? 'order-first' : ''}
            ${post.engagement === 'medium' ? 'order-2' : ''}
            ${post.engagement === 'low' ? 'order-last' : ''}
          `}
        >
          <div className="flex items-center mb-4">
            <img
              src={post.avatar}
              alt={post.author}
              className="w-10 h-10 rounded-full mr-3"
            />
            <span className="font-semibold">{post.author}</span>
          </div>
          <img
            src={post.image}
            alt="Post content"
            className="w-full h-64 object-cover rounded-lg mb-4"
          />
          <p className="text-gray-800 mb-3">{post.content}</p>
          <div className="flex justify-between text-gray-500">
            <span>{post.likes} likes</span>
            <span>{post.comments} comments</span>
          </div>
        </div>
      ))}
    </div>
  );
}

Task Priority Board

A kanban-style board that orders tasks based on priority levels.

This is a live editor. Play around with it!
export default function TaskBoard() {
  const tasks = [
    {
      id: 1,
      title: "Fix Critical Security Bug",
      priority: "urgent",
      deadline: "Today",
      assignee: "John Doe",
      avatar: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e"
    },
    {
      id: 2,
      title: "Deploy Production Update",
      priority: "urgent",
      deadline: "Tomorrow",
      assignee: "Jane Smith",
      avatar: "https://images.unsplash.com/photo-1494790108377-be9c29b29330"
    },
    {
      id: 3,
      title: "Review Pull Requests",
      priority: "high",
      deadline: "This Week",
      assignee: "Mike Brown",
      avatar: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e"
    },
    {
      id: 4,
      title: "Update Documentation",
      priority: "low",
      deadline: "Next Week",
      assignee: "Sarah Wilson",
      avatar: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80"
    },
    {
      id: 5,
      title: "Plan Next Sprint",
      priority: "medium",
      deadline: "Next Month",
      assignee: "David Lee",
      avatar: "https://images.unsplash.com/photo-1527980965255-d3b416303d12"
    },
    {
      id: 6,
      title: "Team Building Activity",
      priority: "low",
      deadline: "Next Month",
      assignee: "Emily Chen",
      avatar: "https://images.unsplash.com/photo-1544725176-7c40e5a71c5e"
    }
  ];

  return (
    <div className="bg-gray-100 p-6">
      <div className="grid gap-4">
        {tasks.map((task) => (
          <div
            key={task.id}
            className={`
              bg-white rounded-lg p-4 shadow-md
              ${task.priority === 'urgent' ? 'order-first border-l-4 border-red-500' : ''}
              ${task.priority === 'high' ? 'order-2 border-l-4 border-orange-500' : ''}
              ${task.priority === 'medium' ? 'order-3 border-l-4 border-yellow-500' : ''}
              ${task.priority === 'low' ? 'order-last border-l-4 border-green-500' : ''}
            `}
          >
            <div className="flex justify-between items-start mb-3">
              <h3 className="font-bold text-lg">{task.title}</h3>
              <span className={`
                px-2 py-1 rounded-full text-xs
                ${task.priority === 'urgent' ? 'bg-red-100 text-red-800' : ''}
                ${task.priority === 'high' ? 'bg-orange-100 text-orange-800' : ''}
                ${task.priority === 'medium' ? 'bg-yellow-100 text-yellow-800' : ''}
                ${task.priority === 'low' ? 'bg-green-100 text-green-800' : ''}
              `}>
                {task.priority}
              </span>
            </div>
            <div className="flex justify-between items-center">
              <div className="flex items-center">
                <img
                  src={task.avatar}
                  alt={task.assignee}
                  className="w-8 h-8 rounded-full mr-2"
                />
                <span className="text-gray-600 text-sm">{task.assignee}</span>
              </div>
              <span className="text-gray-500 text-sm">{task.deadline}</span>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
}

News Article Layout

A news feed that orders articles based on their importance and publish time.

This is a live editor. Play around with it!
export default function NewsLayout() {
  const articles = [
    {
      id: 1,
      title: "Breaking: Major Technology Breakthrough",
      category: "Breaking News",
      importance: "breaking",
      author: "John Anderson",
      time: "10 minutes ago",
      image: "https://images.unsplash.com/photo-1518770660439-4636190af475",
      excerpt: "Scientists announce revolutionary quantum computing advancement..."
    },
    {
      id: 2,
      title: "Global Climate Summit Results",
      category: "World News",
      importance: "featured",
      author: "Sarah Chen",
      time: "1 hour ago",
      image: "https://images.unsplash.com/photo-1536697246787-1f7ae568d89a",
      excerpt: "World leaders agree on new climate action framework..."
    },
    {
      id: 3,
      title: "New Economic Policy Announced",
      category: "Economics",
      importance: "breaking",
      author: "Michael Brown",
      time: "2 hours ago",
      image: "https://images.unsplash.com/photo-1526304640581-d334cdbbf45e",
      excerpt: "Government reveals new economic stimulus package..."
    },
    {
      id: 4,
      title: "Sports Championship Results",
      category: "Sports",
      importance: "regular",
      author: "David Wilson",
      time: "3 hours ago",
      image: "https://images.unsplash.com/photo-1461896836934-ffe607ba8211",
      excerpt: "Unexpected victory in championship finals..."
    },
    {
      id: 5,
      title: "Entertainment Industry Updates",
      category: "Entertainment",
      importance: "regular",
      author: "Emily Roberts",
      time: "4 hours ago",
      image: "https://images.unsplash.com/photo-1516450360452-9312f5e86fc7",
      excerpt: "Major changes in streaming service landscape..."
    },
    {
      id: 6,
      title: "Local Community Event",
      category: "Local News",
      importance: "standard",
      author: "Lisa Thompson",
      time: "5 hours ago",
      image: "https://images.unsplash.com/photo-1511795409834-ef04bbd61622",
      excerpt: "Annual community festival announces new attractions..."
    }
  ];

  return (
    <div className="max-w-6xl mx-auto p-6">
      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        {articles.map((article) => (
          <article
            key={article.id}
            className={`
              bg-white rounded-xl shadow-lg overflow-hidden
              ${article.importance === 'breaking' ? 'order-first md:col-span-2 lg:col-span-3' : ''}
              ${article.importance === 'featured' ? 'order-2 md:col-span-2' : ''}
              ${article.importance === 'important' ? 'order-3' : ''}
              ${article.importance === 'regular' ? 'order-4' : ''}
              ${article.importance === 'standard' ? 'order-last' : ''}
            `}
          >
            <img
              src={article.image}
              alt={article.title}
              className="w-full h-48 object-cover"
            />
            <div className="p-4">
              <div className="flex justify-between items-center mb-2">
                <span className={`
                  text-xs px-2 py-1 rounded-full
                  ${article.importance === 'breaking' ? 'bg-red-100 text-red-800' : ''}
                  ${article.importance === 'featured' ? 'bg-purple-100 text-purple-800' : ''}
                  ${article.importance === 'important' ? 'bg-blue-100 text-blue-800' : ''}
                  ${article.importance === 'regular' ? 'bg-green-100 text-green-800' : ''}
                  ${article.importance === 'standard' ? 'bg-gray-100 text-gray-800' : ''}
                `}>
                  {article.category}
                </span>
                <span className="text-gray-500 text-sm">{article.time}</span>
              </div>
              <h2 className="text-xl font-bold mb-2">{article.title}</h2>
              <p className="text-gray-600 mb-4">{article.excerpt}</p>
              <div className="flex items-center text-sm text-gray-500">
                <span>By {article.author}</span>
              </div>
            </div>
          </article>
        ))}
      </div>
    </div>
  );
}

Customization Examples

Responsive Grid Order Layout

This example demonstrates how to create a responsive grid layout with custom order 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 ResponsiveGridOrder() {
  return (
    <div className="container mx-auto p-6">
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        <div className="bg-blue-100 p-6 rounded-lg order-end md:order-early">
          <img 
            src="https://images.unsplash.com/photo-1516156008625-3a9d6067fab5"
            alt="Feature One"
            className="w-full h-48 object-cover rounded-md"
          />
          <h2 className="text-xl font-bold mt-4">Feature One</h2>
          <p className="text-gray-600">Reordered based on screen size</p>
        </div>
        <div className="bg-blue-200 p-6 rounded-lg order-start md:order-normal">
          <img 
            src="https://images.unsplash.com/photo-1506157786151-b8491531f063"
            alt="Feature Two"
            className="w-full h-48 object-cover rounded-md"
          />
          <h2 className="text-xl font-bold mt-4">Feature Two</h2>
          <p className="text-gray-600">Primary content section</p>
        </div>
        <div className="bg-blue-300 p-6 rounded-lg order-normal md:order-last">
          <img 
            src="https://images.unsplash.com/photo-1624996379697-f01d168b1a52"
            alt="Feature Three"
            className="w-full h-48 object-cover rounded-md"
          />
          <h2 className="text-xl font-bold mt-4">Feature Three</h2>
          <p className="text-gray-600">Flexible positioning element</p>
        </div>
      </div>
    </div>
  )
}

Priority-Based Card Ordering

This example shows how to implement a priority-based card system using custom order values.

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

// App.js
export default function PriorityCards() {
  return (
    <div className="max-w-4xl mx-auto p-8">
      <div className="flex flex-col gap-4">
        <div className="bg-red-100 p-6 rounded-xl shadow-lg order-priority-high">
          <div className="flex items-center gap-4">
            <div>
              <span className="inline-block px-3 py-1 bg-red-500 text-white rounded-full text-sm">High Priority</span>
              <h3 className="text-xl font-bold mt-2">Urgent Task</h3>
            </div>
          </div>
        </div>

        <div className="bg-yellow-100 p-6 rounded-xl shadow-lg order-priority-medium">
          <div className="flex items-center gap-4">
            <div>
              <span className="inline-block px-3 py-1 bg-yellow-500 text-white rounded-full text-sm">Medium Priority</span>
              <h3 className="text-xl font-bold mt-2">Important Task</h3>
            </div>
          </div>
        </div>

        <div className="bg-green-100 p-6 rounded-xl shadow-lg order-priority-low">
          <div className="flex items-center gap-4">
            <div>
              <span className="inline-block px-3 py-1 bg-green-500 text-white rounded-full text-sm">Low Priority</span>
              <h3 className="text-xl font-bold mt-2">Regular Task</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}

Dynamic Content Reordering

This example demonstrates how to create a dynamic content layout with custom ordering for different content types.

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

// App.js
export default function DynamicContent() {
  return (
    <div className="bg-gray-100 min-h-screen p-8">
      <div className="max-w-6xl mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
        <div className="col-span-1 md:col-span-2 lg:col-span-3 bg-white rounded-2xl shadow-xl p-8 order-featured">
          <img 
            src="https://images.unsplash.com/photo-1492724441997-5dc865305da7"
            alt="Featured Content"
            className="w-full h-64 object-cover rounded-xl"
          />
          <h2 className="text-3xl font-bold mt-6">Featured Article</h2>
          <p className="text-gray-600 mt-4">Premium content positioned at the top</p>
        </div>

        <div className="bg-white rounded-2xl shadow-xl p-6 order-primary">
          <img 
            src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853"
            alt="Primary Content"
            className="w-full h-48 object-cover rounded-xl"
          />
          <h3 className="text-xl font-bold mt-4">Primary Content</h3>
          <p className="text-gray-600 mt-2">High-value content section</p>
        </div>

        <div className="bg-white rounded-2xl shadow-xl p-6 order-secondary">
          <img 
            src="https://images.unsplash.com/photo-1498050108023-c5249f4df085"
            alt="Secondary Content"
            className="w-full h-48 object-cover rounded-xl"
          />
          <h3 className="text-xl font-bold mt-4">Secondary Content</h3>
          <p className="text-gray-600 mt-2">Supporting content area</p>
        </div>

        <div className="bg-white rounded-2xl shadow-xl p-6 order-tertiary">
          <img 
            src="https://images.unsplash.com/photo-1517694712202-14dd9538aa97"
            alt="Tertiary Content"
            className="w-full h-48 object-cover rounded-xl"
          />
          <h3 className="text-xl font-bold mt-4">Tertiary Content</h3>
          <p className="text-gray-600 mt-2">Additional information section</p>
        </div>
      </div>
    </div>
  )
}

Best Practices

Maintain Design Consistency

When leveraging the order utilities in Tailwind CSS, it is essential to maintain visual and structural consistency throughout your UI design. Consistency simplifies both development and user experience, ensuring layouts are predictable.

For instance, when managing complex flex or grid structures, clearly define an ordering standard that aligns with your design system. Utilize Tailwind's predefined order classes like order-1, order-2, etc., to establish a logical hierarchy across components.

Design consistency can also be supported by customizing the order values in the Tailwind configuration to match project conventions. For instance, setting named values such as 'header', 'footer', and 'aside' can clarify the purpose of each element in your design structure. Always test across different UI components to ensure that applying order does not disrupt overall layout guidelines.

Optimize for Reusability

When you’re building components that rely on order utilities, it’s wise to plan for reuse and scalability. Often, you’ll find that a particular card layout or grid arrangement needs to be reused in multiple contexts across a large application.

For such cases, consider using a custom utility. For instance, you might define a utility group like .promo-card that consistently enforces the same spacing, alignment, and ordering rules across product promotions. By abstracting these classes into a single utility, you make it much easier to manage changes in the future.

Accessibility Considerations

Enhance Readability and Navigability

Reordering elements visually can have unintended consequences for users who rely on screen readers or other assistive technologies. Although the CSS order property changes how content is displayed, the underlying DOM order remains the same. Screen readers will still read content in its original sequence, which may confuse users if the visual presentation differs significantly from the logical order.

Hence, the best practice is to rely on semantic HTML structure and only use reordering sparingly. If you must reorder an element that is critical to user understanding—such as moving a form field or a CTA higher in the visible layout—consider whether it would be more appropriate to re-architect the HTML to reflect that new order. Conversely, if reordering is strictly a stylistic choice (e.g., reordering purely decorative images), it’s less likely to impact the user’s comprehension.

Ensure Keyboard Accessibility

Whenever you reorder items, confirm that it does not disrupt the intuitive tab flow or visually misalign crucial elements from their focus states. In a typical page flow, pressing the Tab key will move through elements in the order they appear in the DOM, not the order in which they appear on screen.

A best practice is to re-check the tab sequence after applying order-* utilities. Ensure that the visually topmost (or leftmost) focusable elements receive keyboard focus before those positioned lower (or to the right). If you find discrepancies, you might need to revert to a more logical DOM order or find alternative layout strategies.