Giới thiệu về Tailwind CSS

Trong bài viết này, ta sẽ xem xét khung thiết kế yêu thích của cá nhân tôi: Tailwind CSS. Một thư viện dựa trên tiện ích hoàn toàn theo phong cách bất khả tri để 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 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í 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à chỉ cần 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 bạn bằng npm hoặc Yarn :

$ npm i tailwindcss

# or, if Yarn is more your thing:
$ yarn add tailwindcss

bản mẫu

Đây là một file HTML soạn sẵn đơn giản bao gồm Tailwind từ unkg:

index.html

<!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 lớp cho các màu luôn giống nhau, element-color-intensity . Vì vậy, nền màu đỏ trở thành bg-red-500 , với giá trị số nằm trong repository ả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>

<!-- Border needs to be set before the border-color can be changed -->
<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 ta có thể viết 50% như 1/2 , 2/4 , 3/6 hoặc 6/12 .

Khoảng cách hoạt động rất giống nhau, chỉ là thuộc tính, bên (viết tắt không có dấu gạch ngang), sau đó là giá trị. So padding-bottom: 2rem; trở thành pb-8 , lại nằm trong repository ảng từ 0 đến 64 và cạnh là t , b , l , r , x đối với phải và trái, hoặc y đối với trên và dưới.

<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ố trí

Tailwind cung cấp cho ta nhiều tiện ích của định vị CSS tiêu chuẩn, như phao, vị trí và thậm chí là Flexbox . 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 nó bằng flex trước.

Tương tự như kích thước, mẫu đặt tên chỉ là property-value , do đó, một float bên phải 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 mà ta có thể làm trong CSS, Tailwind cung cấp một số phím tắt cho những gì nếu không sẽ rất tẻ nhạt, chẳng hạn như thêm dự phòng cho group phông chữ của ta , ta có thể xử lý chỉ với font-sans , font-serif hoặc font-mono và có một group phông chữ được chăm sóc.

Thay vì các đơn vị 0-64 mà ta đã sử dụng, font-size (được rút ngắn thành text ) lấy xs , sm , base , lx và xl đến 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 đáp ứng

Đây là nơi Tailwind thực sự tỏa sáng, trong việc cắt giảm nhu cầu media query truyền thông. Với các tiền tố này, 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 version không có tiền tố, giống như những gì ta đã làm việc cho đến nay, hoạt động cho mọi thứ nằm ngoài phạm vi của ta .

sm 640px
md 768px
lg 1024px
xl 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>

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 CSS.

Tags:

Các tin liên quan

Hiểu CSS Float
2019-06-07
Giới thiệu về Bulma CSS với React
2018-10-12
Media query CSS: Tham khảo và hướng dẫn nhanh
2018-06-07
Mẹo CSS: Bóng đổ nhiều màu & cắt bỏ
2018-04-02
Cách hiện đại để xử lý CSS trong React
2018-02-22
CSS-in-JS Roundup: Tạo kiểu cho các thành phần React
2017-08-21
Đặt lại CSS tối thiểu
2017-06-21
Hàm CSS color-mod
2017-01-12
CSS Grid: Holy Grail Layout
2016-12-28
Bố cục lưới CSS: Ký hiệu lặp lại
2016-12-23