Tailwind CSS là gì
Tailwind Là một CSS Framework mới dùng để phát triển UI nhanh chóng, được phát hành lần đầu tiên từ tháng 10 năm 2019 dự án ban đầu được phát triển bởi Adam Wathan. khi nói đến các framework css thì chúng ta đều nghĩ đến ngay Bootstrap, Foundation, Material Design … tuy nhiên Tailwind lại khác các framework đó ở hướng tiếp cận.
Hầu hết các framework css chọn hướng tiếp cận là “Component first” đó là hướng tiếp cận theo kiểu mì ăn liền, họ tạo ra các components sẵn giúp cho lập trình viên chỉ việc sử dụng để hoàn thiện sản phẩm nhanh chóng nhưng chính vì vậy lại mang đến nhưng nhược điểm là việc Override các component đó rất khó khăn, còn Tailwind CSSs thì sử dụng hướng tiếp cận “Utility-first Framework”,
Điểm mạnh của Tailwind
Với hướng tiếp cận “Utility-first Framework” Tailwind có những điểm mạnh là:
- Dễ dàng quản lý và sử đổ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à thân thiện, nhìn vào class đó và có thể biết được class này nó đang style cái gì
- Sử dụng Flex nên rất dễ chia Layout
- Dễ cài đặt, dễ sử dụng, document của Tailwind rất dễ hiểu.
- Tối ưu cho môi trường di động và hỗ trợ responsive dễ dàng.
- 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.
Qua các điểm mạnh ở trên thì ta cũng đã có câu trả lời cho vấn đề vì sao nhiều dự án sử dụng tailwinds rồi, với những dự án cần giao diên có khả năng tùy biến và mở rộng cao thì Tailwind là một lựa chọn phù hợp
Nhược điểm của Tailwind
Nhược điểm lớn nhất là khi sử dụng Tailwind thì các thẻ của chúng ta cần rất nhiều class, mỗi thuộc tính là một class khi đó code cũng sẽ rất dài và rắc rối.
cài đặt Tailwind
- Sử dụng link trực tiếp trong html
1 2 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://unpkg.com/<a class="__cf_email__" href="/cdn-cgi/l/email-protection">[email protected]</a>/dist/tailwind.min.css<span class="token punctuation">"</span></span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
- Ta cài đặt qua npm
1 2 | npm install tailwindcss |
Ta tạo file styles.css, ở đây sẽ chứa các framework style dùng chỉ thị @tailwind:
1 2 3 4 5 6 | @tailwind base; @tailwind components; @tailwind utilities; |
Sau đó chạy lệnh npx tailwind init
Lệnh này tạo ra một tệp tailwind.config.js rỗng, trong đó chúng ta sẽ đặt các tùy chọn tùy chỉnh trong quá trình phát triển. Tệp được tạo chỉ chứa:
1 2 3 4 5 6 | module.exports = { theme: {}, variants: {}, plugins: [], } |
Bước tiếp theo là xây dựng style để sử dụng chúng:
1 2 | npx tailwind build styles.css -o output.css |
Cuối cùng, chúng ta hãy link tệp output.css được tạo và Font Awesome trong HTML.
1 2 3 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>output.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> |
Sử dụng utility classes xây dựng giao diện
Ta xây dựng giao diện box chat trên bằng đoạn code này
1 2 3 4 5 6 7 8 9 10 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex-shrink-0<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>h-12 w-12<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>/img/logo.svg<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>ChitChat Logo<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-xl font-medium text-black<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>ChitChat<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-gray-500<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>You have a new message!<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Ở ví dụ trên ta sử dụng các class:
- (flex, flex-shrink-0, and p-6) : để kiểm soát thẻ bao bọc
- (max-w-sm and mx-auto) : để giới hạn chiều rộng và căn giữa theo chiều ngang
- (bg-white, rounded-xl, and shadow-md) css nền, viền, bóng cho thẻ
- (w-12 and h-12) : chiều rộng và cao cho ảnh
- (space-x-4) : khoảng cách giữa logo và text
- (text-xl, text-black, font-medium, etc.) : font size, text color, và font-weight
Qua các class ví dụ trên ta thấy cách đặt tên class rất dễ hiểu, tên đúng như chức năng của nó, các bạn có thể xem qua các ví dụ dưới tương tự
Ví dụ:
Ta chỉ cần 1 đoạn code đơn giản như này là có thể tạo được giao diện trên
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>grid grid-cols-1 gap-5 mt-6 sm:grid-cols-2 lg:grid-cols-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>template</span> <span class="token attr-name">x-for</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>i in 4<span class="token punctuation">"</span></span> <span class="token attr-name">:key</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>i<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-4 transition-shadow border rounded-lg shadow-sm hover:shadow-lg<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-start justify-between<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex flex-col space-y-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-gray-400<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Total Users<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-lg font-semibold<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>100,221<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>p-10 bg-gray-200 rounded-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>inline-block px-2 text-sm text-white bg-green-300 rounded<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>14%<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span><span class="token punctuation">></span></span>from 2019<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>template</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Hay bạn cần tạo box như trên thì sử dụng tailwind với các class có sẵn cũng rất đơn giản bằng đoạn code này
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mt-6<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>max-w-4xl px-10 py-6 bg-white rounded-lg shadow-md<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex justify-between items-center<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>font-light text-gray-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Feb 14, 2021<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>span</span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>px-2 py-1 bg-gray-600 text-gray-100 font-bold rounded hover:bg-gray-500<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>PHP<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mt-2<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-2xl text-gray-700 font-bold hover:underline<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span>PHP: Array to Map<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span> <span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mt-2 text-gray-600<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Tempora expedita dicta totam aspernatur doloremque. Excepturi iste iusto eos enim reprehenderit nisi, accusamus delectus nihil quis facere in modi ratione libero! <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex justify-between items-center mt-4<span class="token punctuation">"</span></span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-blue-500 hover:underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Read more<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>#<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>flex items-center<span class="token punctuation">"</span></span> <span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>https://images.unsplash.com/photo-1531251445707-1f000e1e87d0?ixlib=rb-1.2.1<span class="token entity" title="&">&amp;</span>ixid=eyJhcHBfaWQiOjEyMDd9<span class="token entity" title="&">&amp;</span>auto=format<span class="token entity" title="&">&amp;</span>fit=crop<span class="token entity" title="&">&amp;</span>w=281<span class="token entity" title="&">&amp;</span>q=80<span class="token punctuation">"</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>avatar<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>mx-4 w-10 h-10 object-cover rounded-full hidden sm:block<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"><</span>h1</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text-gray-700 font-bold hover:underline<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>Lisa Way<span class="token tag"><span class="token tag"><span class="token punctuation"></</span>h1</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>a</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> <span class="token tag"><span class="token tag"><span class="token punctuation"></</span>div</span><span class="token punctuation">></span></span> |
Kết bài
Qua bài này chúng ta cũng thấy được điểm mạnh điểm yếu và cách dùng cơ bản của framework css tailwind từ đó cũng có thể cân nhắc sử dụng.