TÀI LIỆU TAILWINDCSS

I. GETTING STARTED
II. CUSTOMIZATION
III. Layout.
1. Container
- Là một vùng chứa cố định về chiều ngang. đối với mỗi kích thước màn hình thì container lại có chiều ngang khác nhau.

Lưu ý: container không tự căn giữa như những công nghệ css khác, muốn căn giữa thì thêm class `mx-auto`
container cũng không tự padding, muốn padding trài phải sử dụng px-{size} , căn trên dưới dùng py-{size} muốn căn toàn bộ
theo một kích thước thì dùng p-{size}
Nếu muốn tùy chỉnh mặc định cho container thì làm theo hướng dẫn sau: Container - Tailwind CSS
2. Box Sizing
box-sizing là một thuộc tính sẽ giúp bạn có thể tính toán và làm chủ được kích thước của một phần tử dựa vào thuộc tính width
và height đã được thiết lập bên trong. Hay nói cách khác, là bạn sẽ muốn thuộc tính width và height là kích thước đã bao gồm
border và padding.
Box-border: (mặc định) giữ nguyên kích thước của box. nếu sử dụng border, padding thì phần content sẽ bị thụt vào bên trong.

Box-content: giữ nguyên kích thước phần content. nếu sử dụng border,padding thì sẽ làm thay đổi kích thước box.
3. Display

Có thể nhận thấy rằng, một số thẻ HTML như <div>, <p>, <ul> luôn bắt đầu bằng một dòng mới và có độ dài dòng trải dài
100% trang web, trong khi các thẻ HTML khác như <span>, <img> hoặc <a> thì thường được đặt nối tiếp nhau trên cùng
một dòng. Tại sao lại có sự khác biệt như vậy? Hãy đi tìm câu trả lời qua bài học về giá trị của thuộc tính display ngay
sau đây.
Inline là cách hiển thị trên một hàng và chiều rộng của thẻ đó sẽ phụ thuộc vào nội dung bên trong của thẻ, vì vậy nhiều thẻ
có thể nằm trên cùng một hàng. Tuy nhiên inline không thể sử dụng được các thuộc tính width, height và top-bottom
margin. Các thẻ HTML được hiển thị mặc định inline là <span>, <a>, <strong>, <b>, <i>...
Block là cách hiển thị luôn bắt đầu bằng một dòng mới và có chiều rộng bằng 100% chiều rộng trang web. Vì vậy khi bạn
dùng thẻ này thì mặc dù nội dung ngắn nhưng các thẻ khác ở phía dưới vẫn được nằm ở một dòng khác tách biệt. Khác
biệt của thẻ này là dùng được thuộc tính width và height. Các thẻ HTML hiển thị mặc đinh block là: <div>, <p>, <h1> đến
<h6>, <header>, <footer>, <section>, <nav>...
Inline-block là cách hiển thị kết hợp cả hai cách trên, chuyển phần tử về hiển thị trên cùng một hàng nhưng nó vẫn thừa
hưởng các đặc tính của block.
Flow-root: ????
Flex: là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết
bị. Nói theo cách khác, bạn không cần thiết lập kích thước của phần tử, không cần cho nó float, chỉ cần thiết lập nó hiển thị
chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn.
inline-flex: giống như flex nhưng khi sử dụng inline-flex thì width của box sẽ dài tùy thuộc vào nội dung chứa bên
trong nó.
Grid: là hiển thị những thành phần con bên trong theo 1 dạng lưới. có chia thành các ô, cột.
inline-grid: giống grid nhưng chiều rộng phụ thuộc vào nội dung bên trong.
content: là lớp ảo khi sử dụng thì các thành phần bên trong nó được đối xử như những thành phần ngang hàng vói lớp content
Table: bảng được chia thành các row, cell
hidden
4. Floats
float có nghĩa là trôi nổi. chúng ta muốn một đối tượng chiếm một khoảng không gian trái hoặc phải của phần nội dung thì
sử dụng thuộc tính này.

float-right: đối tượng sẽ ở bên phải. và nội dung khác sẽ tràn lên đểm chiếm khoảng không gian còn lại xung quanh nó ở
phía bên trái.
floaf-left: đối tượng sẽ ở phía bên trái. và phần nội dung khác sẽ tràn lên chiếm lĩnh khoảng không gian ở phía bên phải.

float-none: không float và thể hiện mặc định theo thuộc tính của đối tượng.
5. Clear
Để hiểu được clear là gì xin hãy nắm chắc phần float là gì?
clear là ngăn chặn thành phần A chiếm vùng không gian của thành phần B (với thành phần B là thành phần sử dụng float).

clear-left: đối tượng sẽ xếp ngay sau một đối tượng khác đặt thuộc tính là float-left.
clear-right: đối tượng sẽ xếp ngay sau một đối tượng khác đặt thuộc tính là float-right.
 clear-both: đối tượng sẽ xếp ngay sau một đối tượng khác đặt thuộc tính là float-...( không quan trọng nó float left hoặc right)
clear-none: là thuộc tính mặc định của đối tượng. nó sẽ tràn lên trên. chiêm dụng không gian của vùng bị float.

Positon:
Để di chuyển một phần tử nào đó mà không ảnh hưởng đến bố cục của website thì sẽ có một giải pháp đó là sử dụng thuộc tính
position. Cái tên nói lên tất cả, position là thuộc tính giúp bạn tùy chỉnh khu vực hiển thị cho phần tử và việc tùy chỉnh này không
hề làm ảnh hưởng đến các phần tử khác.

position: static là giá trị mặc định của position. Dù chúng ta có khai báo chúng hay không thì các element sẽ
được sắp xếp vị trí một cách như bình thường trên trang web.
. Phần tử có position: static sẽ không là phần tử tham chiếu cho phần tử con có position: absolute
position: relative: Định vị một phần tử dựa trên vị trí tổ tiên vị trí gần nhất của nó

- Giá trị này thường được sử dụng để thiết lập vị trí của phần tử mà không gây ảnh hưởng tới việc hiển thị ban
đầu cũng như các phần tử khác.
- Phần tử có position: relative sẽ là phần tử tham chiếu cho các phần tử con có position: absolute
 IV. Flexbox
V. Grid
VI. BOX ALIGNMENT
VII. SPACING
VIII. SIZING
IX. TYPOGRAPHY
X. BACKGROUNDS
XI. BORDERS
XII. EFFECTS
XIII. TABLES
XIV. TRANSITIONS AND ANIMATION
XV. TRANSFORMS
XVI. INTERACTIVITY
XVII. SVG
XVIII. Tài liệu tham khảo
- Tailwind CSS Cheat Sheet (nerdcave.com)
- Documentation - Tailwind CSS
- (3) Tailwind Labs - YouTube