10 Tips Tailwind CSS Mà Bạn Cần Biết để Tăng Năng Suất Làm Việc
style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="266"
data-original-width="474"
height="270"
src="https://blogger.googleusercontent.com/img/a/AVvXsEjNktysw4V19yBWoUSca2JdisPt3tuKvnx65nJRFi2hmUn1CA1Z5pYfIkbt3rmasptxUHMalNTzETTINeNje4sikoKX1-jPbPBo1p1FHErOmlcyr0avdSyhtNF41nrcx0kij9Ym-9J60aqOyA7No-PySS8KDn7cqhWKPB1aU663cYI9oSGBx-dbOnEEi8w=w481-h270"
width="481"
/>
Mình thích Tailwind vì hai lý do. Đầu tiên, nó làm cho việc xây dựng các
giao diện đáp ứng trở nên dễ dàng hơn rất nhiều. Khi bạn thành thạo tất cả
các lớp tiện ích, bạn sẽ thực sự ngạc nhiên về tốc độ mà bạn có thể điều
chỉnh các thành phần giao diện người dùng của mình từ giao diện này sang
giao diện khác.
Thứ hai, vì bạn chỉ có thể sử dụng các lớp được xác định trước của Tailwind
để tạo kiểu cho các thành phần của mình nên nó tạo ra một quy ước chặt chẽ
trong nhóm giao diện người dùng của bạn, giúp quá trình làm việc cùng nhau
dễ dàng hơn nhiều.
Cuối cùng, việc sử dụng Tailwind giúp bạn tạo mã sạch hơn nhanh hơn với ít
lỗi hơn. Hôm nay, mình muốn chia sẻ với bạn 10 mẹo hay mà tôi thực sự nghĩ
rằng chúng ta có thể sử dụng với tư cách là nhà phát triển giao diện người
dùng để làm việc hiệu quả hơn trong khi xây dựng ứng dụng bằng Tailwind CSS.
Bạn mệt mỏi khi phải thủ công căn giữa và padding cho container chính?
Đặt một số cài đặt cho vùng chứa của bạn trong tệp cấu hình và cài đặt này sẽ
tự động được áp dụng cho tất cả các lớp
.container.
// tailwind.config.js
module.exports = {
theme: {
container: {
center: true,
padding: "1.5rem",
},
},
};
Bạn không cần phải làm như thế này cho container chính nữa:
<div class="container p-6 mx-auto"></div>
Bây giờ, bạn chỉ cần sử dụng như thế này:
<div class="container"></div>
Đừng quên là bạn có thể tự tạo riêng cho mình các lớp tiện ích.
Thuộc tính extend trong tệp cấu
hình sẽ tự động tạo và thêm các lớp mới cho dự án của bạn. Thật tiện lợi khi
bạn cần các lớp bổ sung cho một thuộc tính CSS nhất định.
Chẳng hạn, khi nói đến max-height >, bạn chỉ có quyền truy cập vào các lớp sau:
.max-h-full /* max-height: 100%; */
.max-h-screen /* max-height: 100vh; */
Tuy nhiên, nếu bạn cần kiểm soát thuộc tính
max-h-xs >, >max-h-sm hoặc
max-h-md thì sao?
Chà, đây là cách bạn có thể tạo chúng:
// tailwind.config.js
module.exports = {
theme: {
extend: {
maxHeight: {
xs: "20rem",
sm: "24rem",
md: "28rem",
lg: "32rem",
xl: "36rem",
"2xl": "42rem",
"3xl": "48rem",
"4xl": "56rem",
"5xl": "64rem",
"6xl": "72rem",
},
},
},
}; >
Luôn biết breakpoint nào đang hoạt động.
style="margin-left: 1em; margin-right: 1em;"
>
data-original-height="670"
data-original-width="1068"
height="380"
src="https://blogger.googleusercontent.com/img/a/AVvXsEjnnUPKA9swIkCEDMdPKMpRRcw_ITk3XurE4ckMK29gpGYd7Jl3WRNmJaNYdrtDxyFZevG77hkZWQPXZDSprsqW0WWqBIRJVycSnYX7MhGZA2Enta8N6nu7VrXr6xJ5r2x5HnDMQPopv0L5AFWqO-DIMaX3THiZN9A56weE920kH4PAZbS_XvYukPe0PIs=w605-h380"
title="breakpoint"
width="605"
/>
Plugin
target="_blank"
>TailwindCSS Debug Screens >
sẽ cho phép bạn hiển thị màn hình hiện đang hoạt động ở chế độ phát triển. Quá
trình thiết lập không mất quá vài giây và có thể sẽ giúp bạn tiết kiệm rất
nhiều thời gian trong thời gian dài. Đây là cách bạn có thể cài đặt nó:
Mở terminal và nhập lệnh sau:
npm install tailwindcss-debug-screens --save-dev
// tailwind.config.js
module.exports = {
plugins: [require("tailwindcss-debug-screens")],
}; >
Thêm debug-screen class vào thẻ
<body> của bạn.
<body class="debug-screens"></body>
Trong tệp cấu hình Tailwind của bạn, hãy đặt
!impotant thành
true.
Tùy chọn này sẽ nối tất cả các lớp tiện ích với từ khóa
!important.
Điều này đặc biệt hữu ích khi bạn đang xử lý các thư viện của bên thứ ba có
thêm kiểu dáng cho một số thành phần. Bằng cách này, bạn sẽ đảm bảo rằng khi
bạn thêm một lớp tiện ích mới vào các component này, chúng sẽ luôn được áp
dụng.
// tailwind.config.js
module.exports = {
important: true,
}; >
Bây giờ, tất cả các lớp tiện ích của Tailwind sẽ được tạo ra như sau:
>!important >
.mt-1 {
margin-top: 1px !important;
}
.mt-2 {
margin-top: 2px !important;
}
.mt-3 {
margin-top: 3px !important;
}
/* và cứ như thế... */ >
Tốt nhất là nên tránh sử dụng @apply và extract mọi thứ into component.
Adam Wathan (Tailwind’s creator),
target="_blank"
>nói về điều này trên Tweet rằng >:
put off by long lists of classes into trying the framework. You should
almost never use it. Reuse your utility-littered HTML instead. >apply. >
Có nghĩa là: Tính năng trong Tailwind chỉ tồn tại để lừa những
người không thích lists dài các class khi thử sử dụng framework này. Bạn hầu
như không bao giờ nên sử dụng nó. Thay vào đó, hãy sử dụng utility-littered
HTML thay vì apply.
Nếu bạn đang sử dụng một framework như Vue.js hoặc React (nơi bạn define mọi
thứ là thành phần), sẽ rất đơn giản để tránh sử dụng tính năng này. Mình
hiếm khi (nếu có) sử dụng nó @apply
Mình cũng có một lý do khác để không sử dụng nó nhiều: Mình thấy việc gỡ lỗi
mã dễ dàng hơn khi mình chỉ sử dụng các lớp tiện ích trong mã của mình. Bạn
có thể xem kiểu nào được áp dụng cho từng tag vì bạn chỉ có một nơi duy nhất
mà nhóm của bạn có thể kiểm soát kiểu đó (tức là các class).
Vì vậy, hãy sử dụng tính năng này một cách cẩn thận để bạn có thể tiết kiệm
thời gian cho mình về lâu dài! @apply
Bạn cần định nghĩa riêng cho mình các
breakpoint?
Nếu các nhà thiết kế của bạn đang sử dụng các breakpoint khác với các
breakpoint do Tailwind cung cấp, đừng lo lắng! Chỉ cần mở tệp cấu hình
của bạn và xác định cấu hình của riêng bạn. Hãy nhớ rằng bạn có thể tạo các
breakpoint với cả hai định nghĩa
min-width và
min-width nếu cần.
// tailwind.config.js
module.exports = {
theme: {
screens: {
sm: "640px",
// => @media (min-width: 640px) { ... }
md: "768px",
// => @media (min-width: 768px) { ... }
lg: "1024px",
// => @media (min-width: 1024px) { ... }
xl: "1280px",
// => @media (min-width: 1280px) { ... }
},
},
}; >
Bạn thích px thay vì
rem để mặc định cho padding, margins,
width, height?
Thuộc tính spacing trong tệp cấu
hình của bạn cho phép bạn ghi đè tỷ lệ
spacing >/sizing mặc định trong tích tắc.
// tailwind.config.js
module.exports = {
theme: {
spacing: {
"1": "8px",
"2": "12px",
"3": "16px",
"4": "24px",
"5": "32px",
"6": "48px",
},
},
}; >
Làm cách nào để sử dụng order trong flex-items?
Bạn có thể đã quen thuộc tính này nếu bạn đang sử dụng flexbox. Tuy nhiên,
Tailwind không bao gồm nó. order
Một cách giải quyết tuyệt vời là sử dụng tiện ích
>
target="_blank"
>tailwindcss-flexbox-order > >.
Sau đó, bạn sẽ có thể định cấu hình và tạo các lớp
order flexbox với tất cả các
biến thể đáp ứng của chúng.
Theo mặc định, đây là các lớp tiện ích được tạo:
.-order-1 {
order: -1;
}
.order-0 {
order: 0;
}
.order-1 {
order: 1;
}
.order-2 {
order: 2;
}
.order-3 {
order: 3;
}
.order-4 {
order: 4;
}
.order-5 {
order: 5;
} >
Bạn có thể tắt tính năng preflight nếu
cần tích hợp Tailwind trong một dự án hiện có.
Từ tài liệu: preflight là một tập hợp các kiểu cơ sở cho các dự án Tailwind
được thiết kế để giải quyết vấn đề không nhất quán giữa nhiều trình duyệt và
giúp bạn làm việc dễ dàng hơn trong các giới hạn của hệ thống thiết kế.
Điều này có nghĩa là preflight sẽ xóa tất cả các margins, font-size, v.v.
mặc định cho tất cả các thành phần của bạn như heading, list, v.v.
Chẳng hạn, mình cần tích hợp dần Tailwind vào một dự án hiện có (có các kiểu
cơ bản nghiêm ngặt). Vấn đề với preflight là nó đã phá vỡ tất cả các giao diện
ứng dụng. Mình sẽ phải tự tay sửa hết những gì đã hỏng khi thêm Tailwind CSS.
Rất may thay mình đã tìm được cách khắc phục nó:
// tailwind.config.js
module.exports = {
corePlugins: {
preflight: false,
},
}; >
Làm cách nào để nhanh chóng tìm kiếm sự giúp đỡ khi bạn gặp vấn đề khi sử dụng
Tailwind CSS?
Tailwind là một cộng đồng đang phát triển bao gồm các nhà phát triển giao diện
người dùng đầy nhiệt huyết. Bạn có thể tiếp cận những người dùng khác thông
qua các kênh sau:
>Kênh Discord chính thức >
nếu bạn cần trò chuyện với những người dùng khác trong thời gian thực.
target="_blank"
>Không gian thảo luận trên Github >, đặc biệt nếu bạn có một số tính năng mà bạn cho là cần thiết để triển
khai.
>Tài khoản Twitter chính thức của họ >
để cập nhật các tính năng mới và các tài nguyên phải đọc khác về
Tailwind.
Sẽ dễ dàng hơn rất nhiều nếu biết những mẹo này trước khi bắt đầu một dự án
với Tailwind (đặc biệt là)
tailwindcss-debug-screens
Kể từ khi mình bắt đầu áp dụng chúng, làm việc với Tailwind thậm chí còn trở
nên thoải mái hơn. Nếu bạn có một mẹo khác không được liệt kê ở đây, đừng
ngần ngại trình bày và chia sẻ nó với tất cả chúng ta ở dưới phần bình luận.
Kết luận
Với 10 mẹo và thủ thuật Tailwind CSS này, bạn có thể nhanh chóng tạo ra giao
diện đẹp và hiệu quả. Hãy tận dụng các tính năng và utility classes mạnh mẽ
của Tailwind để tối ưu hóa thiết kế web của bạn.
Cảm ơn các bạn đã đọc bài viết!