Tailwind Tips & Tricks: Chuyển classes thành nhiều dòng trong Tailwind CSS

Khi sử dụng TailwindCSS, các bạn chắc hẳn đã biết nhược điểm của nó chính là có rất nhiều class trên một element. Điều này khiến code của chúng ta sẽ rất khó đọc 😥.

Ví dụ như bên dưới đây, chúng ta có rất nhiều class cho một element:

<span class="mr-4 relative inline-block rounded-full w-5 h-5 cursor-pointer before:border before:border-[#e3e9ef] before:w-[26px] before:h-[26px] before:block before:rounded-full before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:absolute"
></span>

Để dễ đọc hơn chúng ta sẽ tìm cách để chia các class thành nhiều dòng thay vì một dòng, trong bài viết này, chúng ta sẽ tìm hiểu về cách làm nhé 😁.

Cách làm như sau, các bạn cần tạo một hàm với tham số là các classes. Hàm này sẽ trả về kết quả là một chuỗi được tạo bằng cách join các classes lại với nhau.

function classNames(...classes) {
  return classes.filter(Boolean).join(" ");
}

Ở function trên, để đưa các tham số thành một mảng mình sử dụng rest parameter và sử dụng filter(Boolean) trick, filter(Boolean) dùng để loại các falsy value.

Ví dụ:

["mb-2", "homiedev", false, "text-sm", null, 0].filter(Boolean);
// Kết quả ['mb-2', 'homiedev', 'text-sm']

Cách viết filter(Boolean) các bạn có thể viết thành như sau, JavaScript sẽ tự hiểu và lấy tham số của filter truyền vào Boolean():

array.filter(item => Boolean(item));

Kết quả từ filter method là một mảng các giá trị, để tạo thành một chuỗi các giá trị chúng ta sử dụng method join().

Ví dụ:

["mb-2", "homiedev", false, "text-sm", null, 0].filter(Boolean).join(" ");

// kết quả 'mb-2 homiedev text-sm'

Như vậy chúng ta có thể tạo ra một chuỗi class - output với input là các chuỗi class khác nhau.

Cùng ứng dụng hàm này vào ví dụ đầu bài viết thử nhé 😁:

// ở đây mình giả định chúng ta sử dụng jsx và ReactJS nhé.

<span className={classNames(
  "relative inline-block rounded-full w-5 h-5 cursor-pointer",
  "before:border before:border-[#e3e9ef]",
  "before:w-[26px] before:h-[26px] before:block before:rounded-full",
  "before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:absolute"
)}
/>

Bằng cách này, các bạn có thể chia các class thành nhiều dòng nếu muốn, việc này giúp code Tailwind của chúng ta dễ đọc hơn khá nhiều đúng không? 😄.

Hi vọng bài viết giúp ích cho các bạn. Nếu thấy hay đừng quên theo dõi blog để đọc các bài viết mới nhất nhé ^^.

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