Hướng dẫn Toàn diện về Trình dựng Trực quan

Học cách Thiết kế Giao diện Đẹp mắt

Làm chủ Tailwind Builder với bài hướng dẫn toàn diện này. Học mọi tính năng từ kéo thả đến xuất mã nguồn.

Bắt đầu HọcDùng thử Trình dựng

Tổng quan Giao diện

Trình dựng được chia thành bốn khu vực chính được thiết kế cho quy trình làm việc trực quan.

Sơ đồ Giao diện Trình dựng
Thanh công cụ
100%
Xuất
Thanh bên Thành phần
Tìm kiếm...
Nút bấm (8)
Thẻ (10)
Form nhập liệu (12)
Vùng Thiết kế

Thả các thành phần vào đây

Bảng Thuộc tính
Bố cục
Kiểu dáng

Thanh bên Thành phần

Duyệt và tìm kiếm thông qua 63 thành phần dựng sẵn được sắp xếp thành 8 danh mục.

Vùng Thiết kế (Canvas)

Không gian làm việc trung tâm nơi bạn kéo, thả và sắp xếp các thành phần giao diện của mình.

Bảng Thuộc tính

Tinh chỉnh mọi khía cạnh của phần tử được chọn bằng các bộ điều khiển trực quan.

Thanh Công cụ

Truy cập các tùy chọn chuyển đổi chế độ xem, phóng to/thu nhỏ, hoàn tác/làm lại và xuất mã.

Bắt đầu Hướng dẫn

Làm theo các bước sau để tạo thành phần đầu tiên của bạn chỉ trong vài phút.

1

Duyệt các Thành phần

Mở thanh bên chứa thành phần ở phía bên trái và duyệt qua 8 danh mục với hơn 63 thành phần được dựng sẵn. Sử dụng thanh tìm kiếm để nhanh chóng tìm thấy thứ bạn cần.

Nhấp vào tiêu đề danh mục để mở rộng/thu gọnDi chuột qua các thành phần để xem trước
2

Kéo vào Vùng thiết kế

Nhấp và kéo bất kỳ thành phần nào từ thanh bên vào vùng thiết kế (canvas) ở chính giữa. Một chỉ báo thả sẽ hiển thị vị trí phần tử sẽ được đặt.

Thả vào giữa các phần tử hiện có để chèn vào giữaVùng thiết kế sẽ tự động cuộn khi kéo gần các cạnh
3

Sử dụng Khung chứa Bố cục

Để sắp xếp các phần tử nằm cạnh nhau, trước tiên hãy kéo một khung chứa Flex Row, Flex Column hoặc Grid vào, sau đó thả các phần tử vào bên trong chúng.

Flex Row sắp xếp các mục theo chiều ngangGrid cung cấp các bố cục chia thành 2, 3 hoặc 4 cột
4

Tùy chỉnh Thuộc tính

Nhấp vào bất kỳ phần tử nào để chọn, sau đó sử dụng Bảng thuộc tính ở bên phải để điều chỉnh khoảng cách, màu sắc, kiểu chữ và nhiều hơn nữa.

Các thay đổi được áp dụng ngay lập tứcSử dụng công cụ chọn màu để có màu sắc chính xác
5

Xem trước Đa giao diện

Sử dụng bộ chuyển đổi chế độ xem trên thanh công cụ để xem trước thiết kế của bạn trên các kích thước Máy tính (Desktop), Máy tính bảng (Tablet) và Điện thoại (Mobile).

Máy tính: 100% chiều rộngMáy tính bảng: 768pxĐiện thoại: 375px
6

Xuất Mã nguồn

Nhấp vào nút Xuất (Export) để sao chép mã JSX/TSX vào bộ nhớ tạm hoặc tải xuống tệp thành phần hoàn chỉnh.

Mã nguồn đã sẵn sàng cho môi trường productionBao gồm đầy đủ tất cả các class Tailwind

Thư viện Thành phần

63 thành phần dựng sẵn trên 8 danh mục, luôn sẵn sàng để kéo và thả.

Nút bấm

8 thành phần

Thẻ (Cards)

10 thành phần

Thanh điều hướng

6 thành phần

Form nhập liệu

12 thành phần

Phần vùng (Sections)

10 thành phần

Bố cục (Layout)

8 thành phần

Media (Hình ảnh/Video)

4 thành phần

Văn bản

5 thành phần

Khung chứa Bố cục (Layout Containers)

Sử dụng các khung chứa đặc biệt này để sắp xếp các phần tử thành các bố cục phức tạp:

Flex Row

Sắp xếp các mục theo chiều ngang

Flex Column

Xếp chồng các mục theo chiều dọc

Grid (2/3/4 cột)

Tạo các lưới có khả năng phản hồi (responsive)

Bảng Thuộc tính

Tinh chỉnh mọi khía cạnh của các phần tử với các tab thuộc tính này.

Bố cục

Chiều rộng, chiều cao, hiển thị, vị trí, flexbox

Khoảng cách

Căn lề ngoài (margin), căn lề trong (padding) các phía

Kiểu chữ

Cỡ chữ, độ dày, căn lề, chiều cao dòng

Màu sắc

Màu nền, màu chữ và màu viền

Viền

Độ dày viền, bo góc và kiểu viền

Hiệu ứng

Đổ bóng, độ mờ (opacity), biến đổi (transforms)

Các Tính năng Thanh công cụ

Các công cụ thiết yếu ngay trong tầm tay bạn cho trải nghiệm xây dựng liền mạch.

Chuyển đổi Chế độ xem

Xem trước thiết kế của bạn trên các kích cỡ màn hình khác nhau.

  • Máy tính (Mặc định 100% chiều rộng)
  • Máy tính bảng (768px)
  • Điện thoại (375px)

Điều khiển Thu phóng

Phóng to và thu nhỏ vùng thiết kế cho các tác vụ cần độ chính xác.

  • Mức thu phóng: 50% đến 150%
  • Menu thả xuống thu phóng nhanh
  • Hiển thị vừa màn hình

Bật/Tắt Lưới Giới hạn

Hiển thị hoặc ẩn một lưới đè để giúp căn chỉnh chuẩn xác.

  • Các đường dẫn căn lề trực quan
  • Bật/tắt nhanh bằng phím Ctrl+G

Hoàn tác / Làm lại

Dễ dàng khôi phục hoặc áp dụng lại các thay đổi trên vùng thiết kế.

  • Hỗ trợ đầy đủ lịch sử thao tác
  • Hỗ trợ phím tắt tiện lợi

Xóa vùng Thiết kế

Bắt đầu lại từ đầu bằng cách xóa tất cả các phần tử khỏi canvas.

  • Có hộp thoại xác nhận tránh xóa nhầm
  • Hành động này không thể hoàn tác

Các Tùy chọn Xuất

Đưa mã nguồn của bạn sẵn sàng vào môi trường production.

  • Sao chép mã JSX/TSX vào bộ nhớ tạm
  • Tải xuống tệp thành phần riêng lẻ
  • Tải xuống toàn bộ dự án dạng nén (.zip)

Tương tác với Phần tử

Tương tác với các phần tử trên vùng thiết kế bằng các hành động sau.

Lựa chọn & Di chuột (Hover)

  • Nhấp để chọn

    Nhấp vào bất kỳ phần tử nào để chọn và xem các thuộc tính của nó

  • Di chuột để hiện thanh công cụ

    Di chuột qua các phần tử để hiển thị thanh công cụ hành động nhanh

Kéo & Sắp xếp lại

  • Kéo để đổi vị trí

    Kéo các phần tử để thay đổi thứ tự và vị trí của chúng trong bố cục

  • Lồng vào trong khung chứa

    Thả các phần tử trực tiếp vào bên trong các khung chứa Flex hoặc Grid

Nhân đôi & Xóa

  • Nhân đôi phần tử

    Tạo một bản sao của bất kỳ phần tử nào một cách nhanh chóng với phím tắt Ctrl+D

  • Xóa phần tử

    Loại bỏ các phần tử không mong muốn bằng phím Delete hoặc Backspace

Xem trước Mã nguồn

  • Xem mã nguồn được tạo tự động

    Bật/tắt nhanh bảng xem trước mã nguồn bằng tổ hợp phím Ctrl+Shift+C

  • Sao chép vào bộ nhớ tạm

    Sao chép nhanh mã JSX hoặc TSX chỉ với một cú nhấp chuột

Tăng tốc Hiệu suất

Phím tắt Bàn phím

Đẩy nhanh tiến độ quy trình làm việc của bạn với các phím tắt tiện ích này.

Ctrl+Z(Mac: Cmd + Z)
Hoàn tác hành động trước
Ctrl+Shift+Z(Mac: Cmd + Shift + Z)
Làm lại hành động vừa hoàn tác
Ctrl+C(Mac: Cmd + C)
Sao chép phần tử được chọn
Ctrl+V(Mac: Cmd + V)
Dán phần tử đã sao chép
Ctrl+D(Mac: Cmd + D)
Nhân đôi phần tử được chọn
Delete(Mac: Backspace)
Xóa phần tử được chọn
Ctrl+G(Mac: Cmd + G)
Bật/tắt lưới (grid overlay)
Ctrl+Shift+C(Mac: Cmd + Shift + C)
Bật/tắt xem trước mã nguồn
Ctrl+S(Mac: Cmd + S)
Lưu bản thiết kế
Escape(Mac: Escape)
Hủy chọn phần tử hiện tại

Mẹo chuyên nghiệp

Tận dụng tối đa trình dựng với những lời khuyên hữu ích dưới đây.

Bắt đầu từ Bố cục

Luôn luôn thêm các khung chứa bố cục (Flex Row, Grid) trước, sau đó mới thêm nội dung vào bên trong để quản lý cấu trúc tốt hơn.

Sử dụng Lưới căn lề

Bật khung lưới đè (Ctrl+G) giúp bạn căn chỉnh các phần tử một cách chính xác tuyệt đối và giữ khoảng cách nhất quán.

Kiểm tra Đa màn hình

Chuyển đổi linh hoạt giữa các kích thước màn hình để đảm bảo thiết kế của bạn hiển thị tuyệt đẹp trên mọi thiết bị.

Tận dụng Nhân đôi

Sử dụng Ctrl+D để nhân bản phần tử khi bạn cần tạo các thành phần tương tự nhau - sau đó chỉ cần thay đổi nhẹ thuộc tính.

Tính năng Tự động lưu

Vùng thiết kế của bạn được lưu tự động mỗi 5 giây một lần và cả khi bạn rời trang. Hãy yên tâm sáng tạo!

Hoàn tác là Bạn thân

Đừng ngại thử nghiệm các ý tưởng mới! Bạn luôn có thể hủy các thay đổi bằng phím Ctrl+Z nếu có điều gì đó chưa vừa mắt.

Sẵn sàng để Bắt đầu Sáng tạo?

Bây giờ bạn đã nắm vững các kiến thức cơ bản, hãy bắt đầu tạo những giao diện người dùng tuyệt đẹp ngay thôi!

Khởi chạy Trình dựngQuay lại Trang chủ