Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
20 Công Cụ Và Ví Dụ Cho Tailwind CSS

20 Công Cụ Và Ví Dụ Cho Tailwind CSS


Ngày 3 Tháng 7 Năm 2021

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu các công cụ, thư viện, template, ví dụ... cho Tailwind CSS trong quá trình phát triển và thiết kế website nha.

tailblocks

Đây là nơi tổng hợp các component được viết sẵn bằng tailwind CSS. Bạn chỉ cần chọn UI mà mình yêu thích và sao chép code đó về cho dự án.

tailblocks

Nguồn

Tailwind-Typography-Playground

Tailwind-Typography-Playground giúp bạn có thể kiểm tra cách hiển thị của nội dung trang web bằng việc sử dụng các class phổ biến trong Tailwind.

Tailwind-Typography-Playground

Nguồn

tailwind ink

tailwind ink giúp chúng ta có thể dễ dàng chọn màu sắc và sao chép vào file thiết lập cho tailwind.

tailwind ink

Nguồn

Tailwind Grids

Tailwind Grids giúp bạn có thể dễ dàng tạo layout cho trang web bằng tailwind dựa trên các thuộc tính có sẵn mà nó cung cấp.

Tailwind Grids

Nguồn

Tailwind Palette Generator

Tailwind Palette Generator giúp bạn tạo bảng màu dễ dàng dành cho website sử dụng thư viện tailwind.

Tailwind Palette Generator

Nguồn

tailwind-tools

tailwind-tools là nơi tổng hợp các công cụ hữu ích dành cho tailwind như thiết lập bố cục bằng grid, tạo layout bằng flexbox, tạo bảng...

tailwind-tools

Nguồn

tailwind-cheat-sheet

tailwind-cheat-sheet tổng hợp đầy đủ các thuộc tính, class dành cho thư viện này.

tailwind-cheat-sheet

Nguồn

tailwind run

tailwind run giúp chúng ta có thể dễ dàng chỉnh sửa và lập trình online cho thư viện tailwind css .

tailwind run

Nguồn

tailwind gradient

tailwind gradient giúp chúng ta dễ dàng tạo background gradient cho thành phần website.

tailwind gradient

Nguồn

Awesome Tailwind CSS

Awesome Tailwind CSS là nơi tổng hợp các nguồn tài liệu, công cụ hữu ích dành cho lập trình viên khi sử dụng thư viện tailwind.

Awesome Tailwind CSS

Nguồn

Tailwind Weekly

Tailwind Weekly là nơi tổng hợp các bài viết hay được tổng hợp theo tuần dành riêng cho thư viện tailwind css.

Tailwind Weekly

Nguồn

Tailwind CSS Modal

Tailwind CSS Modal

Và kết quả bạn xem dưới đây nhé!

See the Pen Tailwind CSS Modal Demo with Animations by Marco Mark (@m2de) on CodePen.

Nguồn

TailwindCSS Dropdown

TailwindCSS Dropdown

Và kết quả bạn xem dưới đây nhé!

See the Pen TailwindCSS Dropdown by M. Appelman (@huphtur) on CodePen.

Nguồn

Tailwind Responsive Card

Tailwind Responsive Card

Và kết quả bạn xem dưới đây nhé!

See the Pen Tailwind Responsive Card Component by Simon Vrachliotis (@simonswiss) on CodePen.

Nguồn

Tailwind Log In Page

Tailwind Log In Page

Và kết quả bạn xem dưới đây nhé!

See the Pen Full-screen Log In Page by Sahil Vhora (@iamsahilvhora) on CodePen.

Nguồn

Tailwind Card

Tailwind Card

Và kết quả bạn xem dưới đây nhé!

See the Pen Tailwind Card by CodePen (@codepen) on CodePen.

Nguồn

Tailwind Form

Tailwind Form

Và kết quả bạn xem dưới đây nhé!

See the Pen Tailwind Form by Scott Zirkel (@scottzirkel) on CodePen.

Nguồn

Tailwind sidebar component

TTailwind sidebar component

Và kết quả bạn xem dưới đây nhé!

See the Pen Tailwind page w/sidebar by Nikki Peel (@nikki-peel) on CodePen.

Nguồn

Tailwind CSS pricing

Tailwind CSS pricing

Và kết quả bạn xem dưới đây nhé!

See the Pen Tailwind CSS pricing panel responsive by francescomansi (@framansi) on CodePen.

Nguồn

Landing Page Tailwind CSS

Landing Page Tailwind CSS

Và kết quả bạn xem dưới đây nhé!

See the Pen Landing Page — Tailwind CSS by Mert Cukuren (@knyttneve) on CodePen.

Nguồn

Landing Page Tailwind CSS

Landing Page Tailwind CSS

Và kết quả bạn xem dưới đây nhé!

See the Pen Landing Page — Tailwind CSS by Mert Cukuren (@knyttneve) on CodePen.

Nguồn

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những công cụ tailwind CSS hữu ích cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!