Tailwind CSS Box Decoration Break
The box-decoration-break property is used to define how a box's decorations (like borders, backgrounds, padding, etc.) behave when the box fragments into several pieces. Tailwind CSS simplifies working with this property by providing utility classes that allow developers to specify consistent and proper decoration behavior for fragmented elements directly in their design system.
These utilities give you the ability to toggle between two primary behaviors: maintaining decoration continuity across fragments or resetting decorations independently for each fragment.
| Class | Properties | Example |
|---|---|---|
box-decoration-clone | box-decoration-break: clone; | <div className="box-decoration-clone"></div> |
box-decoration-slice | box-decoration-break: slice; | <div className="box-decoration-slice"></div> |
Overview of Box Decoration Break
Adding the Box Decoration Break
To add the box decoration break, use Tailwind's dedicated utility classes, box-decoration-slice or box-decoration-clone, to control how decorations behave for fractured boxes.
export default function BoxDecorationDemo() { return ( <div className="h-screen w-screen flex flex-col items-center justify-center gap-12 bg-gray-100 p-8"> <div className="space-y-4"> <p className="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-4 rounded-lg inline leading-[60px] text-lg box-decoration-clone shadow-lg"> This example shows how each line maintains its own gradient! </p> </div> </div> ); }
States and Responsiveness
Hover and Focus States
Tailwind allows you to conditionally apply the box decoration break on certain states like hover and focus. Use Tailwind's state modifiers like- hover, focus, etc. to apply the utility only when these states are active, e.g., hover:box-decoration-slice.
export default function HoverFocusStates() { return ( <div className="h-screen w-screen flex flex-col items-center justify-center gap-12 bg-gray-100 p-8"> <div className="space-y-4"> <p className="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-4 rounded-lg inline leading-[60px] text-lg hover:box-decoration-clone shadow-lg"> This container will change its <code>box-decoration-break</code> on hover </p> </div> </div> ); }
Breakpoint Modifiers
Tailwind CSS provides breakpoint modifiers to conditionally apply the box decoration break only when the screen hits the defined breakpoint. This is especially helpful for applying effects only on specific screens. Use Tailwind's breakpoint modifiers like- sm, md, etc., to apply the utility only on these breakpoints and above.
export default function ResponsiveDisplay() { return ( <div className="h-screen w-screen flex flex-col items-center justify-center gap-12 bg-gray-100 p-8"> <div className="space-y-4"> <p className="bg-gradient-to-r from-purple-500 to-pink-500 text-white p-4 rounded-lg inline leading-[60px] text-lg md:box-decoration-clone shadow-lg"> This container will change its <code>box-decoration-break</code> on <code>md</code> breakpoint. </p> </div> </div> ); }
Real World Examples
Trending Books Banner
A bookstore banner component that displays trending books with gradient text that breaks properly across lines.
const TrendingBooks = () => { const books = [ { title: "The Silent Echo in the Valley of Forgotten Dreams", author: "Maya Rivers", price: "$19.99", category: "Mystery", src: "https://images.unsplash.com/photo-1544947950-fa07a98d237f", alt: "Mystery novel cover with dark tones" }, { title: "Digital Dawn: The Rise of Artificial Intelligence in Modern Society", author: "Alex Chen", price: "$24.99", category: "Sci-Fi", src: "https://images.unsplash.com/photo-1532012197267-da84d127e765", alt: "Sci-fi book with futuristic cover" }, { title: "Culinary Journey", author: "Sarah Williams", price: "$29.99", category: "Cookbook", src: "https://images.unsplash.com/photo-1589998059171-988d887df646", alt: "Cookbook with elegant design" }, { title: "Mountain Whispers", author: "John Drake", price: "$21.99", category: "Adventure", src: "https://images.unsplash.com/photo-1516979187457-637abb4f9353", alt: "Adventure book cover with mountains" }, { title: "Urban Poetry", author: "Lisa Chang", price: "$15.99", category: "Poetry", src: "https://images.unsplash.com/photo-1544947950-fa07a98d237f", alt: "Poetry book with minimalist design" }, { title: "History Unveiled", author: "Michael Roberts", price: "$27.99", category: "History", src: "https://images.unsplash.com/photo-1589998059171-988d887df646", alt: "Historical book with vintage cover" } ]; return ( <div className="w-full max-w-sm mx-auto p-4 bg-gray-50"> <h1 className="text-2xl font-bold mb-4">Trending Books</h1> <div className="space-y-4"> {books.map((book, index) => ( <div key={index} className="bg-white p-3 rounded-lg shadow-sm"> <div className="flex items-start gap-3"> <img src={book.src} alt={book.alt} className="w-16 h-20 object-cover rounded" /> <div> <h3 className="font-medium text-sm"> <span className="bg-gradient-to-r from-purple-600 to-pink-600 text-transparent bg-clip-text box-decoration-clone"> {book.title} </span> </h3> <p className="text-xs text-gray-600">{book.author}</p> <p className="text-xs text-gray-500">{book.category}</p> <p className="text-sm font-semibold text-purple-600">{book.price}</p> </div> </div> </div> ))} </div> </div> ); }; export default TrendingBooks;
Recipe Cards
A recipe component that showcases cooking instructions with highlighted text that spans multiple lines.
const RecipeCards = () => { const recipes = [ { name: "Mediterranean Quinoa Bowl with Roasted Vegetables and Tahini Dressing", time: "25 mins", difficulty: "Easy", calories: "420", src: "https://images.unsplash.com/photo-1512621776951-a57141f2eefd", alt: "Healthy quinoa bowl", category: "Healthy" }, { name: "Spicy Thai Curry", time: "35 mins", difficulty: "Medium", calories: "550", src: "https://images.unsplash.com/photo-1455619452474-d2be8b1e70cd", alt: "Thai curry dish", category: "Asian" }, { name: "Classic Margherita Pizza", time: "45 mins", difficulty: "Medium", calories: "800", src: "https://images.unsplash.com/photo-1513104890138-7c749659a591", alt: "Pizza margherita", category: "Italian" }, { name: "Green Smoothie Bowl", time: "10 mins", difficulty: "Easy", calories: "320", src: "https://images.unsplash.com/photo-1490474418585-ba9bad8fd0ea", alt: "Smoothie bowl", category: "Breakfast" }, { name: "Grilled Salmon", time: "30 mins", difficulty: "Medium", calories: "450", src: "https://images.unsplash.com/photo-1467003909585-2f8a72700288", alt: "Grilled salmon", category: "Seafood" }, { name: "Chocolate Lava Cake", time: "20 mins", difficulty: "Hard", calories: "580", src: "https://images.unsplash.com/photo-1478145046317-39f10e56b5e9", alt: "Chocolate cake", category: "Dessert" } ]; return ( <div className="w-full max-w-sm mx-auto p-4 bg-gray-50"> <h1 className="text-2xl font-bold mb-4">Featured Recipes</h1> <div className="grid gap-4"> {recipes.map((recipe, index) => ( <div key={index} className="bg-white rounded-lg overflow-hidden shadow-sm"> <img src={recipe.src} alt={recipe.alt} className="w-full h-32 object-cover" /> <div className="p-3"> <h3 className="text-sm mb-2"> <span className="bg-yellow-100 box-decoration-clone border border-black leading-[32px] px-2 py-1"> {recipe.name} </span> </h3> <div className="flex text-xs gap-2"> <span className="text-gray-600">⏱ {recipe.time}</span> <span className="text-gray-600">🔥 {recipe.calories} cal</span> <span className="text-gray-600">📊 {recipe.difficulty}</span> </div> </div> </div> ))} </div> </div> ); }; export default RecipeCards;
Property Listings
A real estate component featuring property cards with highlighted status tags that break across lines.
const PropertyListings = () => { const properties = [ { title: "Modern Downtown Loft", location: "San Francisco, CA", price: "$850,000", beds: "2", baths: "2", sqft: "1,200", status: "Just Listed - Exclusive Early Access Property with Special Financing Available", src: "https://images.unsplash.com/photo-1484154218962-a197022b5858", alt: "Modern loft interior" }, { title: "Suburban Family Home", location: "Austin, TX", price: "$550,000", beds: "4", baths: "3", sqft: "2,500", status: "Price Reduced", src: "https://images.unsplash.com/photo-1518780664697-55e3ad937233", alt: "Suburban house exterior" }, { title: "Beachfront Condo", location: "Miami, FL", price: "$975,000", beds: "3", baths: "2", sqft: "1,800", status: "New Construction", src: "https://images.unsplash.com/photo-1512917774080-9991f1c4c750", alt: "Beachfront condo view" }, { title: "Mountain View Cabin", location: "Denver, CO", price: "$425,000", beds: "2", baths: "1", sqft: "1,000", status: "Open House", src: "https://images.unsplash.com/photo-1449158743715-0a90ebb6d2d8", alt: "Mountain cabin" }, { title: "Historic Brownstone", location: "Boston, MA", price: "$1,200,000", beds: "3", baths: "2.5", sqft: "2,200", status: "Must See", src: "https://images.unsplash.com/photo-1464146072230-91cabc968266", alt: "Historic brownstone" }, { title: "Urban Penthouse", location: "Chicago, IL", price: "$1,500,000", beds: "4", baths: "3.5", sqft: "3,000", status: "Luxury", src: "https://images.unsplash.com/photo-1493809842364-78817add7ffb", alt: "Penthouse interior" } ]; return ( <div className="w-full max-w-sm mx-auto p-4 bg-gray-50"> <h1 className="text-2xl font-bold mb-4">Featured Properties</h1> <div className="space-y-4"> {properties.map((property, index) => ( <div key={index} className="bg-white rounded-lg shadow-sm overflow-hidden"> <div className="relative"> <img src={property.src} alt={property.alt} className="w-full h-40 object-cover" /> <div className="absolute top-2 left-2"> <span className="inline text-xs"> <span className="bg-red-500 text-white box-decoration-clone border border-black leading-[25px] px-2 py-1 rounded"> {property.status} </span> </span> </div> </div> <div className="p-3"> <h3 className="font-medium text-sm">{property.title}</h3> <p className="text-xs text-gray-600 mb-2">📍 {property.location}</p> <div className="flex items-center justify-between text-xs text-gray-600 mb-2"> <span>🛏 {property.beds} beds</span> <span>🚿 {property.baths} baths</span> <span>📏 {property.sqft} sqft</span> </div> <p className="text-sm font-bold text-gray-900">{property.price}</p> </div> </div> ))} </div> </div> ); }; export default PropertyListings;
Event Timeline Cards
This example displays an event timeline with decorated date headers.
export default function EventTimeline() { const events = [ { id: 1, date: "September 2023", title: "International Tech Conference", location: "San Francisco, CA", image: "https://images.unsplash.com/photo-1540575467063-178a50c2df87", alt: "Tech conference hall" }, { id: 2, date: "October 2023", title: "Developer Workshop Series", location: "London, UK", image: "https://images.unsplash.com/photo-1517048676732-d65bc937f952", alt: "Workshop setup" }, // ... more events ]; return ( <div className="max-w-4xl mx-auto p-8"> {events.map((event) => ( <div key={event.id} className="mb-8 bg-white rounded-lg overflow-hidden shadow-md"> <img src={event.image} alt={event.alt} className="w-full h-48 object-cover" /> <div className="p-6"> <h3 className="mb-4"> <span className="box-decoration-clone bg-teal-500 text-white px-4 py-2 leading-loose"> {event.date} </span> </h3> <h4 className="text-xl font-bold mb-2">{event.title}</h4> <p className="text-gray-600">{event.location}</p> </div> </div> ))} </div> ); }
Team Member Profiles
This example shows team member profiles with decorated role labels.
export default function TeamGrid() { const team = [ { id: 1, name: "Alex Rivera", role: "Senior Developer", photo: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e", alt: "Alex Rivera profile photo", specialty: "Frontend Architecture" }, { id: 2, name: "Emma Thompson", role: "UX Designer", photo: "https://images.unsplash.com/photo-1494790108377-be9c29b29330", alt: "Emma Thompson profile photo", specialty: "User Research" }, // ... more team members ]; return ( <div className="bg-gray-50 p-12"> <div className="grid grid-cols-3 gap-8"> {team.map((member) => ( <div key={member.id} className="text-center"> <img src={member.photo} alt={member.alt} className="w-32 h-32 rounded-full mx-auto mb-4" /> <h3 className="text-xl font-bold mb-2">{member.name}</h3> <p className="inline-block"> <span className="box-decoration-clone bg-purple-600 text-white px-3 py-1 leading-loose"> {member.role} </span> </p> <p className="mt-4 text-gray-600">{member.specialty}</p> </div> ))} </div> </div> ); }
Best Practices
Maintain Design Consistency
Achieving consistent design is critical when using box-decoration-break utilities in Tailwind CSS, especially in large-scale projects. Ensure uniformity by standardizing the usage of either box-decoration-slice or box-decoration-clone for similar patterns.
For example, in components like cards, quotes, or headers, a consistent decorative behavior fosters clarity across the interface. Pairing these utilities with global design tokens can help maintain this uniformity.
Additionally, when applying box-decoration-break, test its impact across various contexts—dark modes, light modes, or alternate themes. This ensures that decorative elements remain non-disruptive and consistent for all display variations and user preferences.
Build Responsive Design
Responsive modifiers enhance the flexibility of box-decoration-break settings. Set up breakpoints like sm:, md:, or lg: to manage decorative fragments effectively across devices. For headers or hero sections, the ability to toggle between box-decoration-slice and box-decoration-clone fosters optimal usability across both small and large screens.
For dynamic typography or images spanning multiple lines, use responsive padding or spacing to maintain box decoration clarity. Increase font size or section proportions at larger sizes to improve legibility while keeping decorations proportional to their container sizes.
Accessibility Considerations
Enhance Readability and Navigability
Readable designs prioritize ease of comprehension, and box-decoration-break can either improve or hinder it based on its application. Use box-decoration-slice thoughtfully for text spanning multiple lines to maintain consistent background contrasts, ensuring readability for all users. For multi-line fragments, keeping distinct decorations clear prevents user confusion while navigating content sections.
Structuring headers or paragraphs equipped with box-decoration-clone requires a balance between aesthetic charm and content clarity. Organize fragment decorations around logical content breaks to maximize legibility and user comfort.
Focus on High Contrast
Color contrast plays a pivotal role in accessible design. When applying box-decoration-break, ensure that decorations have sufficient contrast ratios against text or adjacent box elements. Tailwind's mix of utilities like bg-opacity-*, from-*, or to-* can create high-contrast designs to improve visibility.
For visually impaired users, bright gradients applied to fragmented text—especially via box-decoration-slice—can significantly enhance readability. Test these contrasts regularly against WCAG standards to maintain accessibility compliance.
Ensure adjacent fragments using box-decoration-clone visually contain separations or dividers, preventing blending that might obscure content sections.
