Tailwind CSS Chip

Get started on your web projects with our Tailwind CSS Chip (also known as Pills or Tags) which is a compact element that represents an input, attribute, or action. This element appears dynamically as a group of multiple interactive elements and allows users to enter information, make selections, filter content, or trigger actions.

They often come with the capability to be removed or interacted with, allowing users to manipulate the data or selection represented by the chip.

See below our responsive chip component examples styled with Tailwind CSS that you can use for your web or mobile projects.

Chip Demo

Create clean and minimal chips using Tailwind CSS rounded and padding utilities. This example shows how to build simple chips with proper spacing and hover states.

Material Tailwind

Chip Sizes

Scale your chips appropriately using Tailwind CSS sizing utilities. Create consistent small, medium, and large chips that maintain proper proportions across all devices.

Small
Medium
Large

The varying sizes allow web designers to cater to different spatial and functional requirements within an interface.

Chip Variants

Style your chips with different visual treatments using Tailwind CSS utilities. Choose between filled, outlined, or ghost styles to match your design needs.

Ghost
Outline
Solid
Gradient

Each chip is contained within a <div> element and designed with a consistent structure but different visual styles: filled, gradient, outlined, and ghost.

Chip Colors

Customize your chips with Tailwind CSS color utilities. Use bg-slate-800, bg-slate-200, bg-blue-500, bg-green-500, bg-red-500, and bg-amber-500 to represent different states or categories.

Primary
Secondary
Info
Success
Warning
Error

Chip with Icon

Add visual context to your chips using Tailwind CSS flex and spacing utilities. Combine icons with text to create more informative and engaging chips.

Ghost
Outline
Solid
Gradient

Dismissible Chip

Create interactive chips using Tailwind CSS transition utilities. Add smooth remove animations and click handlers for better user interaction.

Material Tailwind

The example offers users the ability to remove or dismiss the chip from the UI, typically used in scenarios where users can select and then opt to remove choices, such as tags, filters, or selections.

Chip with Avatar

Build user-focused chips using Tailwind CSS flex and image utilities. Perfect for displaying user selections or assignments with profile pictures.

profile-picture Andrew Alexa

Rounded Chip

Design pill-shaped chips using Tailwind CSS rounded utilities. Create fully rounded chips that work great for tags or status indicators.

Ghost
Outline
Solid
Gradient

Chip Best Practices

  • Keep chip text concise and clear
  • Ensure proper touch targets for mobile
  • Maintain consistent spacing between chips
  • Add clear hover and active states
  • Include proper ARIA labels for accessibility
  • Use appropriate colors for different states