Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Bắt sự kiện click trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Columns trong Tailwind CSS
Tìm hiểu cách sử dụng tính năng cột column trong Tailwind CSS để tạo ra các bố cục đẹp mắt cho trang web của bạn.
Một trong những việc khó khăn nhất khi xây dựng trang web chính là thiết kế giao diện đẹp và hiệu quả. Tuy nhiên, với tính năng Columns trong Tailwind CSS, bạn có thể tạo ra các bố cục đa cột một cách dễ dàng và linh hoạt hơn. Bằng cách sử dụng các class được định nghĩa sẵn, bạn có thể kiểm soát kích thước và khoảng cách giữa các cột và tạo ra các bố cục độc đáo và thu hút cho trang web của mình.
Trong bài viết này, chúng ta sẽ học cách sử dụng tính năng cột của Tailwind CSS để tạo các bố cục đa cột cho trang web của bạn.
1. Columns trong Tailwind là gì?
Columns trong Tailwind CSS là một tính năng giúp bạn tạo cột dễ dàng và linh hoạt trong thiết kế giao diện. Tính năng này sử dụng các class được định nghĩa sẵn để tạo ra các bố cục đa cột cho trang web của bạn. Bạn có thể tùy chỉnh kích thước và khoảng cách giữa các cột bằng cách sử dụng các class của Tailwind CSS. Việc sử dụng tính năng cột của Tailwind CSS giúp cho các nhà phát triển tạo ra các bố cục độc đáo và thu hút cho trang web của mình.
Bài viết này được đăng tại [free tuts .net]
Các class column của Tailwind CSS được thiết kế để hỗ trợ 12 cột, khi muốn sử dụng bạn chỉ cần khai báo cú pháp columns-*giá trị*. Sử dụng Columns giúp cho việc tạo các bố cục đa cột trở nên đơn giản hơn bao giờ hết. Chỉ cần chọn số lượng cột mà bạn muốn hiển thị trên trang web của mình, và sử dụng các class tương ứng để tạo ra các cột đó.
Ngoài ra, Tailwind còn cung cấp để tùy chỉnh kích thước độ rộng của cột thông qua các class khác như columns-*giá trị*. Bạn có thể tham khảo sử dụng bảng dưới đây để tạo ra các cột rộng hơn hay chẳng hạn là chia nhỏ các cột hiện có.
|
Class |
Thuộc tính |
|
columns-auto |
Độ rộng của cột tự động |
|
columns-3xs |
Độ rộng: 16rem, tương đương 256px |
|
columns-2xs |
Độ rộng: 18rem, tương đương 288px |
|
columns-xs |
Độ rộng: 20rem, tương đương 320px |
|
columns-sm |
Độ rộng: 24rem, tương đương 384px |
|
columns-md |
Độ rộng: 28rem, tương đương 448px |
|
columns-lg |
Độ rộng: 32rem, tương đương 512px |
|
columns-xl |
Độ rộng: 36rem, tương đương 576px |
|
columns-2xl |
Độ rộng: 42rem, tương đương 672px |
|
columns-3xl |
Độ rộng: 48rem, tương đương 768px |
|
columns-4xl |
Độ rộng: 56rem, tương đương 896px |
|
columns-5xl |
Độ rộng: 64rem, tương đương 1024px |
|
columns-6xl |
Độ rộng: 72rem, tương đương 1152px |
|
columns-7xl |
Độ rộng: 80rem, tương đương 1280px |
Tiếp theo chúng ta tìm hiểu class xem chúng stylesheet ra sao nhé
2. Hướng dẫn sử dụng Columns trong Tailwind CSS
Xây dựng giao diện
Để sử dụng tính năng cột của Tailwind CSS, trước tiên bạn cần phải tạo một container bằng cách sử dụng class container. Class này sẽ giúp bạn giữ cho các cột của bạn nằm trong một khu vực hạn chế. Container là một phần quan trọng của Tailwind CSS, giúp cho việc căn chỉnh, định vị, sắp xếp các thành phần trên website trở nên dễ dàng hơn. Bạn có thể copy và dán vào như sau:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freetuts.net - Tìm hiểu về Columns trong Tailwind CSS</title>
</head>
<body>
<div class="container">
<!-- Nội dung về được trình bày tại đây -->
</div>
</body>
</html>Thêm mới cột
Kích thước của các cột sẽ được tự động điều chỉnh để phù hợp với số lượng cột đó. Để làm điều này, chúng ta sử dụng các tiện ích được cung cấp bởi Tailwind CSS với cú pháp columns-*giá trị*. Giá trị có thể thay đổi tùy vào mục đích sử dụng của bạn, nhưng lưu ý columns chỉ có 12 cột. Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freetuts.net - Tìm hiểu về Columns trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="columns-3 ">
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
</div>
</div>
</body>
</html>
Hình ảnh sử dụng class columns
Như bạn đã thấy ở ví dụ trên, tôi đã tạo ra được 3 cột với container được căn giữa
Điều chỉnh kích thước của cột
Tính năng này giúp bạn đặt chiều rộng cho nội dung của các cột. Cú pháp khai báo để sử dụng cũng tương tự như thêm cột mới: columns-*giá trị*.
Ví dụ, nếu bạn muốn nội dung trong cột có chiều rộng khoảng 250px, bạn có thể sử dụng columns-3xs (tương đương với độ rộng 256px), và số lượng cột sẽ tự động điều chỉnh để chứa giá trị đó. Thang điều chỉnh độ rộng này giống với thang của max-width, ngoại trừ việc nó bao gồm các giá trị nhỏ hơn để bạn có thể đạt được một số cột nhỏ hơn.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freetuts.net - Tìm hiểu về Columns trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="columns-3xs ">
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
</div>
</div>
</body>
</html>Kết quả sau khi chạy đoạn code trên
Hình ảnh sử dụng class columns-3xs
Thêm khoảng cách cho cột
Trong quá trình bố trí nội dung vào các cột, điều chỉnh khoảng cách giữa các cột là rất quan trọng để đảm bảo mỗi cột có tính thẩm mỹ và dễ đọc. May mắn thay, với Tailwind CSS, bạn có thể dễ dàng điều chỉnh khoảng cách giữa các cột bằng cách sử dụng các tiện ích gap-*giá trị*. Bằng cách chỉ định một giá trị cho tiện ích gap, bạn có thể kiểm soát khoảng cách giữa các cột, cho phép bạn điều chỉnh bố trí nội dung của mình cho đến khi nó trông đúng như ý muốn.
Ví dụ, nếu bạn muốn tạo khoảng cách giữa các cột rộng hơn để thêm khoảng trắng, hoặc thu hẹp nó để cho phép nhiều nội dung hơn hiển thị trên một diện tích nhỏ hơn, các tiện ích gap-*giá trị* sẽ giúp bạn dễ dàng đạt được điều đó.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freetuts.net - Tìm hiểu về Columns trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="gap-20 columns-3xs ">
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
</div>
</div>
</body>
</html>Còn đây là kết quả
Hình ảnh sử dụng columns kết hợp với gap-20
Khi sử dụng gap-20 thì tương đương mỗi cột sẽ được cách nhau 5 rem (khoảng 80px)
3. Áp dụng có điều kiện với Columns trong Tailwind CSS
Tailwind cho phép bạn áp dụng các lớp tiện ích theo điều kiện khác nhau bằng cách sử dụng các biến thay đổi (variant modifiers) như hover, focus và các trạng thái khác. Đây là tính năng đặc biệt hữu ích vì cho phép bạn kiểm soát kiểu dáng của các phần tử HTML dựa trên sự tương tác của người dùng. Ví dụ, sử dụng hover:columns-3 để chỉ áp dụng tiện ích columns-3xs khi nút được di chuột vào.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freetuts.net - Tìm hiểu về Columns trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="gap-20 columns-3xs hover:columns-3">
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
<img class="w-full " src="../red-background.jpg" />
</div>
</div>
</body>
</html>Và đây là kết quả khi chạy:
Hình khi chưa di chuột tới
Hình ảnh khi chuột được đưa tới
Sau khi di chuột tới, ba cột dã được áp dụng class columns-3
4. Tùy chỉnh giá trị trong Columns trong Tailwind CSS
Bạn có thể tùy chỉnh thang đo số cột và thang kích thước cột của Tailwind bằng cách chỉnh sửa trong tệp của mình. Thay vì sử dụng các giá trị mặc định, bạn có thể tạo các thang đo phù hợp với nhu cầu của mình để tạo ra các bố cục độc đáo và hiệu quả hơn. Có 2 cách để bạn có thể tùy chỉnh giá trị của Columns trong Tailwind:
Cách 1: Định nghĩa trong file “tailwind.config.js”
Để có thể tùy biến các giá trị bên trong class columns của Tailwind thì điều bắt buộc là bạn phải cài đặt Tailwind CSS về project mà chính các bạn đang làm. Nếu bạn chưa biết cách cài đặt thì có thể đọc lại bài viết hướng dẫn cài đặt Tailwind CSS vào project (Tailwind CLI) của chúng tôi tại đây. Sau khi bạn đã cài đặt về project thành công, chúng ta đã có thể bắt đầu thực hiện.
Đầu tiên bạn tìm và mở đến file ‘tailwind.config.js’ có nội dung như dưới đây
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}
Ví dụ cấu hình mới tên cột là 4xs với kích thước là 14rem
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
extend: {
columns: {
'4xs': '14rem',
}
},
plugins: [],
}Cách 2: Không cần định nghĩa
Sử dụng dấu ngoặc vuông để dùng một lần và không cần định nghĩa với cú pháp khai báo columns-[*giá trị*] . Ví dụ:
<div class="columns-[10rem]"> <!-- ... --> </div>
5. Kết luận
Với Tailwind CSS, việc tạo bố cục cho nội dung trở nên dễ dàng hơn bao giờ hết. Tính năng này giúp cho việc điều chỉnh khoảng cách giữa các cột trở nên đơn giản hơn bao giờ hết, cho phép bạn tạo ra các bố cục độc đáo và linh hoạt cho trang web của mình. Với sự linh hoạt mà tính năng này mang lại, bạn có thể dễ dàng tùy chỉnh bố cục của mình cho đến khi nó trông đúng như ý muốn.
