Tailwind CSS: Responsive design

Design Principles  

Tailwind CSS không chỉ đơn thuần là một CSS framework – nó là bộ công cụ xây dựng giao diện người dùng với triết lý thiết kế hiện đại: nhanh, tinh gọn, và linh hoạt.
Có rất nhiều nhân tố liên quan tới việc phát triển website và bởi vì Tailwind được tạo ra để đơn giản hóa toàn bộ quá trình đó, chúng ta sẽ chia nhỏ các khái niệm để dễ nắm bắt – và tận dụng tối đa tài nguyên mà Tailwind cung cấp

• Utility classes
• Events
• Responsive design
• Dark mode
• Re-usage of style
• Creating custom styles
• Function and directives

Chúng ta sẽ đi sâu vào một trong những yếu tố quan trọng nhất trong thiết kế hiện đại: Responsive Design

Responsive Design

Tailwind CSS mặc định theo mobile-first – nghĩa là bạn viết class cho màn hình nhỏ trước, rồi thêm các biến thể lớn hơn bằng cách dùng prefix breakpoint như sm:, md:, lg:…

Breakpoint name	Min-width	Equivalent Media query
sm	640px	@media (min-width: 640px) { // CSS Rules }
md	768px	@media (min-width: 768px) { // CSS Rules }
lg	1024px	@media (min-width: 1024px) { // CSS Rules }
xl	1280px	@media (min-width: 1280px) { // CSS Rules }
2xl	1536px	@media (min-width: 1536px) { // CSS Rules }

Ví dụ

<div class="h-36 w-36
	bg-pink-500
	sm:bg-red-500
	md:bg-green-500
	lg:bg-gray-500
	xl:bg-blue-500
	2xl:bg-gray-200">
</div>

Grid layout

Grid trong Tailwind là một hệ thống chia lưới, cho phép bạn chia layout thành các cột (columns) và hàng (rows) bằng cách sử dụng các class tiện ích (utility class).

Cú pháp cơ bản

grid: Biến container thành một lưới
grid-cols-X: Chia grid thành X cột (từ 1 đến 12 hoặc tuỳ chỉnh)
gap-X: Khoảng cách giữa các item (theo scale Tailwind, ví dụ gap-4 ~ 1rem) 

Vd: 3 cột đơn giản

function SimpleGrid() {
  return (
    <div className="grid grid-cols-3 gap-4 p-4">
      <div className="bg-blue-500 text-white p-4">Item 1</div>
      <div className="bg-blue-500 text-white p-4">Item 2</div>
      <div className="bg-blue-500 text-white p-4">Item 3</div>
      <div className="bg-blue-500 text-white p-4">Item 4</div>
      <div className="bg-blue-500 text-white p-4">Item 5</div>
      <div className="bg-blue-500 text-white p-4">Item 6</div>
    </div>
  );
}

 

Tham khảo

Mastering Responsive Layouts with Tailwind Grid