ReactJS: Giới thiệu về CSS Tailwind
Trong bài viết này, chúng tôi sẽ nói về framework yêu thích của nhiều người: CSS Tailwind. Một thư viện hoàn toàn theo phong cách bất khả tri, dựa trên tiện ích để tạo các thiết kế nhanh chóng và đáp ứng. Tailwind đơn giản đến mức một khi bạn hiểu các quy ước và mẫu đặt tên, bạn gần như có thể đoán được hầu hết các chức năng mà không cần tài liệu.
Tất cả các tùy chọn được giới thiệu ở đây có thể được khám phá chi tiết hơn trong tài liệu chính thức.
Cài đặt
Mặc dù có một số phương pháp khác nhau để cài đặt Tailwind như Gulp, postCSS hoặc thậm chí là CLI của riêng chúng, nhưng cách đơn giản nhất để bắt đầu vì lợi ích của việc học là sử dụng URL CDN từ unkg : https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css.
Hoặc, bạn có thể cài đặt thư viện vào dự án của mình bằng npm hoặc Yarn:
npm i tailwindcss # hoặc từ Yarn: yarn add tailwindcss
Bản mẫu (Boilerplate)
Đây là một tệp HTML soạn sẵn đơn giản bao gồm Tailwind từ unkg:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"> <title>Tailwind CSS</title> </head> <body> </body> </html>
Màu sắc
Việc đặt tên class cho các màu luôn giống nhau và có dạng element-color-intensity. Chẳng hạn, nền màu đỏ sẽ được đặt là bg-red-500, với giá trị số nằm trong khoảng từ 100 đến 900. Mẫu này áp dụng cho đường viền, nền và văn bản.
Đây là một ví dụ đơn giản:
<h1 class="text-blue-400">Hello World</h1> <p class="text-white bg-indigo-900">Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque, veniam.</p> <!-- Đường viền cần được thiết lập trước khi thay đổi được border-color --> <input type="text" class="bg-transparent text-white border border-red-600" placeholder="input...">
Kích thước và khoảng cách
Chiều rộng và chiều cao, được rút ngắn thành w và h, có thể nhận các giá trị từ 0 đến 64 (thiếu một số giá trị mà bạn có thể kiểm tra trong tài liệu hoặc IntelliSense của VSCode) và một số từ khóa như auto, full cho 100% hoặc screen cho 100vw/vh. Chiều rộng cũng có thể sử dụng các phân số từ 1-6 hoặc trên 12, vì vậy chúng ta có thể viết 50% dưới dạng 1/2, 2/4, 3/6, 6/12.
Còn về khoảng cách thì hoạt động rất giống nhau, bao gồm thuộc tính, side (viết tắt không có dấu gạch ngang), sau đó là giá trị. Chẳng hạn, padding-bottom: 2rem; trở thành pb-8, và phạm vi từ 0 đến 64 và side sẽ là t,b ,l ,r ,x ,y cho right và left, hoặc top và bottom.
<div class="bg-green-700 h-16 w-auto mr-10"></div> <div class="bg-blue-700 h-24 w-4/6 my-16"></div> <div class="bg-red-700 h-40 w-6/12 mx-auto"></div> <div class="bg-purple-700 h-56 w-2/12 ml-48"></div> <div class="border border-white h-40 w-56 mt-10 mx-auto"> <h1 class="text-white py-16 px-16">I'm a box</h1> </div>
Bố cục (Layout)
Tailwind cung cấp cho chúng ta nhiều tiện ích của định vị CSS tiêu chuẩn, như float, position và thậm chí là Flexbox. Việc sử dụng chúng gần như chính xác như bạn mong đợi, ngoại trừ việc với Flexbox, bạn chỉ cần khởi tạo là flex trước.
Tương tự như kích thước, quy tắc đặt tên chỉ là property-value, ví dụ như một float bên phải sẽ trở thành float-right và justify-content: center; trở thành justify-center.
<!-- Basic Navbar -->
<nav class="flex justify-between items-center px-16 bg-purple-800 text-white h-24">
<h1>Title</h1>
<ul class="flex justify-between w-56">
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
<a href="#">
<li>Link</li>
</a>
</ul>
</nav>
Kiểu chữ
Bên cạnh những thứ tiêu chuẩn chúng ta đã có thể làm trong CSS, Tailwind cung cấp một số phím tắt cho tiện dùng, chẳng hạn như thêm dự phòng cho họ phông chữ của chúng ta, mà chúng ta có thể xử lý chỉ đơn giản là font-sans hoặc font-serif và font-mono.
Thay vì các đơn vị 0-64 mà chúng ta đã sử dụng, font-size (rút gọn thành text) sẽ lấy xs, sm, base, lx và xl thông qua 6xl.
Bên cạnh những ngoại lệ đó, hầu hết các tùy chọn văn bản là CSS đều có sẵn với các mẫu đặt tên giống như trước đây.
<p class="text-md font-mono font-bold text-white">Hello World</p> <p class="text-lg font-sans line-through text-white">Hello World</p> <p class="text-4xl font-serif text-center text-white">Hello World</p> <p class="text-6xl font-mono text-right italic font-extrabold text-white">Hello World</p>
Khả năng thiết kế đáp ứng
Đây là nơi Tailwind thực sự tỏa sáng. Với các tiền tố sau đây, chúng ta có thể giới hạn một lớp chỉ hoạt động trên một chiều rộng cụ thể, với phiên bản không có tiền tố, giống như những gì chúng ta đã làm việc cho đến nay, hoạt động cho mọi thứ nằm ngoài phạm vi của chúng ta.
smứng với 640pxmdứng với 768pxlgứng với 1024pxxlứng với 1280px
<body class="bg-gray-900 flex flex-col md:flex-row"> <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-red-500 sm:bg-purple-800 bg-white"></div> <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-green-800 sm:bg-indigo-300 bg-white"></div> <div class="h-32 w-32 mt-16 mx-auto lg:bg-orange-500 md:bg-blue-200 sm:bg-teal-600 bg-white"></div> </body>
Phần kết luận
Hy vọng rằng đây là một giới thiệu hữu ích về thư viện nhỏ mạnh mẽ này. Đường cong học tập cho Tailwind rất nhỏ và cú pháp của nó nhất quán đến mức chỉ cần có rất ít kinh nghiệm, bạn có thể bắt đầu tạo ra những thiết kế tuyệt vời trước khi cần xem xét đến CSS.