Tailwind CSS Outline Style

The Outline Style property is used to define the style of the outline- solid, dashed, dotted, and double.

Below, we'll explore how to effectively implement Outline Style in Tailwind CSS, from the basics to advanced techniques for state-based and responsive styling.

Class	Properties	Example
`outline-none`	`outline: 2px solid transparent; outline-offset: 2px;`	`<div className="outline-none"></div>`
`outline`	`outline-style: solid;`	`<div className="outline"></div>`
`outline-dashed`	`outline-style: dashed;`	`<div className="outline-dashed"></div>`
`outline-dotted`	`outline-style: dotted;`	`<div className="outline-dotted"></div>`
`outline-double`	`outline-style: double;`	`<div className="outline-double"></div>`

Overview of Outline Style

Tailwind CSS provides intuitive utilities for setting and managing outline styles. It allows you to quickly configure a simple outline, remove outlines, or even combine styles with other utilities. Below, we'll walk you through how you can achieve this.

Adding the Outline Style

You can set an outline style by applying specific Tailwind CSS classes to any element. This enables you to specify the appearance, thickness, and color of the outline.

This is a live editor. Play around with it!

export default function App() {
  return (
    <div className="h-screen w-screen flex flex-col gap-10 items-center justify-center bg-gray-100">
      <button className="outline outline-4 outline-blue-500 px-4 py-2 font-semibold">
        Solid
      </button>
      <button className="outline-dashed outline-4 outline-blue-500 px-4 py-2 font-semibold">
        Dashed
      </button>
      <button className="outline-dotted outline-4 outline-blue-500 px-4 py-2 font-semibold">
        Dotted
      </button>
      <button className="outline-double outline-4 outline-blue-500 px-4 py-2 font-semibold">
        Double
      </button>
    </div>
  );
}

Removing Outline Styles

To remove the default outline set by the browser on focused elements, use outline-none utility. You can then further apply a custom outline:

This is a live editor. Play around with it!

export default function App() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
      <input type="text"
        placeholder="Type something here..."
        className="outline-none px-4 py-2" />
    </div>
  );
}

States and Responsiveness

Sometimes, applying outline styles consistently across states (hover, focus, active) and screen breakpoints is necessary for building cohesive interfaces. Tailwind CSS provides utilities that help you achieve this by combining states with responsive classes.

Hover and Focus States

You can specify outline styles that appear when interacting with an element (e.g., hover over or focus). Tailwind ensures flexibility by allowing you to conditionally apply these utilities.

This is a live editor. Play around with it!

export default function App() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
      <button className="hover:outline hover:outline-2 focus:outline-dashed focus:outline-4 focus:outline-red-500 px-4 py-2 font-semibold transition-all">
        Interact with Me
      </button>
    </div>
  );
}

The hover:outline utility applies an outline only when the button is hovered over.
A more prominent outline (focus:outline-dashed focus:outline-4 focus:outline-red-500) is enabled when the button gains focus.

Breakpoint Modifiers

Responsive designs often require styling modifications based on different screen sizes. Tailwind allows precise breakpoint-based outline control, which is simple yet powerful.

This is a live editor. Play around with it!

export default function App() {
  return (
    <div className="h-screen w-screen flex items-center justify-center bg-gray-100">
      <button className="outline outline-2 outline-gray-400 sm:outline-4 sm:outline-dashed lg:outline-blue-500 lg:outline-dotted px-4 py-2 font-semibold">
        Responsive Outline
      </button>
    </div>
  );
}

A default outline (outline-2 outline-gray-400) applies across all screen sizes.
For sm: small screens, (outline-4 outline-dashed) appears.
At lg: large screen sizes, the outline's color and style updates (outline-blue-500 outline-dotted) to match the design responsiveness.

Real World Examples

Product Card Grid with Outline Focus

This component showcases a grid of product cards with outline focus effects when users navigate using keyboard.

This is a live editor. Play around with it!

export default function ProductGrid() {
  const products = [
    {
      id: 1,
      name: "Wireless Headphones",
      price: "$199.99",
      src: "https://images.unsplash.com/photo-1505740420928-5e560c06d30e",
      alt: "Premium wireless headphones in black"
    },
    {
      id: 2,
      name: "Mechanical Keyboard",
      price: "$149.99",
      src: "https://images.unsplash.com/photo-1595225476474-87563907a212",
      alt: "RGB mechanical keyboard"
    },
    {
      id: 3,
      name: "Ultra HD Monitor",
      price: "$399.99",
      src: "https://images.unsplash.com/photo-1527443224154-c4a3942d3acf",
      alt: "32-inch curved monitor"
    },
    {
      id: 4,
      name: "Gaming Mouse",
      price: "$79.99",
      src: "https://images.unsplash.com/photo-1527864550417-7fd91fc51a46",
      alt: "RGB gaming mouse"
    },
    {
      id: 5,
      name: "Laptop Stand",
      price: "$49.99",
      src: "https://images.unsplash.com/photo-1625842268584-8f3296236761",
      alt: "Aluminum laptop stand"
    },
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-3 gap-6 p-6">
      {products.map((product) => (
        <div
          key={product.id}
          className="border rounded-lg p-4 hover:shadow-lg transition-shadow focus-within:outline focus-within:outline-dashed focus-within:outline-2 focus-within:outline-blue-500"
          tabIndex={0}
        >
          <img
            src={product.src}
            alt={product.alt}
            className="w-full h-48 object-cover rounded-md"
          />
          <h3 className="text-lg font-semibold mt-2">{product.name}</h3>
          <p className="text-gray-600">{product.price}</p>
        </div>
      ))}
    </div>
  );
}

Interactive Button Collection

A collection of buttons with different outline styles for various states and interactions.

This is a live editor. Play around with it!

export default function ButtonCollection() {
  const buttons = [
    {
      id: 1,
      label: "Primary Action",
      style: "outline-blue-500"
    },
    {
      id: 2,
      label: "Danger Zone",
      style: "outline-red-500"
    },
    {
      id: 3,
      label: "Success State",
      style: "outline-green-500"
    },
    {
      id: 4,
      label: "Warning Alert",
      style: "outline-yellow-500"
    },
    {
      id: 5,
      label: "Info Button",
      style: "outline-purple-500"
    },
    {
      id: 6,
      label: "Neutral Action",
      style: "outline-gray-500"
    }
  ];

  return (
    <div className="flex flex-wrap gap-4 p-6">
      {buttons.map((button) => (
        <button
          key={button.id}
          className={`px-6 py-2 rounded-lg focus:outline focus:outline-2 focus:outline-dotted focus:${button.style} hover:bg-gray-100 transition-colors`}
        >
          {button.label}
        </button>
      ))}
    </div>
  );
}

Team Member Directory

A responsive directory of team members with outline focus for accessibility.

This is a live editor. Play around with it!

export default function TeamDirectory() {
  const team = [
    {
      id: 1,
      name: "Sarah Johnson",
      role: "Lead Designer",
      src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330",
      alt: "Sarah Johnson profile photo"
    },
    {
      id: 2,
      name: "Michael Chen",
      role: "Senior Developer",
      src: "https://images.unsplash.com/photo-1500648767791-00dcc994a43e",
      alt: "Michael Chen profile photo"
    },
    {
      id: 3,
      name: "Emma Williams",
      role: "Product Manager",
      src: "https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e",
      alt: "Emma Williams profile photo"
    },
    {
      id: 4,
      name: "David Miller",
      role: "UX Researcher",
      src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e",
      alt: "David Miller profile photo"
    },
    {
      id: 5,
      name: "Lisa Thompson",
      role: "Marketing Director",
      src: "https://images.unsplash.com/photo-1438761681033-6461ffad8d80",
      alt: "Lisa Thompson profile photo"
    },
    {
      id: 6,
      name: "James Wilson",
      role: "Frontend Developer",
      src: "https://images.unsplash.com/photo-1519085360753-af0119f7cbe7",
      alt: "James Wilson profile photo"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8 p-8">
      {team.map((member) => (
        <div
          key={member.id}
          className="group relative rounded-xl p-6 bg-white shadow-sm hover:shadow-md transition-shadow focus-within:outline focus:outline-double focus-within:outline-2 focus-within:outline-indigo-500"
          tabIndex={0}
        >
          <img
            src={member.src}
            alt={member.alt}
            className="w-24 h-24 rounded-full mx-auto mb-4 object-cover"
          />
          <h3 className="text-xl font-semibold text-center">{member.name}</h3>
          <p className="text-gray-600 text-center">{member.role}</p>
        </div>
      ))}
    </div>
  );
}

A responsive navigation menu with outline focus states for keyboard navigation.

This is a live editor. Play around with it!

export default function NavigationMenu() {
  const menuItems = [
    {
      id: 1,
      label: "Dashboard",
      icon: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6",
      alt: "Dashboard icon"
    },
    {
      id: 2,
      label: "Projects",
      icon: "https://images.unsplash.com/photo-1454165804606-c3d57bc86b40",
      alt: "Projects icon"
    },
    {
      id: 3,
      label: "Messages",
      icon: "https://images.unsplash.com/photo-1596526131083-e8c633c948d2",
      alt: "Messages icon"
    },
    {
      id: 4,
      label: "Calendar",
      icon: "https://images.unsplash.com/photo-1506784693919-ef06d93c28d2",
      alt: "Calendar icon"
    },
    {
      id: 5,
      label: "Settings",
      icon: "https://images.unsplash.com/photo-1507925921958-8a62f3d1a50d",
      alt: "Settings icon"
    },
    {
      id: 6,
      label: "Help",
      icon: "https://images.unsplash.com/photo-1586769852044-692d6e3703f0",
      alt: "Help icon"
    }
  ];

  return (
    <nav className="bg-white border-r h-screen w-64 p-4">
      <div className="space-y-2">
        {menuItems.map((item) => (
          <a
            key={item.id}
            href="#"
            className="flex items-center px-4 py-2 rounded-lg hover:bg-gray-100 focus:outline focus:outline-2 focus:outline-blue-500"
          >
            <img
              src={item.icon}
              alt={item.alt}
              className="w-5 h-5 object-cover mr-3"
            />
            <span className="text-gray-700">{item.label}</span>
          </a>
        ))}
      </div>
    </nav>
  );
}

Feature Card Showcase

A showcase of feature cards with outline focus states and hover effects.

This is a live editor. Play around with it!

export default function FeatureShowcase() {
  const features = [
    {
      id: 1,
      title: "Cloud Storage",
      description: "Secure and scalable storage solutions",
      icon: "https://images.unsplash.com/photo-1544731612-de7f96afe55f",
      alt: "Cloud storage icon"
    },
    {
      id: 2,
      title: "Analytics Dashboard",
      description: "Real-time data visualization",
      icon: "https://images.unsplash.com/photo-1551288049-bebda4e38f71",
      alt: "Analytics dashboard icon"
    },
    {
      id: 3,
      title: "Team Collaboration",
      description: "Enhanced productivity tools",
      icon: "https://images.unsplash.com/photo-1522071820081-009f0129c71c",
      alt: "Team collaboration icon"
    },
    {
      id: 4,
      title: "Security Features",
      description: "Advanced encryption protocols",
      icon: "https://images.unsplash.com/photo-1563986768609-322da13575f3",
      alt: "Security features icon"
    },
    {
      id: 5,
      title: "API Integration",
      description: "Seamless third-party connections",
      icon: "https://images.unsplash.com/photo-1558494949-ef010cbdcc31",
      alt: "API integration icon"
    },
    {
      id: 6,
      title: "24/7 Support",
      description: "Round-the-clock customer service",
      icon: "https://images.unsplash.com/photo-1534536281715-e28d76689b4d",
      alt: "Customer support icon"
    }
  ];

  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 p-8">
      {features.map((feature) => (
        <div
          key={feature.id}
          className="p-6 bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow focus-within:outline focus-within:outline-2 focus-within:outline-dashed focus-within:outline-emerald-500"
          tabIndex={0}
        >
          <img
            src={feature.icon}
            alt={feature.alt}
            className="w-12 h-12 object-cover rounded-lg mb-4"
          />
          <h3 className="text-xl font-semibold mb-2">{feature.title}</h3>
          <p className="text-gray-600">{feature.description}</p>
        </div>
      ))}
    </div>
  );
}

Best Practices

Maintain Design Consistency

Ensuring consistency in design is crucial when applying outline styles across your project. Tailwind CSS's utility-first structure simplifies the process by providing clear, reusable classes for outlining rules.

Always use consistent style, e.g., dashed, dotted, etc. with consistent widths and colors across related elements to create a harmonious design language. For instance, decide on a standard hover outline color for clickable items such as buttons, inputs, or navigational links and apply it site-wide.

Leverage Utility Combinations Thoughtfully

The true power of Tailwind CSS lies in its ability to combine multiple utilities seamlessly. When applying outline utilities, consider pairing them with padding, margins, shadows, or transitions to elevate your interface designs. For instance, using p-4 with outline utilities can help you create well-spaced interactive components that are both accessible and visually polished.

This is a live editor. Play around with it!

export default function FocusedCard() {
  return (
    <div className="p-8 flex justify-center items-center">
      <div tabindex="0" className="p-4 rounded-lg shadow-md transition-all focus-within:outline focus-within:outline-dashed focus-within:outline-4 focus-within:outline-indigo-500">
        <img
          src="https://images.unsplash.com/photo-1511467687858-23d96c32e4ae"
          alt="Card example"
          className="w-64 h-64 object-cover rounded-md"
        />
        <p className="mt-4 text-center text-gray-700 font-semibold">
          Click on this card
        </p>
      </div>
    </div>
  );
}

Accessibility Considerations

Enhance Readability and Navigability

Outlines are significant visual cues, particularly for users navigating your website without a mouse. Ensuring that outlined elements are highlighted clearly improves the readability and usability of your interface.

Using focus:outline-* utilities in combination with appropriate padding, background colors, and sufficient contrast can make focused elements stand out without overwhelming the design.

Focus on High Contrast

Tailwind promotes customization through its compatibility with extended color palettes.

High-contrast outline styles, such as black (outline-black) or vivid hues (focus:outline-red-600) can make essential elements instantly visible. This is particularly crucial when designing for users with low vision or color blindness.

Outline Width Outline Color

Tailwind CSS Outline Style

Overview of Outline Style

Adding the Outline Style

Removing Outline Styles

States and Responsiveness

Hover and Focus States

Breakpoint Modifiers

Real World Examples

Product Card Grid with Outline Focus

Interactive Button Collection

Team Member Directory

Navigation Menu

Feature Card Showcase

Best Practices

Maintain Design Consistency

Leverage Utility Combinations Thoughtfully

Accessibility Considerations

Enhance Readability and Navigability

Focus on High Contrast