Tailwind CSS giúp mình bớt đau đầu hơn như thế nào?

CSS được tạo ra từ 1996 đã giúp phần lớn web developer có thể thoải mái tuỳ biến các trang web HTML trở nên lung linh hơn. Dĩ nhiên sau hơn 24 năm, các kiến thức về CSS cũng như những kĩ thuật, công nghệ mới trong việc viết CSS cũng ngày một nhiều hơn.

Hành trình viết CSS của mình

Sau khi tìm hiểu về CSS ở mức căn bản, mình phát hiện ra còn có các cách viết CSS mới như preprocessor CSS (SASS, SCSS, LESS…), CSS-in-JS (Module CSS, Styled Component, JSS…) hỗ trợ việc nest các selector, if-else, variable… giúp việc code và đọc CSS dễ hơn.

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav li {
  display: inline-block;
}

nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

CSS truyền thống

nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li {
    display: inline-block;
  }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

SCSS với nesting

Rồi vọc vạch một số CSS Framework, hỗ trợ dựng sẵn với giao diện đẹp mắt và responsive (Bootstrap, Foundation,…) hoặc chuyên dụng cho một framework cụ thể (trong ReactJS sẽ có Material UI, Ant Design, Reactstrap…), chỉ cần import thư viện và gọi tên class hoặc custom component cần thiết và voila!

Một theme của Bootstrap với giá $59

Tuy nhiên, tiếp cận với frontend từ nền tảng backend và làm desktop app vốn hỗ trợ khá nhiều trong việc tạo giao diện, việc học CSS đối với mình cũng cần dành nhiều thời gian và khối lượng tìm tòi hơn: từ các thuộc tính, cách viết selector, quy tắc BEM, các kiểu viết CSS, responsive, suy nghĩ tên biến hay customize lại các phần tử HTML từ framework sẵn có theo đúng ý mình… Đó thực sự là chặng đường khá là “khó nhai” trong những ngày đầu vọc vạch code giao diện web.

Một ví dụ về nỗi kinh hoàng khi học responsive

Rồi một lần lân la trên mạng, mình phát hiện ra một cách tiếp cận mới trong việc viết CSS: Atomic CSS và Framework Tailwind CSS đã giúp mình đỡ đau đầu hơn rất nhiều.

Atomic CSS có gì hay ho

Atomic có nghĩa là nguyên tử, và cách tiếp cận của phương pháp này cũng tương tự như vậy – các phần tử HTML sẽ được apply các class CSS có kích thước rất nhỏ, được định nghĩa cho một chức năng cụ thể như đổi màu chữ, dãn cách padding, phóng to size…

Mình sẽ lấy ví dụ về việc tạo một button nền xanh, chữ trắng và có bo tròn 4 góc, button bên trái sẽ viết CSS truyền thống, và bên phải viết theo cách tiếp cận Atomic CSS.

Hai button ví dụ
<body>
  <!-- Button with Traditional CSS -->
  <button class="normal-button">
    Normal CSS Button
  </button>
    
  <!-- Button with Atomic CSS -->
  <button class="round-5px bg-green text-white">
    Atomic CSS Button
  </button>
</body>

File HTML định nghĩa 2 button

.normal-button {
  border-radius: 5px;
  color: white;
  background-color: green;
}

.bg-green {
  background-color: green;
}

.text-white {
  color: white;
}

.round-5px {
  border-radius: 5px;
}

File CSS định nghĩa các style

Có thể dễ thấy kết quả của hai button đều như nhau, tuy nhiên các thành phần thuộc tính trong class của button viết theo hướng Atomic lại tách ra nhỏ hơn, hỗ trợ việc đọc dễ hơn vì khá giống với định nghĩa thuộc tính CSS.

Đồng thời các phân mảnh nhỏ như vậy khiến người viết code có thể dễ dàng tái sử dụng vào các phần tử tương tự, ví dụ khi mình cần button màu đỏ với bo tròn 4 góc và chữ trắng, mình có thể tái sử dụng 2/3 class đã được phân mảnh.

Cũng vì khả năng tái sử dụng cao, kích thước CSS của project lớn sẽ được giảm đáng kể, bên dưới là bundle size một dự án của John Polacek khi anh tiến hành refactor CSS truyền thống sang Atomic CSS.

Size bundle sau khi refactor project sang Atomic CSS của John Polacek

Tailwind CSS

Để hạn chế việc viết CSS nhiều hơn do phải phân tách nhỏ các mảnh, các Atomic/Utility CSS Framework bắt đầu ra đời, nhưng trong bài viết này, mình sẽ tập trung vào Tailwind CSS.

Các định nghĩa như font chữ to nhỏ, màu sắc chữ, màu nền, dãn cách padding, margin, position, flex hay thậm chí cả các event hover, pointer hay animation… được framework cung cấp rất đa dạng (hiện tại đã hỗ trợ hơn 11 nghìn atomic class), việc cần làm chỉ đơn giản là gọi tên class đã định nghĩa là được.

Sau khi tiến hành setup thư viện, mình có thể dễ dàng tạo một button ở ví dụ trên mà không cần viết thêm dòng CSS nào.

<body>
  <button class="rounded bg-green-600 text-white">
    Tailwind CSS Button
  </button>
</body>

Responsive cùng Tailwind CSS

Các tag @media được Tailwind hỗ trợ

Tailwind cung cấp các prefix hỗ trợ nhiều kích thước màn hình, mình sẽ lấy một ví dụ đơn giản responsive tailwind với 3 block nằm ngang cạnh nhau, và block giữa sẽ bị ẩn đi khi màn hình nhỏ hơn 768px (tương ứng với prefix md).

<body>
  <div class="flex p-2">
	  <div class="bg-blue-300 p-2">    
      Left block      
    </div>
    <div class="bg-green-300 p-2 hidden md:block">
        Middle block
    </div>
    <div class="bg-red-300 p-2">
        Right block
    </div>
  </div>
</body>

Bạn có thể xem demo đoạn code trên tại đây

Tailwind CSS phần nào hỗ trợ cách tiếp cận viết CSS theo hướng mobile first, block giữa trong đoạn code trên sẽ có logic hiển thị theo mô tả:

  • Khi màn hình đạt độ dài tối thiểu 768px: block sẽ áp dụng thuộc tính display: block
  • Khi màn hình dưới 768px, block sẽ áp dụng thuộc tính mặc định là display: hidden

Như đã thấy, responsive trên chỉ gói gọn trong một đoạn class là “hidden md:block”. Nếu theo cách viết truyền thống, file css sẽ được viết như bên dưới

.middle-block {  
  display: none;
}

@media (min-width: 768px) {
  .middle-block {
    display: block;
  }
}

Cồng kềnh hơn đúng không?

Ngoài ra, bạn cũng có thể customize lại các kích thước responsive màn hình như đã đề cập ở phần trên.

Ưu điểm

  • Các atomic class cũng như document rất nhiều và phong phú, hỗ trợ đa dạng từ thuộc tính cơ bản, shadow, theme, css-event, animation… mà không cần bạn phải code bất kì dòng css nào.
  • Không quá khó để tiếp cận, tuy nhiên cần phải có nền tảng về CSS trước khi sử dụng.
  • Nếu chỉ thuần sử dụng các class được cung cấp, bạn gần như không cần phải nghĩ đến chuyện đặt tên biến, cứ lôi đồ có sẵn ra mà xài thôi.
  • “Né” được vài kĩ thuật đau đầu trong CSS như BEM, SCSS, Module CSS… nhưng đó là khi bạn chỉ sử dụng các class được cung cấp từ Tailwind.
  • Khả năng customize tốt.
  • Có thể tích hợp cùng cách viết CSS truyền thống để hạn chế việc tên class trong các phần tử HTML quá dài thông qua sử dụng @apply, có thể tích hợp cùng với các Component CSS Framework khác như Bootstrap, Foundation, Material UI…
  • Lightweight và khả năng scale tốt từ các project nhỏ đến lớn: các atomic class được tái sử dụng xuyên suốt project, nếu project của bạn có hàng trăm component nhưng chỉ sử dụng khoảng vài chục class thì file CSS chỉ được tạo từ các class bạn đã dùng.
Kích thước file CSS khi áp dụng TailwindCSS (xanh) so với cách code CSS truyền thống (đỏ) khi project scale lớn dần

Nhược điểm

  • Có quy chuẩn viết tắt riêng nên trong một số trường hợp việc tìm lỗi layout do CSS sẽ cần thời gian để làm quen.
  • Cần có một số quy tắc thống nhất thứ tự đặt tên các class để đồng nhất cách đọc trong project nhiều thành viên, hiện tại trong VS Code có hỗ trợ extension Headwind cho việc này khá tốt.
  • Được hỗ trợ rất nhiều trong việc viết CSS, nhưng khi lạm dụng sẽ dễ khiến bạn có thể bị “mất gốc” khi viết CSS thuần mà không có framework này.
  • Bản chất là Atomic CSS Framework nên để giao diện đẹp đòi hỏi kết hợp các class thay vì chỉ gọi sẵn một số class hỗ trợ như các Component CSS Framework.
  • Ngoài ra, bài viết trên diễn đàn dev.to do bác Jared White phân tích các nhược điểm trong việc sử dụng Tailwind CSS cũng rất được ủng hộ, mình cũng đồng tình với các quan điểm của bác về những hạn chế khi dùng framework này.

Lựa chọn của mình

  • Đối với cá nhân mình, mình vẫn khá thích Tailwind CSS và có thể vẫn sẽ sử dụng nó trong thời gian dài vì những ưu điểm của nó có thể xem là vượt trội hơn phần khuyết điểm, một phần mình cũng không muốn chuyên quá sâu về CSS, nên chắc đây sẽ là CSS framework yêu thích của mình trong thời gian sắp tới.
  • Nếu bạn có góp ý về bài viết, công nghệ hay CSS framework nào hay ho khác muốn chia sẻ không, giúp mình bằng cách bình luận bên dưới nhé 😀

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s