---
title: "Surface"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Surface for layered content containers and visual depth hierarchy. Multiple elevation levels and shapes for card alternatives and nested layouts."
url: https://frutjam.com/vi/components/surface
---

# Surface Component

Các thành phần bề mặt là các bố cục nguyên thủy linh hoạt tạo ra các phân cấp trực quan theo lớp và các vùng chứa nội dung. Được xây dựng bằng HTML ngữ nghĩa, các bề mặt cung cấp các tùy chọn kiểu dáng và chiều sâu linh hoạt. Hệ thống bề mặt Frutjam hỗ trợ nhiều kích thước, hình dạng và lớp—lý tưởng cho các lựa chọn thay thế thẻ, khối nội dung và bố cục lồng nhau.

Chỉ CSS, không cần JavaScript. WCAG AA có thể truy cập và không phụ thuộc vào khung — hoạt động với Django, HTMX, Laravel, React và bất kỳ ngăn xếp nào.

| Lớp học         | Kiểu       | Sự miêu tả                             |
| --------------- | ---------- | -------------------------------------- |
| surface         | Căn cứ     | Thùng chứa bề mặt cơ sở                |
| surface-1       | Phong cách | Độ cao cấp 1 (tinh tế)                 |
| surface-2       | Phong cách | Độ cao cấp 2                           |
| surface-outline | Phong cách | Transparent fill with a visible border |
| surface-dashed  | Phong cách | Kiểu đường viền nét đứt                |
| surface-rounded | Phong cách | Các góc được bo tròn vừa phải          |
| surface-xs      | Kích cỡ    | Extra small padding                    |
| surface-sm      | Kích cỡ    | Small padding                          |
| surface-md      | Kích cỡ    | Medium padding (default)               |
| surface-lg      | Kích cỡ    | Large padding                          |
| surface-xl      | Kích cỡ    | Extra large padding                    |

## Cách sử dụng cơ bản

## Lớp bề mặt

Sử dụng `surface-1` và `surface-2` để tạo phân cấp độ sâu bằng cách trộn màu cơ bản với màu nền trước.

```html
<div class="surface p-4">Base</div>
<div class="surface surface-1 p-4">Surface 1 — subtle lift</div>
<div class="surface surface-2 p-4">Surface 2 — more contrast</div>
```

## Hình dạng bề mặt

```html
<div class="surface surface-md">Default (square)</div>
<div class="surface surface-md surface-rounded">Rounded</div>
```

## Kiểu viền

Sử dụng `surface-outline` hoặc `surface-dashed` cho các vùng chứa trong suốt được xác định bởi đường viền. Chúng hoạt động chính xác khi được lồng bên trong các lớp màu vì nền rõ ràng là trong suốt.

```html
<div class="surface surface-1 surface-rounded surface-md">
  <p class="mb-3 font-medium">Surface 1 (colored parent)</p>
  <div class="flex gap-3">
    <div class="surface surface-outline surface-rounded surface-sm grow">Outline — transparent fill, solid border</div>
    <div class="surface surface-dashed surface-rounded surface-sm grow">Dashed — transparent fill, dashed border</div>
  </div>
</div>
```

## Kích thước bề mặt

Tiện ích kích thước đặt khoảng đệm bên trong thông qua `--surface--padding`. Không kết hợp với các tiện ích `p-*` của Tailwind—chúng sẽ ghi đè biến và đánh bại lớp kích thước.

```html
<div class="surface surface-xs surface-rounded">Extra small (0.5rem)</div>
<div class="surface surface-sm surface-rounded">Small (1rem)</div>
<div class="surface surface-md surface-rounded">Medium (1.5rem)</div>
<div class="surface surface-lg surface-rounded">Large (2rem)</div>
<div class="surface surface-xl surface-rounded">Extra large (2.5rem)</div>
```

## Bề mặt lồng nhau

```html
<div class="surface surface-1 p-6 rounded-lg">
  <h3>Outer Surface</h3>
  <div class="surface surface-2 p-4 rounded mt-4">
    <p>Inner Surface</p>
  </div>
</div>
```