---
title: "标签"
type: component
version: "2.2.1"
doc_version: "2.5.2"
status: stable
date: 2026-06-19
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "用于内容标签、类别和过滤器的 Tailwind CSS 标签。技能列表、文章元数据和产品属性的多种尺寸、颜色和形状。"
url: https://frutjam.com/zh-hans/components/tag
---

# 标签组件

Tag components display small, labeled pieces of information, used for categorizing, filtering, or labeling content. Built with semantic HTML and flexible styling, tags help users quickly identify content type, status, or category. The Frutjam tag system supports multiple sizes, colors, styles, and shapes—ideal for skill lists, article categories, status labels, and content metadata.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

| Class         | Type     | Description                                          |
| ------------- | -------- | ---------------------------------------------------- |
| tag           | Base     | Inline label for categorizing or identifying content |
| tag-outline   | Style    | Transparent fill with a colored border               |
| tag-soft      | Style    | Muted tinted background                              |
| tag-square    | Style    | Slight rounding (less than default pill)             |
| tag-remove    | Modifier | Dismiss/remove button inside the tag                 |
| tag-xs        | Size     | Extra small (0.6875rem font)                         |
| tag-sm        | Size     | Small (0.75rem font)                                 |
| tag-md        | Size     | Medium (0.8125rem font, default)                     |
| tag-lg        | Size     | Large (0.9375rem font)                               |
| tag-xl        | Size     | Extra large (1rem font)                              |
| tag-primary   | Color    | Primary theme color                                  |
| tag-secondary | Color    | Secondary theme color                                |
| tag-accent    | Color    | Accent theme color                                   |
| tag-neutral   | Color    | Neutral theme color                                  |
| tag-info      | Color    | Info semantic color                                  |
| tag-success   | Color    | Success semantic color                               |
| tag-warning   | Color    | Warning semantic color                               |
| tag-error     | Color    | Error semantic color                                 |

## Basic Usage

## Tag Sizes

```html
<div class="tag tag-xs">Extra Small</div>
<div class="tag tag-sm">Small</div>
<div class="tag tag-md">Medium</div>
<div class="tag tag-lg">Large</div>
```

## Tag Colors

```html
<div class="tag">Default</div>
<div class="tag tag-primary">Primary</div>
<div class="tag tag-secondary">Secondary</div>
<div class="tag tag-accent">Accent</div>
<div class="tag tag-info">Info</div>
<div class="tag tag-success">Success</div>
<div class="tag tag-warning">Warning</div>
<div class="tag tag-error">Error</div>
```

## Tag Styles

```html
<div class="tag tag-primary">Default</div>
<div class="tag tag-primary tag-outline">Outline</div>
<div class="tag tag-secondary tag-soft">Soft</div>
<div class="tag tag-accent tag-dashed">Dashed</div>
```

## Tag Shapes

```html
<div class="tag">Square</div>
<div class="tag tag-rounded">Rounded</div>
<div class="tag tag-pill">Pill</div>
<div class="tag tag-circle">C</div>
```

## Tag with Icon

```html
<div class="tag tag-primary">
  <svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20"><path d="M5.5 13a3.5 3.5 0 01-.369-6.98 4 4 0 117.753-1.3A4.5 4.5 0 1113.5 13H11V9.413l1.293 1.293a1 1 0 001.414-1.414l-3-3a1 1 0 00-1.414 0l-3 3a1 1 0 001.414 1.414L9 9.414V13H5.5z"/></svg>
  Starred
</div>
```

## Closeable Tags

```html
<div class="tag tag-primary">
  JavaScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-secondary">
  React
  <button class="tag-remove" aria-label="Close">×</button>
</div>

<div class="tag tag-accent">
  TypeScript
  <button class="tag-remove" aria-label="Close">×</button>
</div>
```

## Tag List

```html
<div class="flex flex-wrap gap-2">
  <div class="tag">JavaScript</div>
  <div class="tag tag-primary">React</div>
  <div class="tag tag-secondary">CSS</div>
  <div class="tag tag-accent">UI Design</div>
  <div class="tag tag-info">Frontend</div>
  <div class="tag tag-success">Production</div>
</div>
```