10 Tips Tailwind CSS Mà Bạn Cần Biết Để Tăng Năng Suất Làm Việc

10 Tips Tailwind CSS Mà Bạn Cần Biết để Tăng Năng Suất Làm Việc


Mình thích Tailwind vì hai lý do. Đầu tiên, nó làm cho việc xây dựng các giao diện đáp ứng trở nên dễ dàng hơn rất nhiều. Khi bạn thành thạo tất cả các lớp tiện ích, bạn sẽ thực sự ngạc nhiên về tốc độ mà bạn có thể điều chỉnh các thành phần giao diện người dùng của mình từ giao diện này sang giao diện khác.

Thứ hai, vì bạn chỉ có thể sử dụng các lớp được xác định trước của Tailwind để tạo kiểu cho các thành phần của mình nên nó tạo ra một quy ước chặt chẽ trong nhóm giao diện người dùng của bạn, giúp quá trình làm việc cùng nhau dễ dàng hơn nhiều.

Cuối cùng, việc sử dụng Tailwind giúp bạn tạo mã sạch hơn nhanh hơn với ít lỗi hơn. Hôm nay, mình muốn chia sẻ với bạn 10 mẹo hay mà tôi thực sự nghĩ rằng chúng ta có thể sử dụng với tư cách là nhà phát triển giao diện người dùng để làm việc hiệu quả hơn trong khi xây dựng ứng dụng bằng Tailwind CSS.

Bạn mệt mỏi khi phải thủ công căn giữa và padding cho container chính?

Đặt một số cài đặt cho vùng chứa của bạn trong tệp cấu hình và cài đặt này sẽ tự động được áp dụng cho tất cả các lớp .container.

// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
      padding: "1.5rem",
    },
  },
};

Bạn không cần phải làm như thế này cho container chính nữa:

<div class="container p-6 mx-auto"></div>

Bây giờ, bạn chỉ cần sử dụng như thế này:

<div class="container"></div>

Đừng quên là bạn có thể tự tạo riêng cho mình các lớp tiện ích.

Thuộc tính extend trong tệp cấu hình sẽ tự động tạo và thêm các lớp mới cho dự án của bạn. Thật tiện lợi khi bạn cần các lớp bổ sung cho một thuộc tính CSS nhất định.

Chẳng hạn, khi nói đến max-height, bạn chỉ có quyền truy cập vào các lớp sau:

.max-h-full    /* max-height: 100%; */
.max-h-screen  /* max-height: 100vh; */

Tuy nhiên, nếu bạn cần kiểm soát thuộc tính max-height với độ chính xác cao hơn một chút với các lớp như: max-h-xs, max-h-sm hoặc max-h-md thì sao?
Chà, đây là cách bạn có thể tạo chúng:

// tailwind.config.js
    module.exports = {
      theme: {
        extend: {
          maxHeight: {
            xs: "20rem",
            sm: "24rem",
            md: "28rem",
            lg: "32rem",
            xl: "36rem",
            "2xl": "42rem",
            "3xl": "48rem",
            "4xl": "56rem",
            "5xl": "64rem",
            "6xl": "72rem",
          },
        },
      },
    };

Luôn biết breakpoint nào đang hoạt động.

breakpoint

Plugin TailwindCSS Debug Screens sẽ cho phép bạn hiển thị màn hình hiện đang hoạt động ở chế độ phát triển. Quá trình thiết lập không mất quá vài giây và có thể sẽ giúp bạn tiết kiệm rất nhiều thời gian trong thời gian dài. Đây là cách bạn có thể cài đặt nó:
Mở terminal và nhập lệnh sau:

npm install tailwindcss-debug-screens --save-dev

// tailwind.config.js
module.exports = {
  plugins: [require("tailwindcss-debug-screens")],
};

Thêm debug-screen class vào thẻ <body> của bạn.

<body class="debug-screens"></body>

Trong tệp cấu hình Tailwind của bạn, hãy đặt !impotant thành true.

Tùy chọn này sẽ nối tất cả các lớp tiện ích với từ khóa !important.

Điều này đặc biệt hữu ích khi bạn đang xử lý các thư viện của bên thứ ba có thêm kiểu dáng cho một số thành phần. Bằng cách này, bạn sẽ đảm bảo rằng khi bạn thêm một lớp tiện ích mới vào các component này, chúng sẽ luôn được áp dụng.

// tailwind.config.js
module.exports = {
  important: true,
};

Bây giờ, tất cả các lớp tiện ích của Tailwind sẽ được tạo ra như sau:!important

.mt-1 {
  margin-top: 1px !important;
}
.mt-2 {
  margin-top: 2px !important;
}
.mt-3 {
  margin-top: 3px !important;
}
/* và cứ như thế... */

Tốt nhất là nên tránh sử dụng @apply và extract mọi thứ into component.

Adam Wathan (Tailwind’s creator), nói về điều này trên Tweet rằng:

Confession: The feature in Tailwind only exists to trick people who are put off by long lists of classes into trying the framework. You should almost never use it. Reuse your utility-littered HTML instead. apply.

Có nghĩa là: Tính năng trong Tailwind chỉ tồn tại để lừa những người không thích lists dài các class khi thử sử dụng framework này. Bạn hầu như không bao giờ nên sử dụng nó. Thay vào đó, hãy sử dụng utility-littered HTML thay vì apply.

Nếu bạn đang sử dụng một framework như Vue.js hoặc React (nơi bạn define mọi thứ là thành phần), sẽ rất đơn giản để tránh sử dụng tính năng này. Mình hiếm khi (nếu có) sử dụng nó @apply

Mình cũng có một lý do khác để không sử dụng nó nhiều: Mình thấy việc gỡ lỗi mã dễ dàng hơn khi mình chỉ sử dụng các lớp tiện ích trong mã của mình. Bạn có thể xem kiểu nào được áp dụng cho từng tag vì bạn chỉ có một nơi duy nhất mà nhóm của bạn có thể kiểm soát kiểu đó (tức là các class).

Vì vậy, hãy sử dụng tính năng này một cách cẩn thận để bạn có thể tiết kiệm thời gian cho mình về lâu dài! @apply

Bạn cần định nghĩa riêng cho mình các breakpoint?

Nếu các nhà thiết kế của bạn đang sử dụng các breakpoint khác với các breakpoint do Tailwind cung cấp, đừng lo lắng! Chỉ cần mở tệp cấu hình của bạn và xác định cấu hình của riêng bạn. Hãy nhớ rằng bạn có thể tạo các breakpoint với cả hai định nghĩa min-widthmin-width nếu cần.

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: "640px",
      // => @media (min-width: 640px) { ... }
      md: "768px",
      // => @media (min-width: 768px) { ... }
      lg: "1024px",
      // => @media (min-width: 1024px) { ... }
      xl: "1280px",
      // => @media (min-width: 1280px) { ... }
    },
  },
};

Bạn thích px thay vì rem để mặc định cho padding, margins, width, height?

Thuộc tính spacing trong tệp cấu hình của bạn cho phép bạn ghi đè tỷ lệ spacing/sizing mặc định trong tích tắc.

// tailwind.config.js
module.exports = {
  theme: {
    spacing: {
      "1": "8px",
      "2": "12px",
      "3": "16px",
      "4": "24px",
      "5": "32px",
      "6": "48px",
    },
  },
};

Làm cách nào để sử dụng order trong flex-items?

Bạn có thể đã quen thuộc tính này nếu bạn đang sử dụng flexbox. Tuy nhiên, Tailwind không bao gồm nó. order

Một cách giải quyết tuyệt vời là sử dụng tiện ích tailwindcss-flexbox-order.

Sau đó, bạn sẽ có thể định cấu hình và tạo các lớp order flexbox với tất cả các biến thể đáp ứng của chúng.

Theo mặc định, đây là các lớp tiện ích được tạo:

.-order-1 {
  order: -1;
}
.order-0 {
  order: 0;
}
.order-1 {
  order: 1;
}
.order-2 {
  order: 2;
}
.order-3 {
  order: 3;
}
.order-4 {
  order: 4;
}
.order-5 {
  order: 5;
}

Bạn có thể tắt tính năng preflight nếu cần tích hợp Tailwind trong một dự án hiện có.

Từ tài liệu: preflight là một tập hợp các kiểu cơ sở cho các dự án Tailwind được thiết kế để giải quyết vấn đề không nhất quán giữa nhiều trình duyệt và giúp bạn làm việc dễ dàng hơn trong các giới hạn của hệ thống thiết kế.

Điều này có nghĩa là preflight sẽ xóa tất cả các margins, font-size, v.v. mặc định cho tất cả các thành phần của bạn như heading, list, v.v.

Chẳng hạn, mình cần tích hợp dần Tailwind vào một dự án hiện có (có các kiểu cơ bản nghiêm ngặt). Vấn đề với preflight là nó đã phá vỡ tất cả các giao diện ứng dụng. Mình sẽ phải tự tay sửa hết những gì đã hỏng khi thêm Tailwind CSS. Rất may thay mình đã tìm được cách khắc phục nó:

// tailwind.config.js
module.exports = {
  corePlugins: {
    preflight: false,
  },
};

Làm cách nào để nhanh chóng tìm kiếm sự giúp đỡ khi bạn gặp vấn đề khi sử dụng Tailwind CSS?

Tailwind là một cộng đồng đang phát triển bao gồm các nhà phát triển giao diện người dùng đầy nhiệt huyết. Bạn có thể tiếp cận những người dùng khác thông qua các kênh sau:

Sẽ dễ dàng hơn rất nhiều nếu biết những mẹo này trước khi bắt đầu một dự án với Tailwind (đặc biệt là) tailwindcss-debug-screens

Kể từ khi mình bắt đầu áp dụng chúng, làm việc với Tailwind thậm chí còn trở nên thoải mái hơn. Nếu bạn có một mẹo khác không được liệt kê ở đây, đừng ngần ngại trình bày và chia sẻ nó với tất cả chúng ta ở dưới phần bình luận.

Kết luận

Với 10 mẹo và thủ thuật Tailwind CSS này, bạn có thể nhanh chóng tạo ra giao diện đẹp và hiệu quả. Hãy tận dụng các tính năng và utility classes mạnh mẽ của Tailwind để tối ưu hóa thiết kế web của bạn.

Cảm ơn các bạn đã đọc bài viết!

No comments:

Powered by Blogger.