TailwindCSS - Utility-first Framework (P1)
1. Tại sao lại chọn TailwindCSS
1.1 Tại sao lại đi tìm 1 framework mới
- Sau 1 thời gian dài dùng Antd mình thấy 1 số vấn đề:
- Đau đầu với việc phải override quá nhiều, sợ ảnh hưởng đến đoạn code chỗ khác
- Ảnh hưởng đến việc maintain
- Đối với 1 người kiến thức CSS cơ bản, dựa dẫm quá nhiều vào framework ăn sẵn có thể làm mất đi tư duy cơ bản về sử dụng CSS.
1.2 Sơ bộ về tailwindcss
- TailwindCSS là giải pháp tốt cho các vấn đề trên:
- Antd hay 1 số thư viện khác như bootstrap hay materia-ui sẽ cung cấp cả 1 component, trong khi đó tailwinds sẽ chỉ tập trung vào các helper class như hình sau .
(nguồn)
- Antd hay 1 số thư viện khác như bootstrap hay materia-ui sẽ cung cấp cả 1 component, trong khi đó tailwinds sẽ chỉ tập trung vào các helper class như hình sau .
- Sẽ thấy bên bootstrap sẽ có rất nhiều component như .btn trên trong khi đó thì tailwindcss sẽ tập trung vào các helper class với tên tương tự là .inline-block, .text-center, .text-blue-100 như hình minh họa ở trên
=> Có thể hiểu tailwindcss sẽ như 1 bộ logo và mình tự có thể lắp ghép theo ý mình.
1.3 Ưu điểm:
-
Dễ dàng quản lý và sửa đổi trong các dự án lớn.
-
Sử dụng các class được định nghĩa sẵn có khả năng tùy biến và mở rộng rất cao.
-
Các tên class được đặt dễ hiểu ví dụ:
<div class="inline-block ...">1</div><div class="block ...">1</div><div class="rounded-full h-24 w-24 flex items-center justify-center...">Circle</div>
-
Vì nó không cần override code để sửa theo ý mình sẽ không tạo thêm code thừa, điều làm tăng kích thước file
-
Có khả năng trích xuất các pattern phổ biến, lặp đi lặp lại thành các thành phần tùy chỉnh, có thể sử dụng lại trong hầu hết các trường hợp mà không cần viết một dòng CSS tùy chỉnh.
-
Nó có thể config để xóa các css không dùng bằng
purge, điều này sẽ giảm đi đáng kể file build của project.
1.4 Nhược điểm:
- Tailwindcss không tương thích vs IE11.
- Khi sử dụng nhiều class thì code sẽ rất dài. Ví dụ:
<div class="divide-y divide-gray-200">
<div class="py-8 text-base leading-6 space-y-4 text-gray-700 sm:text-lg sm:leading-7">
<p>An advanced online playground for Tailwind CSS, including support for things like:</p>
<ul class="list-disc space-y-2">
<li class="flex items-start">
<span class="h-6 flex items-center sm:h-7">
<svg class="flex-shrink-0 h-5 w-5 text-cyan-500" viewBox="0 0 20 20" fill="currentColor">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
</svg>
</span>
<p class="ml-2">
Customizing your
<code class="text-sm font-bold text-gray-900">tailwind.config.js</code> file
</p>
</li>
</ul>
</div>
</div>
1.5 Cách khắc phục:
- Mình có thể tự xây dựng riêng component để có thể tái sử dụng và giảm lượng class trên html theo ý mình bằng @apply ví dụ:
<button class="btn-indigo">
Click me
</button>
<style>
.btn-indigo {
@apply py-2 px-4 bg-indigo-500 text-white font-semibold rounded-lg shadow-md hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-400 focus:ring-opacity-75;
}
</style>
- Hoặc chúng ta có thể viết component plugin
// tailwind.config.js
const plugin = require('tailwindcss/plugin')
module.exports = {
prefix: 'tw-',
important: true,
plugins: [
plugin(function({ addComponents }) {
const buttons = {
'.btn': {
padding: '.5rem 1rem',
borderRadius: '.25rem',
fontWeight: '600',
},
...
}
addComponents(buttons)
})
]
}
- Nó sẽ tự gen ra code như dưới và mình chỉ cần việc dùng
.tw-btn {
padding: .5rem 1rem;
border-radius: .25rem;
font-weight: 600;
}
2. Lời tổng kết.
- Tóm lại chúng ta có thể hiểu
Tailwind là một tập hợp các lớp (class) cấp thấp. Chúng có thể được sử dụng như những miếng lego để xây dựng bất kỳ loại thành phần nào.
- Trích lời tác giả của Tailwindcss
It’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.
- Hi vọng sau khi đọc xong bài này mọi người có thể suy nghĩ đến tailwindcss như là 1 lựa chọn cho các dự án tiếp theo.