Tại một số điểm, chúng ta sẽ cần tùy chỉnh một số thành phần nhất định, tạo các thành phần mới và đảm bảo rằng codebase cuối cùng được thống nhất và dễ bảo trì sau khi thay đổi.
Thật khó có thể đáp ứng các nhu cầu trên với các framework như Bootstrap và Foundation, hàng đống các style "áp đặt" và không phù hợp. Do đó, chúng ta phải liên tục giải quyết một số vấn đề cụ thể trong khi cố gắng ghi đè style mặc định. Chả vui chút nào, đúng không?
Các giải mì-ăn-liền rất dễ thực hiện, nhưng không linh hoạt và bị giới hạn trong các ranh giới nhất định. Mặt khác, việc styling cho các trang web không cần đến CSS framework rất mạnh mẽ và linh hoạt, nhưng khó lòng quản lý và bảo trì. Vậy, giải pháp nằm ở đâu?
Giải pháp, như mọi khi, sẽ nằm ở điểm trung hòa. Chúng ta cần tìm và tạo sự cân bằng phù hợp giữa cụ thể và trừu tượng. Một CSS framework cấp thấp sẽ mang đến sự cân bằng như vậy. Có một số framework ở thuộc loại này và trong hướng dẫn này, chúng ta sẽ khám phá framework phổ biến nhất, Tailwind CSS.
Vậy Tailwind là gì?
Tailwind không chỉ là một CSS framework, đây chính là nền tảng tạo nên cả một hệ thống thiết kế. — Tailwind website
Tailwind là một tập hợp các lớp tiện ích (class) cấp thấp. Chúng có thể được sử dụng như những viên gạch lego để xây dựng bất kỳ loại thành phần nào. Framework bao gồm các thuộc tính CSS quan trọng nhất (nhưng có thể dễ dàng mở rộng bằng nhiều cách khác nhau). Với Tailwind, tùy biến trở nên dễ dàng hơn bao giờ hết. Framework này có tài liệu vô cùng chi tiết, bao gồm tất cả cách sử dụng chi tiết của class và chỉ dẫn nhiều cách tùy chỉnh khác nhau. Tất cả các trình duyệt hiện đại và IE11 +, đều được hỗ trợ.
Tại Sao Bạn Nên Dùng Utility-first Framework?
Một CSS framework cấp thấp, linh hoạt như Tailwind có rất nhiều lợi ích. Có thể kể đến:
- Bạn có quyền kiểm soát lớn hơn đến cách các yếu tố xuất hiện. Chúng ta có thể thay đổi và tinh chỉnh hình ảnh của một phần tử xuất hiện với các utility class.
- Dễ dàng quản lý và duy trì trong các dự án lớn, vì bạn chỉ duy trì các tệp HTML, thay vì một CSS codebase.
- Cho phép xây dựng các thiết kế trang web độc đáo dễ dàng hơn, có thể tùy chỉnh mà không phải "vật lộn" với các style không mong muốn.
- Có khả năng tùy biến và mở rộng rất cao, mang đến cho chúng ta sự linh hoạt không giới hạn.
- Tối ưu cho môi trường di động và dễ dàng thực hiện các mẫu thiết kế responsive.
- 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.
- Có các class siêu dễ hiểu. Chúng ta có thể tưởng tượng các phần tử sau khi được style sẽ trông như thế nào chỉ bằng cách đọc tên class.
Cuối cùng, tác giả của Tailwind tự khẳng định:
it’s just about impossible to think this is a good idea the first time you see it — you have to actually try it.
Vậy thì mình dùng thử nhé!
Bắt đầu và cài đặt Tailwind
Để thể hiện các tính năng tùy biến của Tailwind, chúng ta cần cài đặt nó qua npm:
npm install tailwindcss
Bước kế tiếp là tạo file
styles.css, tại đây sẽ chứa các framework style dùng chỉ thị @tailwind:@tailwind base;
@tailwind components;
@tailwind utilities;
Sau đó, chúng ta hãy chạy lệnh npx tailwind init, lệnh sẽ 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:
module.exports = {
theme: {},
variants: {},
plugins: [],
}
Bước tiếp theo là xây dựng style để sử dụng chúng:
npx tailwind build styles.css -o output.css <link rel="stylesheet" type="text/css" href="output.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.9.0/css/all.min.css">
Xong rồi, ta cùng chuyển sang "sáng tạo" nào.
Xây dựng Website Mẫu đơn page
Trong phần còn lại của hướng dẫn, chúng ta sẽ xây dựng một trang web mẫu gồm một page bằng cách sử dụng sức mạnh và tính linh hoạt của các Tailwind class.
Bài viết sẽ không giải thích mọi utility (sẽ gây nhàm chán và mệt mỏi) vì vậy chúng tôi khuyến nghị bạn nên sử dụng Tailwind cheatsheet để tham khảo nhanh. Nó chứa tất cả các utilities cùng với tác dụng của chúng, cộng với các liên kết trực tiếp đến tài liệu.
Chúng ta sẽ xây build template từng phần một, theo thứ tự là Header, Services, Project, Team và Footer.
Trước tiên chúng ta bọc tất cả các phần trong một container:
Chúng ta sẽ xây build template từng phần một, theo thứ tự là Header, Services, Project, Team và Footer.
Trước tiên chúng ta bọc tất cả các phần trong một container:
<div class="container mx-auto">
</div>Header (Logo, Navigation)
Phần đầu tiền, Header, sẽ chứa logo bên trái và link điều hướng bên phải. Xem thử kết quả nhé:
Giờ thì xem thử phần code.
<div class="flex justify-between items-center py-4 bg-blue-900">
<div class="flex-shrink-0 ml-10 cursor-pointer">
<i class="fas fa-drafting-compass fa-2x text-orange-500"></i>
<span class="ml-1 text-3xl text-blue-200 font-semibold">WebCraft</span>
</div>
<i class="fas fa-bars fa-2x visible md:invisible mr-10 md:mr-0 text-blue-200 cursor-pointer"></i>
<ul class="hidden md:flex overflow-x-hidden mr-10 font-semibold">
<li class="mr-6 p-1 border-b-2 border-orange-500">
<a class="text-blue-200 cursor-default" href="#">Home</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Services</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Projects</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Team</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">About</a>
</li>
<li class="mr-6 p-1">
<a class="text-white hover:text-blue-300" href="#">Contacts</a>
</li>
</ul>
</div>
Như bạn thấy đấy, class khá dễ hiểu. Nên chúng ta sẽ chỉ tìm hiểu một số class quan trọng nhất thôi.
Đầu tiên, chúng ta sẽ tạo một flex container và căn chỉnh các items trong đó theo chiều ngang và chiều dọc. Chúng ta cũng sẽ thêm một ít phần đệm bên trên cùng và dưới cùng, mà Tailwind kết hợp trong một utility py duy nhất. Chắc bạn cũng biết rồi, sẽ có thêm một variant
px cho bên trái và bên phải. Kiểu "code tắt" này thường được sử dụng rộng rãi trong nhiều ultility khác. Với màu nền, chúng ta sẽ sử dụng màu xanh đậm nhất (bg-blue-900) từ bảng màu của Tailwind. Bảng màu chứa một số màu với mỗi màu được phân phối từ 100 đến 900. Ví dụ: blue-100, blue-200, blue-300, v.v.
Trong Tailwind, chúng ta áp dụng màu cho một property bằng cách chỉ định property theo sau là màu và số cường độ. Ví dụ:
text-white, bg-gray-800, border-red-500. Dễ như ăn bánh.Đối với logo ở phía bên trái, chúng ta sẽ sử dụng phần tử div, không thu nhỏ (flex-co-0) và di chuyển nó ra xa khỏi cạnh bằng cách áp dụng margin-left property (ml-10). Tiếp theo, chúng ta sử dụng icon trong Font Awesome có class kết hợp hoàn hảo được với các icon của Tailwind. Chúng ta sẽ dùng một trong số các icon này để làm icon màu cam. Đối với phần văn bản của logo, chúng ta sẽ sử dụng văn bản lớn, màu xanh nhạt, bán đậm, với một phần bù nhỏ ở bên phải.
Ở giữa, chúng ta sẽ thêm một icon chỉ hiển thị trên thiết bị di động. Ở đây chúng ta sử dụng một trong các responsive breakpoint prefixes (md). Tailwind, như Bootstrap và Foundation, đểu ưu tiên thiết kế trên di động. Điều này có nghĩa là khi chúng ta sử dụng các utility không có tiền tố (visible), chúng sẽ được áp dụng lên tất cả thiết bị từ nhỏ nhất đến lớn nhất. Nếu chúng ta muốn styling khác nhau cho các thiết bị khác nhau, chúng ta cần sử dụng breakpoint prefix (tiền tố điểm dừng). Vì vậy, trong trường hợp của chúng ta, biểu tượng sẽ hiển thị trên các thiết bị nhỏ và biến mất (
Ở bên phải chúng ta sẽ đặt các liên kết điều hướng. Chúng ta sẽ tạo kiểu cho liên kết Home khác đi, cho thấy đó là liên kết đang active. Chúng ta cũng sẽ di chuyển điều hướng từ cạnh và đặt nó ẩn đi khi overflow (overflow-x-hidden). Điều hướng sẽ được ẩn (hidden) trên thiết bị di động và được đặt thành flex (md:flex) trên thiết bị tầm trung trở lên.
md:invisible) trên thiết bị tầm trung trở xuống.
Bạn có thể đọc thêm về responsiveness trong tài liệu.
Services
Đi đến phần tiếp theo, services nhé:
Code:
<div class="w-full p-6 bg-blue-100">
<div class="w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700">OUR SERVICES</div>
<div class="p-2 text-center text-lg text-gray-700">We offer the best web development solutions.</div>
<div class="flex justify-center flex-wrap p-10">
<div class="relative w-48 h-64 m-5 bg-white shadow-lg">
<div class="flex items-center w-48 h-20 bg-orange-500">
<i class="fas fa-bezier-curve fa-3x mx-auto text-white"></i>
</div>
<p class="mx-2 py-2 border-b-2 text-center text-gray-700 font-semibold uppercase">UI Design</p>
<p class="p-2 text-sm text-gray-700">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa.</p>
<div class="absolute right-0 bottom-0 w-8 h-8 bg-gray-300 hover:bg-orange-300 text-center cursor-pointer">
<i class="fas fa-chevron-right mt-2 text-orange-500"></i>
</div>
</div>
...
</div>
</div>
Chúng ta sẽ tạo section với nền xanh nhạt, và thêm subtitle gạch chân cùng subtitle.
Tiếp theo, chúng ta sẽ dùng một flex container cho các mục trong Services ,với
Ở đây chúng ta sử dụng một trong các pseudo-class variant (di chuột, tiêu điểm, v.v.). Chúng được dùng để làm responsive breakpoints. Chúng ta dùng tiếp pseudo-class prefix, theo sau là dấu hai chấm và tên thuộc tính (
flex-wrap để các mục di chuyển khi resize. Ta đặt kích thước cho mỗi thẻ và thêm một số khoảng trắng và bóng đổ. Mỗi thẻ có một phần màu với một biểu tượng chủ đề, tiêu đề và mô tả. Và chúng ta cũng đặt một nút có biểu tượng ở góc dưới bên phải.Ở đây chúng ta sử dụng một trong các pseudo-class variant (di chuột, tiêu điểm, v.v.). Chúng được dùng để làm responsive breakpoints. Chúng ta dùng tiếp pseudo-class prefix, theo sau là dấu hai chấm và tên thuộc tính (
hover:bg-orange-300).
Để rút ngắn, chúng tôi sẽ chỉ chow phần code cho thẻ đầu tiên. Những thẻ khác cũng giống như vậy. Bạn chỉ việc đổi màu, icon, và tiêu đề. Xem thêm file HTML thành phẩm trên GitHub repo để tham khảo nhé.
Projects
Phần kế tiếp, Projects trông như sau:
Code:
<div class="section bg-blue-200">
<div class="section-title">OUR PROJECTS</div>
<div class="section-subtitle">Explore our rich and diverse portfolio.</div>
<nav class="flex justify-center flex-wrap mt-4 mb-8 text-white">
<div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">All</div>
<div class="h-8 mr-2 px-3 py-1 bg-blue-800 text-center -skewx-20">UI Design</div>
<div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">Web Dev</div>
<div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">Mobile Apps</div>
<div class="h-8 mr-2 px-3 py-1 bg-blue-400 hover:bg-blue-600 text-center cursor-pointer -skewx-20">SEO</div>
</nav>
<div class="flex justify-center flex-wrap">
<div class="w-48 h-48 m-2 hover:-mt-1 border-4 border-orange-600 rounded-tl-2xl rounded-br-2xl cursor-pointer hover:shadow-lg">
<img class="w-full h-full object-cover rounded-tl-2xl rounded-br-2xl" src="design1.jpg" />
</div>
...
</div>
</div>
Đầu tiên, bạn có thể nhận thấy rằng ở đây tôi sử dụng class
section. Class này không có sẵn trong Tailwind. Chúng tối sẽ chỉ bạn cách tạo ngay đây.
Bởi vì cả ba phần giữa đều khá na ná nhau - dẫn đến sự lặp lại code - nên giờ là lúc để bắt đầu xem xét ở cấp component (thành phần). Một trong những tính năng tuyệt vời mà Tailwind cung cấp là khả năng dễ dàng trích xuất và tạo bất kỳ loại thành phần tùy chỉnh nào. Vì vậy, ở đây chúng ta sẽ trích xuất một thành phần section tùy chỉnh.
Mở tệp style.css và thêm các class sau ngay sau khi khai báo
Mở tệp style.css và thêm các class sau ngay sau khi khai báo
components:...
@tailwind components;
.section {
@apply w-full p-6;
}
.section-title {
@apply w-48 mx-auto pt-6 border-b-2 border-orange-500 text-center text-2xl text-blue-700;
}
.section-subtitle {
@apply p-2 text-center text-lg text-gray-700;
}
...
Như bạn có thể thấy, để tạo một component class, chúng ta sử dụng chỉ thị @apply theo sau là các utilities cần thiết.
Bây giờ, để sử dụng các class mới, chúng ta cần xây dựng lại styles:
npx tailwind build styles.css -o output.css
Bây giờ, thay vì một loạt các utilities, chúng ta chỉ sử dụng một class duy nhất cho mỗi element. Và như bạn có thể thấy, các class tùy chỉnh có thể được sử dụng một cách an toàn kết hợp với các utilities thông thường (section bg-blue-200).
Đến phần nút điều hướng. Chúng ta đặt chúng trong một flex container và tạo kiểu cho chúng với những hình chữ nhật đẹp mắt. Để năng động và phong cách hơn một chút, ta áp dụng thêm hiệu ứng xiên nhẹ. Vấn đề là Tailwind không cung cấp utility này. Vì vậy, đã đến lúc phải học cách tạo ra các utility của riêng mình. Không khó lắm đâu.
Mở lại
styles.css và thêm class cần thiết ngay sau khai báo utilities:...
@tailwind utilities;
.-skewx-20 {
transform: skewX(-20deg);
}
...
Những gì chúng ta muốn là xếp các hình chữ nhật theo chiều ngang. Chúng ta cần skewX() với giá trị âm. Trong Tailwind, các utilities có giá trị âm được tạo bằng cách đặt dấu trừ trước tên utility.
Chúng ta có thể thấy tác dụng của utility mới ngay sau khi chúng ta xây dựng lại style.
Đọc thêm nhiều thông tin hơn về việc thêm các tiện ích mới.
Bây giờ, chúng ta tạo một flex container khác cho các thẻ projects. Chúng ta muốn làm tròn các góc trên cùng bên trái và dưới cùng bên phải, nhưng độ làm tròn mà utility
rounded cung cấp ít hơn cần thiết. Vì vậy, lần này chúng ta sẽ học cách tùy chỉnh theme mặc định của Tailwind.theme: {
extend: {
borderRadius: {
xl: '1rem',
'2xl': '2rem',
'3xl': '3rem'
}
}
},
Ở đây chúng ta sử dụng
extend key, vì chúng ta không muốn ghi đè các tùy chọn khác, mà chỉ muốn thêm các tùy chọn bổ sung. Sau khi xây dựng lại style, chúng ta có thể thấy các tùy chọn mới của mình có hiệu lực như thế nào.
Có thêm một điều nữa mà chúng ta muốn làm mà Tailwind không cung cấp theo mặc định: khiến thẻ tăng nhảy một chút khi di chuột. Vì vậy, chúng ta cần thêm negative margin khi di chuột. Nhưng để làm cho nó hoạt động, chúng ta cần phải kích hoạt variant
hover cho utility margin. variants: {
margin: ['responsive', 'hover']
},
Điều quan trọng ở đây là chúng ta phải luôn cung cấp danh sách đầy đủ các biến thể mà chúng ta muốn kích hoạt, không chỉ các biến thể mới.
Team
Ở giai đoạn này, chắc bạn đã hiểu khá rõ về cách thức hoạt động của Tailwind và việc xây dựng phần Team sẽ khá quen thuộc. Ở đây, ta sẽ có:
Code:
<div class="section bg-blue-100">
<div class="section-title">OUR TEAM</div>
<div class="section-subtitle">Meet our skilled professionals.</div>
<div class="flex justify-center flex-wrap">
<div class="w-48 m-4 py-2 bg-white shadow-lg">
<img class="w-24 h-24 mx-auto rounded-full" src="jessica.jpg" />
<p class="mx-2 mt-2 text-center text-lg text-gray-700 font-semibold">Jessica Thompson</p>
<p class="text-center text-gray-600">UI Artisan</p>
<div class="flex justify-center items-center mt-2">
<i class="fab fa-facebook-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i>
<i class="fab fa-twitter-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i>
<i class="fab fa-google-plus-square fa-2x mx-1 text-blue-500 hover:text-orange-500 cursor-pointer"></i>
</div>
</div>
...
</div>
</div>
Ở đây, chúng ta sẽ tạo một bộ thẻ profile. Code cho phần này có tính lặp lại cao, vì vậy chúng ta sẽ trích xuất code trong một thẻ component có thể tái sử dụng. Cái này thì đã hướng dẫn bên trên rồi đấy.
...
.card {
@apply w-48 m-4 py-2 bg-white shadow-lg;
}
.card-image {
@apply w-24 h-24 mx-auto rounded-full;
}
.card-title {
@apply mx-2 mt-2 text-center text-lg text-gray-700 font-semibold;
}
.card-subtitle {
@apply text-center text-gray-600;
}
.card-icons {
@apply flex justify-center items-center mt-2;
}
.card-icon {
@apply mx-1 text-blue-500 cursor-pointer;
}
.card-icon:hover {
@apply text-orange-500;
}
...
Bây giờ, hãy để xây dựng lại style và sử dụng class card trong tệp của chúng ta. Chúng ta sẽ đổi utility với class, và kết quả là một phiên bản code ngắn hơn nhiều.
<div class="section bg-blue-100">
<div class="section-title">OUR TEAM</div>
<div class="section-subtitle">Meet our skilled professionals.</div>
<div class="flex justify-center flex-wrap">
<div class="card">
<img class="card-image" src="jessica.jpg" />
<p class="card-title">Jessica Thompson</p>
<p class="card-subtitle">UI Artisan</p>
<div class="card-icons">
<i class="fab fa-facebook-square fa-2x card-icon"></i>
<i class="fab fa-twitter-square fa-2x card-icon"></i>
<i class="fab fa-google-plus-square fa-2x card-icon"></i>
</div>
</div>
...
</div>
</div>Footer (About, Contacts)
Bây giờ chúng ta sẽ nhìn vào phần Footer cuối cùng. Phần này sẽ chứa ba cột và sẽ trông như thế này:
Code:
<div class="w-full bg-blue-900">
<div class="flex flex-wrap text-center text-white">
<div class="w-full md:w-1/3 p-5 border-r border-blue-800 md:text-left">
<div class="my-6 ml-3 text-xl font-semibold">ABOUT US</div>
<p class="p-3 text-gray-400">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean ac est massa. Donec eget elementum sapien, tincidunt tempor nunc. Cras sodales id ipsum at convallis.</p>
<p class="p-3 text-gray-400">Morbi tristique massa nec massa auctor, at scelerisque felis consectetur. Morbi tempus et odio sit amet feugiat. Maecenas dignissim a turpis in molestie. Fusce tincidunt vestibulum iaculis.</p>
</div>
<div class="w-full md:w-1/3 p-5 border-r border-blue-800">
<div class="my-6 text-xl font-semibold">CONTACT US</div>
<p class="mt-8 text-gray-400">
A108 Adam Street <br>
New York, NY 535022 <br>
United States <br>
<strong>Phone:</strong> +1 5589 55488 55 <br>
<strong>Email:</strong> info@webcraft.com
</p>
<div class="relative w-20 h-20 mx-auto my-12 bg-blue-300 rotate-45">
<div class="flex justify-center items-center absolute left-0 top-0 w-10 h-10 hover:-ml-1 hover:-mt-1 bg-blue-800 cursor-pointer">
<i class="fab fa-facebook-f fa-lg text-blue-500 -rotate-45"></i>
</div>
<div class="flex justify-center items-center absolute top-0 right-0 w-10 h-10 hover:-mt-1 hover:-mr-1 bg-blue-800 cursor-pointer">
<i class="fab fa-twitter fa-lg text-blue-500 -rotate-45"></i>
</div>
<div class="flex justify-center items-center absolute right-0 bottom-0 w-10 h-10 hover:-mr-1 hover:-mb-1 bg-blue-800 cursor-pointer">
<i class="fab fa-google-plus-g fa-lg text-blue-500 -rotate-45"></i>
</div>
<div class="flex justify-center items-center absolute bottom-0 left-0 w-10 h-10 hover:-mb-1 hover:-ml-1 bg-blue-800 cursor-pointer">
<i class="fab fa-linkedin-in fa-lg text-blue-500 -rotate-45"></i>
</div>
</div>
</div>
<div class="w-full md:w-1/3 p-5">
<div class="mt-6 text-xl font-semibold">SAY HELLO!</div>
<form class="w-4/5 mx-auto mt-2 px-6 pt-6 pb-4 rounded">
<div class="flex items-center mb-4">
<input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text" placeholder="Username">
</div>
<div class="flex items-center mb-4">
<input class="w-full h-10 p-2 border-b border-blue-800 bg-blue-900 text-white" type="text" placeholder="Email">
</div>
<div class="mb-6">
<textarea class="w-full h-24 px-2 pt-2 border-b-2 border-blue-800 bg-blue-900 text-white" placeholder="Message"></textarea>
</div>
<div class="flex justify-between items-center">
<button class="w-full py-2 px-4 rounded bg-orange-600 hover:bg-orange-700 text-white font-bold" type="button">SEND</button>
</div>
</form>
</div>
</div>
</div>
Ở đây, chúng ta sẽ tạo ra một lưới responsive ba cột bằng cách sử dụng utility Flexbox và utility width với các responsive variant của nó. Bằng cách sử dụng các class w-full md:w-1/3, chúng ta buộc các cột được xếp chồng lên nhau trên thiết bị di động và theo hàng ngang trên thiết bị tầm trung và lớn hơn.
Trong cột đầu tiên, văn bản sẽ được căn trái trên thiết bị tầm trung và lớn hơn (md: text-left).
Như chúng ta có thể thấy, chúng ta cần tạo thêm hai utility cho các hoạt động xoay. Vì vậy, chúng ta hãy mở lại style.css và thêm các class cần thiết:
Trong cột thứ hai, chúng ta đặt một số thông tin liên hệ và utility cho chia sẻ mạng xã hội. Hãy cùng xem cách tạo.
Chúng ta sẽ sử dụng một flex container vuông để đặt bốn hình vuông nhỏ hơn đều trên mỗi góc. Chúng ta xoay tất cả các hình vuông 45 độ. Bên trong mỗi hình vuông nhỏ, chúng ta đặt một biểu tượng mạng xã hội được xoay -45 độ để căn chỉnh với container tương ứng. Khi di chuột, mỗi hình vuông nhỏ di chuyển một chút ra ngoài hình vuông lớn.
...
.rotate-45 {
transform: rotate(45deg);
}
.-rotate-45 {
transform: rotate(-45deg);
}
...
Xong rồi, re-build lại styles và xem kết quả nhé.
Ở cột cuối, ta sẽ có một form điền thông tin.
Nhắc Nhỏ
Bạn chắc cũng thấy rằng kích thước tệp cuối cùng là khá lớn. Đừng lo lắng, điều này có thể được sửa chữa. Để biết thông tin chi tiết, xem phần kiểm soát kcihs thước tệp trong tài liệu.
Bạn cũng đã biết làm thế nào để đối phó với vấn đề lặp code rồi đấy, hãy thử thực hành trích xuất dưới dạng component để thực hành nhé!
Bạn cũng đã biết làm thế nào để đối phó với vấn đề lặp code rồi đấy, hãy thử thực hành trích xuất dưới dạng component để thực hành nhé!
Lời Kết
For me, personally, after many hours of “fighting” and “battling” with styles from frameworks like Bootstrap, Foundation, Semantic UI, UIkit, and Bulma, using Tailwind utilities feels like flying freely in a cloudless sky.
Như bạn có thể thấy, Tailwind cung cấp cho bạn một quy trình làm việc đơn giản, không hạn chế các tùy chọn hay hạn chế tính linh hoạt. Cách hoạt động "tôn thờ" utility của Tailwind đã được triển khai thành công bởi các công ty lớn như GitHub, Heroku, Kickstarter, Twitch, Segment, v.v.Đối với cá nhân tác giả, sau nhiều giờ chiến đấu vật lộn với Bootstrap, Foundation, Semantic UI, UIkit và Bulma. Tailwind mang lại cảm giác như đang bay tự do trên bầu trời vậy :).
Theo Sitepoint
Nhận xét
Đăng nhận xét