Đón Đầu Xu Hướng với Tailwind CSS 4.0: Các Tính Năng Mới và Cải Tiến Nổi Bật

0 0 0

Người đăng: Hiếu trần mạnh

Theo Viblo Asia

Sơ lược về Tailwind

  • Tailwind mang lại cho chúng ta làn gió mới trong việc phát triển web tuy nhiên không phải ai cũng thích kiểu code của Tailwind . Riêng mình thì nghiện không dứt ra được !
  • Với kiểu code inline thì không phải dev nào cũng thích, tuy nhiên từ 2019 nó trở nên cực kỳ phổ biến
  • Cá nhân mình thích kiểu cứ copy rồi dùng và đặt biệt không ảnh hưởng đến các file khác.

Một số thông tin và từ khóa thêm cho các anh em về bản Tailwind 4.x này

  • Đọc trăm thứ không bằng đọc docs các anh em có thể tham khảo Docs Beta ở link này nhé : Doc beta Tailwind CSS 4x
  • Tailwind 4x được released vào tháng 11 năm 2024 , cũng cách lúc tôi viết bài này 2 tháng , cũng còn mới ra .
  • Một số từ khóa khác chia sẻ cho các anh em : Lightning Css, Tailwind Oxide, OKLCH. Tạm nhiêu đó thôi
  • Nếu anh em nào muốn hiểu sâu thì có thể đọc docs của Tailwind 3x để so sánh nhé

Những nét mới của Tailwind v4 so với v3

Ảnh tailwind 4x

Sử dụng Engine mới

  • Sử dụng Engine Oxide để cải tiến đáng kể về Framework
  • Engine này được xây bằng Rust giúp tăng tốc độ xử lý và tối ưu hóa hiệu suất . Giúp build nhanh hơn
  • Dùng Lightning Css cũng xây bằng Rust giúp chuyển Css từ PostCSS và Autoprefixer nhanh hơn . Nó sử dụng đa luồng và song song hóa để tính toán nhanh hơn

Cấu hình đơn giản hơn

  • Đa phần cấu trúc config sẽ được tối giản , anh em cứ vào docs relese để đọc nhiều còn về ví dụ thì đây:
  • **V3 sử dụng thế này : **
@tailwind base;
@tailwind components;
@tailwind utilities;
  • V4 thì chỉ cần thế này thôi
@import "tailwindcss";

Chỉnh lại khoảng cách động

Đổi khoảng cách

  • Chuyển m-, w-,mt-* ,... trở thành bội số của 0,25 rem. Kiểu m-1 thì 0.25 rem, m-3 thì 0.75 rem

Chuyển từ màu RGB sang OKLCH

  • GIúp màu trở nên sống động hơn, các bác cứ nhìn bảng màu này là rõ
    màu oklch

Cách nâng từ V3 lên V4

cứ chạy lệnh này

npx @tailwindcss/upgrade@next

Bài viết tham khảo: blog.logrocket.com/getting-ready-tailwind-v4 , Cảm ơn các anh em đã đọc!

Bình luận

Bài viết tương tự

- vừa được xem lúc

Căn giữa các phần tử HTML theo chiều dọc (phần 1)

Bài viết được dịch từ bài Vertical centering of elements in HTML xuất bản ngày 18/01/2015 trên trang Web++. .

0 0 80

- vừa được xem lúc

Căn giữa phần tử trong CSS

1. Theo chiều ngang. Đó có phải là phần tử inline hay inline-* (như text hay links). .

0 0 67

- vừa được xem lúc

99% không biết đến mẹo này khi sử dụng Flexbox CSS

Hello lại là mình đây. Bài viết hôm nay mình sẽ giới thiệu tới mọi người một trick khá hay khi dùng CSS flexbox nhé. 1. Chia layout với flexbox.

0 0 62

- vừa được xem lúc

Vanilla JS Project: Tính tuổi

1. Yêu cầu.

0 0 75

- vừa được xem lúc

1 số UI component và layout hữu ích với Frontend

Giới thiệu. Hôm nay mình xin chia sẻ 1 số Layout và UI component quen mà có lẽ là quen thuộc với nhiều người khi làm dự án, hay bắt gặp trên mạng.

0 0 65

- vừa được xem lúc

Style text css

Giới thiệu. Chào 2021, mình sẽ giới thiệu vài kiểu style cho text màu mè chút cho rực rỡ .

0 0 44