Tailwind CSS Dành Cho Bạn Mới Bắt Đầu 2021

node -v

npm init

npm install tailwindcss

 @tailwind base;
 @tailwind components;
 @tailwind utilities;

 "build-file-css": tailwindcss build src/style.css -o public/style.css

npm run build-file-css

Phần tiếp theo mình sẽ thêm những code HTML thiết yếu để giúp tất cả chúng ta thực thi những ví dụ với tailwind CSS thuận tiện hơn .

Để bạn không phải mất thời gian code thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Font Và Màu Sắc Trong Tailwind CSS

Trong phần này tất cả chúng ta sẽ đi vào tìm hiểu và khám phá cách tạo màu trong tailwind trải qua bảng sau nha :Như bạn thấy thì mình sẽ thiết lập sắc tố trải qua cú pháp sau :

.text-color(màu sắc)-weight(Độ đậm nhạt)

Nếu bạn muốn khám phá về text-color thì truy vấn ở đây nha. Ví dụ khi muốn mình muốn tạo chữ màu đỏ với weight là 400 thì tất cả chúng ta sẽ gọi như sau :

.text-red-400

Bây giờ tất cả chúng ta sẽ đi vào thiết lập sắc tố cho những thành phần trong file index.html nha .

Tiếp theo mình sẽ đi vào thiết lập font-size cho nội dung trong trang web bằng các class có sẵn trong bảng dưới đây:

Khi bạn muốn thiết lập font-size thì tất cả chúng ta chỉ cần theo cú pháp sau :

.text-size(kích cỡ bạn muốn)

Nếu bạn muốn khám phá về font-size thì truy vấn ở đây nha. Và để giúp bạn dễ hiểu thì mình sẽ đi vào thực hành thực tế ví dụ nha .

Trong phần này mình sẽ đi vào tạo font weight cho các tiêu đề bằng các class trong bảng sau đây:

Nếu bạn muốn tìm hiểu và khám phá về font-weight thì truy vấn ở đây nha. Như hình ở trên thì tất cả chúng ta rút được cú pháp của font-weight như sau :

.font-tên font weight

Sau khi nắm đươc cú pháp thì bạn hãy cùng mình đi vào ví dụ sau nha .

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Margin, Padding Và Border

Bây giờ chúng ta sẽ đi vào tìm hiểu về padding trong Tailwind thông qua bảng sau nha:

Nếu bạn muốn tìm hiểu và khám phá về padding thì truy vấn ở đây nha. Như bạn thấy thì tất cả chúng ta sẽ có cú pháp tổng quát cho padding là :

.p-size(kích thước padding)

Ngoài ra nó còn có những thuộc tính padding khác giúp tất cả chúng ta có nhiều lựa chọn hơn như :

• px-{size}: Thiết lập padding theo chiều ngang. Ví dụ px-1 tương đương với padding-left: 0.25rem; padding-right: 0.25rem.
• py-{size}: Thiết lập padding theo chiều dọc. Ví dụ py-1 tương đương với padding-top: 0.25rem; padding-bottom: 0.25rem.
• pt-{size}: Thiết lập padding top.
• pb-{size}: Thiết lập padding bottom.
• pl-{size}: Thiết lập padding left.
• pr-{size}: Thiết lập padding right.

Bây giờ tất cả chúng ta sẽ đi vào ví dụ để hiểu rõ hơn nhé !

Đối với margin thì cú pháp và cách sử dụng cũng y chang như padding nha. Điểm khác biệt của nó là thay vì sử dụng p thì chúng ta sẽ sử dụng m.

.m-size(kích thước margin)

Nếu bạn muốn tìm hiểu và khám phá về margin thì truy vấn ở đây nha. Bây giờ mình sẽ đi vào ví dụ cụ thể nha .

Phần tiếp theo chúng ta sẽ đi vào tìm hiểu thuộc tính border thông qua hình ảnh sau:

Mình có 1 số ít chú ý quan tâm khi sử dụng border trong tailwind css là :

• Công Thức tổng quát là : border-size
• border-l-size: Tạo border left
• border-r-size: Tạo border right
• border-t-size: Tạo border top
• border-b-size: Tạo border bottom

Nếu bạn muốn khám phá về border thì truy vấn ở đây nha. Bây giờ tất cả chúng ta sẽ đi vào ví dụ cụ thể nha .

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Sử dụng Flexbox Trong TailwindCSS

Trong phần này tất cả chúng ta sẽ đi vào khám phá cách vận dụng thuộc tính flexbox trong tailwind css để chỉnh sửa vị trí cho phần ĐK và đăng nhập trong file index.html nha. Nếu bạn muốn tìm hiểu và khám phá về flexbox thì truy vấn ở đây nha .

Sử dụng Breakpoints Trong TailwindCSS

Trong phần này sẽ đi vào tìm hiểu và khám phá những class giúp tất cả chúng ta hoàn toàn có thể thiết lập thuộc tính CSS dựa trên những màn hình hiển thị khác nhau nhé. Nếu bạn muốn khám phá về Breakpoints thì truy vấn ở đây nha .Như hình ảnh ở trên thì những tên class trong tailwind sẽ tương ứng với những màn hình hiển thị thiết bị khác nhau. Để giúp bạn dễ tưởng tượng thì tất cả chúng ta sẽ đi vào ví dụ cụ thể trong video dưới đây nha .Mình có quan tâm 1 số ít điểm ở video trên là :

• text-green-500: Sử dụng màu xanh lá cây mặc định
• sm:text-blue-500: Sử dụng màu xanh da trời khi màn hình có kích thước lớn hơn 640 px
• md:text-red-500: Sử dụng màu đỏ khi màn hình có kích thước lớn hơn 768 px

Xây dựng Component Card

Trong phần này tất cả chúng ta sẽ đi vào thiết lập component card trải qua những class cơ bản của tailwind css nha. Đầu tiên mình sẽ đi vào thiết lập vị trí, màu nền, shadow … cho card trải qua đoạn mã sau nha :

     
     
         
         
             Article Title

            Write By Niem Vui Lap Trinh
        
    

Và hiệu quả bạn xem video dưới đây nha .

Sử Dụng Grid

Trong phần này tất cả chúng ta sẽ sử dụng class grid trong tailwind css để chia layout trong website nha. Để giúp bạn dễ tưởng tượng thì tất cả chúng ta hãy đi vào ví dụ sau đay nhé ! Nếu bạn muốn tìm hiểu và khám phá về Grid thì truy vấn ở đây nha .Mình có một số ít chú ý quan tâm dành cho bạn là :

• Để sử dụng đươc grid trong css thì ta sẽ gọi class grid.
• lg:grid-cols-3: Sẽ chia 3 cột đối với màn hình lớn hơn 1024px
• md:grid-cols-2: Sẽ chia 2 cột đối với màn hình lớn hơn 768px
• sm:grid-cols-1: Sẽ chia 1 cột đối với màn hình lớn hơn 640px
• gap-10: Là khoảng cách giữa các item trong grid.

Để bạn không phải mất thời gian code phần này thì mình sẽ đặt đường dẫn download ở phía dưới nha.
Tải File index.html

Cách Sử dụng @apply Directive Trong Tailwind CSS

Thông thường khi một thành phần có nhiều class giống nhau thì việc ghi lại những class trên từng component sẽ làm mất nhiều thời hạn viết mã. Để giúp bạn hiểu rõ hơn thì mình sẽ lấy hai button login và signup làm ví dụ nha .Bây giờ mình sẽ đi vào phong cách thiết kế giao diện button trải qua đoạn mã sau nha :Như hình ảnh phía trên thì bạn hoàn toàn có thể thấy rằng hai button này đều có class chung là :

rounded-full px-4 py-2 cursor-pointer tracking-wider font-bold text-xs border-2 border-blue-500

Trong tailwind css cho phép chúng ta có thể gộp nhiều class giống nhau thành một class duy nhất bằng @apply. Để giúp bạn dễ dàng theo dõi thì mình sẽ hướng dẫn thông qua video sau nhé.

Mình sẽ lý giải những bước để giúp bạn hiểu rõ hơn nhé !

• Đầu tiên chúng ta sẽ đi vào copy các class chung của hai button login và signup.
• Tiếp theo truy cập vào file style.css trong thư mục src
• Tạo một class btn với lệnh @apply và dán các thuộc tính chung của hai button này.
• Truy cập vào file package.json để chỉnh sửa lại đoạn script biên dịch tailwind css.
• Sau khi chỉnh sửa xong thì chúng ta cần phải chạy lại trình biên dịch để cập nhật file style.css trong public
• Bước cuối cùng là thiết lập class .btn vào hai phần đăng nhập và đăng ký.

Nếu bạn muốn tìm hiểu và khám phá về @ apply thì truy vấn ở đây nha. Phần tiếp theo tất cả chúng ta sẽ đi vào tạo hiệu ứng hover cho button trải qua đoạn mã sau nha :Với hover : bg-blue-500 : mà nền sẽ chuyển sang màu xanh dương khi hover và hover : text-white : là chữ sẽ chuyển sang màu trắng khi ta hover .

Xây dựng Giao Diện Cho Navbar

Trong phần này tất cả chúng ta sẽ sử dụng 1 số ít class cơ bản của tailwind css để thiết kế xây dựng navbar cho website nha .

     

         
             Niem Vui Lap Trinh

npx tailwindcss init

Nếu bạn muốn khám phá về thiết lập Configuration js thì truy vấn ở đây nha .Nếu bạn muốn tìm hiểu và khám phá thêm những ví dụ về tailwind css thì truy vấn 20 Công Cụ Và Ví Dụ Cho Tailwind CSS .

Tổng kết:

Qua đây mình mong bài viết sẽ phân phối thêm cho bạn kỹ năng và kiến thức cơ bản về Tailwind CSS và nếu có vướng mắc gì cứ gửi email mình sẽ phản hồi sớm nhất hoàn toàn có thể. Rất mong bạn liên tục ủng hộ website để mình hoàn toàn có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui tươi !