Hướng dẫn tailwind cheat sheet - bảng gian lận tailwind

Thông tin về ứng dụng này

* Bạn có thể Học CSS Tailwind thông qua Ứng dụng Cheat Sheet này trên điện thoại của mình* Nội dung của ứng dụng được phân loại theo các danh mục khác nhau* Có thể đánh dấu các nội dung quan trọng* Đọc tài liệu trực tuyến của từng phần
* Nội dung của ứng dụng được phân loại theo các danh mục khác nhau
* Có thể đánh dấu các nội dung quan trọng
* Đọc tài liệu trực tuyến của từng phần

Lần cập nhật gần đây nhất

31 thg 7, 2021

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ế.
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:

Click me

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ì?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 TailwindCà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

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
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.
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 componentsExtracting 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:

Click me
0. 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:
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:
Click me
0. 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:



Khi muốn sử dụng lại các button giống nhau, ta chỉ cần gọi class

Click me
1 là được.

4. ResponsiveResponsive

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ố

Click me
2, ví dụ:

Hello World

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

Click me
3, màn hình từ 768px đến 1023px sẽ sử dụng class
Click me
4, dưới 767px thì sử dụng class
Click me
5.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:
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:

Hướng dẫn tailwind cheat sheet - bảng gian lận 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.
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. FlexboxFlexbox

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 đâyGrid. 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.
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.
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 customizedDesigned 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à 

Click me
6 đượ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ậnKế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ảoTài liệu tham khảo

  • https://tailwindcss.com/docs/
  • https://dev.to/wizardhealth/tailwind-css-29p3
  • https://nerdcave.com/tailwind-cheat-sheet

Nguyễn Linh