TÌM HIỂU VỀ TAILWIND CSS FRAMEWORK – CTA Solution

Posted on by mtoplistChuyên mục:Top List

Khi mới bắt đầu code CSS thì các bạn thường code chay, tạo các file CSS rồi style tất cả trong đó, sau đó link vào trang HTML.
Khi dự án lớn dần, các bạn hoặc những người khác trong team sẽ khó kiểm soát được các class của mình đã đặt ra. Khi đó sẽ xảy ra trường hợp override class của người khác bằng cách thêm important, style inline, rồi inline cộng thêm important. Làm ai cũng ức chế.

Từ đó thuật ngữ BEM (Block-Element-Modifiers) ra đời. Đây là một phương pháp đặt tên CSS class được phát triển bởi Yandex. Theo lý thuyết, BEM giúp bạn xây dựng các class theo từng block, mỗi block lại có element con, và các element này có thể sẽ có giao diện khác nhau tuỳ thuộc vào modifier của nó.

Ví dụ về BEM: 

/* Một Block (khối) độc lập */
.btn {}
 
/* Element (phần tử) con, phụ thuộc vào Block ở trên */
.btn__price {}
 
/* Modifier (bộ điều chỉnh) thay đổi trạng thái của Block */
.btn--orange {}
.btn--big {}

Và khi áp dụng vào HTML: 

<div class="btn btn__price btn--orange btn--big">Click me</div>

BEM là phương pháp hiệu quả để chia từng component, và bạn có thể tránh được những cuộc xung đột ở trên. Ngoài ra, khi component không còn sử dụng tới nữa thì bạn hoàn toàn có thể xoá đi mà không ảnh hưởng đến các component khác.

Tuy nhiên, BEM cũng có những vấn đề khó chịu như việc bạn sẽ phải bỏ thời gian để nghĩ cách đặt tên, ngữ nghĩa của class sao cho đúng. Bạn phải cân nhắc block này đặt tên là gì, có những component nào. Cách đặt tên sao cho đúng cũng là một vấn đề của khoa học máy tính. Ngoài ra khi muốn refactor lại block đó thì chúng ta lại phải nghĩ ra tên khác cho nó.

Rồi các bạn biết tới Bootstrap, một framework với các template html, css, javascript. Bootstrap bao gồm những cái cơ bản có sẵn như: typography, forms, buttons, tables, navigation, modals, image carousels và nhiều thứ khác. Trong bootstrap có thêm nhiều Component, Javascript hỗ trợ cho việc thiết kế reponsive của bạn dễ dàng, thuận tiện và nhanh chóng hơn. Bootstrap giúp bạn khởi động nhanh trong việc phát triển web.

Cái nào cũng có những ưu nhược điểm của nó, Bootstrap cũng không phải ngoại lệ. Khi dự án lớn lên, đồng nghĩa với việc custom lại các class của Bootstrap trở nên khó khăn hơn, chúng ta phải thường xuyên override lại các class của Bootstrap để phù hợp với design. Việc tối ưu code cũng khó hơn. 

Trong các dự án, chúng ta không thể nào tận dụng được hết 100% các component của Bootstrap, chúng ta chỉ sử dụng khoảng 10% trong đó nên Bootstrap sẽ nặng nề hơn đối với các dự án lớn.

Lan man nhiều rồi, chúng ta cùng đi vào vấn đề chính thôi.

1. Tailwind CSS là gì?

Tailwindlà một Utility-First CSS framework, nó cũng giống như Bootstrap, nó có những class built-in mà chúng ta có thể dùng. Tailwind CSS có nhiều các class bao gồm các thuộc tính CSS khác nhau và quan trọng, chúng ta có thể dễ dàng mở rộng tạo mới ra những class bằng chính những class của nó.

Với quy tắc đặt tên cực kỳ thân thiện với người dùng, người dùng cũng có thể nhìn vào class đó và có thể biết được class này nó đang style cái gì. Chúng ta cũng phải nói đến khả năng tùy biến và mở rộng cao, đem đến cho ta sự linh hoạt không giới hạn.

2. Cài đặt Tailwind

Sử dụng 1 trong 2 câu lệnh sau để cài đặt Tailwind 

# Using npm
npm install tailwindcss

# Using Yarn
yarn add tailwindcss

Sau đó mở file CSS của bạn lên và thêm Tailwind như sau 

@tailwind base;

@tailwind components;

@tailwind utilities;

Sau khi thêm, các bạn cần phải build lại file này mới có thể chạy được bằng cách cd tới thư mục file css của bạn và chạy lệnh sau 

npx tailwind build styles.css -o output.css

Nếu thành công, trong thư mục đó sẽ có thêm 1 file là output.css, các bạn add file này vào file html nhé.

Ngoài ra, Tailwind còn hỗ trợ link CDN cho các bạn tiện hơn trong việc cài đặt thông qua link sau 

<link href="https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css" rel="stylesheet">

Vậy là xong bước cài đặt, chúng ta cùng tìm hiểu xem Tailwind có những gì nhé.
Mình sẽ so sánh 2 button với nhau. Một cái sử dụng Tailwind, còn một cái sử dụng Bootstrap để các bạn thấy sự khác biệt

See the Pen
Compare Button Tailwind vs Bootstrap by Linh Nguyễn (@LinhNT)
on CodePen.

Các bạn để ý 2 button trên thì khi nhìn vào class của button Tailwind các bạn có thể dễ dàng đoán ra ngay các thuộc tính của button này như: có màu xanh dương đậm, padding theo trục x là 3, padding theo trục y là 2, không có outline, bo tròn các góc, chữ màu trắng. Còn khi nhìn qua class của button Bootstrap các bạn khó có thể đoán ra được button đó có những thuộc tính gì mà không nhìn qua css của nó.

3. Extracting components

Extracting components là một quá trình trích xuất các class tiện ích thành các class mới.
Làm thế nào để chúng ta trích xuất các class tiện ích? Tailwind cung cấp cho chúng ta một chức năng rất hữu ích cho việc này: @apply. Trong ví dụ dưới đây, chúng ta có CSS ​​cho cùng một nút như trên nhưng với các class được trích xuất: 

<button type="button" class="btn-primary">Adam</button>

<style>
  .btn-primary {
    @apply bg-blue-700 px-3 py-2 outline-none rounded text-white;
  }
</style>

Khi muốn sử dụng lại các button giống nhau, ta chỉ cần gọi class .btn-primary là được.

4. Responsive

Mỗi class của Tailwind đều có hành vi Responsive của nó, giúp bạn dễ dàng Responsive nhanh chóng các class mà không cần style lại. Tailwind cung cấp một phương thức đơn giản để đưa các lớp tiện ích đã có vào một bối cảnh resposive đó là sử dụng tiền tố {screen}:{class}, ví dụ: 

<div class="lg:text-2xl md:text-lg text-sm">Hello World</div>

Xét ví dụ trên ta thấy như sau, đối với màn hình từ 1024px trở lên thì sẽ sử dụng class text-2xl, màn hình từ 768px đến 1023px sẽ sử dụng class text-lg, dưới 767px thì sử dụng class text-sm.
Có một vài tùy chọn kích thước màn hình được xác định trước trong Tailwind:

Dưới đây là một ví dụ khác về Responsive

See the Pen
Tailwind demo by Linh Nguyễn (@LinhNT)
on CodePen.

Các bạn có thể mở codepen lên để xem chi tiết hơn nha.

5. Flexbox

Khi so sánh khả năng responsive với Bootstrap có lẽ còn một tiện ích thiếu ở Tailwind đó là Grid. Tailwind không đi kèm class Grid cho chúng ta, tuy nhiên ta vẫn có thể làm điều tương tự bằng Flexbox. Xét ví dụ dưới đây

See the Pen
Flexbox Tailwind by Linh Nguyễn (@LinhNT)
on CodePen.

Ta hoàn toàn có thể tạo ra các flexbox theo ý ta muốn, hoặc kết hợp với responsive.
Mặc định class flex sẽ hiển thị các thẻ div bên trong theo trục x, nếu muốn hiển thị theo trục y ta có thể thêm class flex-col. Hoặc đảo ngược vị trí của thẻ div bên trong theo trục x bằng class flex-row-reverse, tương tự cho trục y ta có flex-col-reverse.

6. Designed to be customized

Nếu bạn muốn tuỳ chỉnh các thuộc tính cho phù hợp với design, Tailwind cho phép bạn làm điều đó. Bạn có thể tuỳ chỉnh lại màu sắc, font size, spacing utilities, breakpoints, shadows,…

Tailwind được viết bằng PostCSS và được cấu hình bằng JavaScript, có nghĩa là bạn hoàn toàn có thể làm chủ được những thuộc tính của từng class mà bạn muốn.

Tailwind is more than a CSS framework, it’s an engine for creating design systems.

Mặc định, khi các bạn cài đặt Tailwind, họ sẽ cung cấp một tệp cấu hình là tailwind.config.js được đặt trong thư mục gốc của dự án, người dùng có thể tuỳ chỉnh lại file này sao cho phù hợp với nhu cầu của mình. (Đối với các bạn sử dụng link CDN thì không có cái này nhé :)) )

Ví dụ config Theme của Tailwind: 

// tailwind.config.js
module.exports = {
  theme: {
    screens: {
      sm: '640px',
      md: '768px',
      lg: '1024px',
      xl: '1280px',
    },
    fontFamily: {
      display: ['Gilroy', 'sans-serif'],
      body: ['Graphik', 'sans-serif'],
    },
    borderWidth: {
      default: '1px',
      '0': '0',
      '2': '2px',
      '4': '4px',
    },
    extend: {
      colors: {
        cyan: '#9cdbff',
      },
      spacing: {
        '96': '24rem',
        '128': '32rem',
      }
    }
  }
}

Config Responsive cho class 

.bg-brand-gradient { /* ... */ }
@media (min-width: 640px) {
  .sm\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 768px) {
  .md\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 992) {
  .lg\:bg-brand-gradient { /* ... */ }
}
@media (min-width: 1280px) {
  .xl\:bg-brand-gradient { /* ... */ }
}

Không giống như các Framework CSS khác, cấu hình Tailwind là không phụ thuộc. Điều này có nghĩa là bất kỳ lớp tiện ích nào cũng có thể bị xóa mà không ảnh hưởng đến phần còn lại của cấu hình.

7. Kết luận

TailwindCSS là một framework CSS đơn giản, được thưc hiện một cách chuyên nghiệp, giúp chúng ta giảm thiểu lượng CSS trong quá trình phát triển giao diện web, rất đáng để thử. Ngoài ra, người tạo ra Tailwind là một người có kinh nghiệm trong ngành và đang tiếp tục cải tiến Tailwind.

8. Tài liệu tham khảo

Nguyễn Linh

mtoplist