Cách học CSS Tailwind
|
Bạn có cảm thấy mệt mỏi khi sử dụng CSS3 và tự mình tạo kiểu cho mọi thứ không? Show
Tailwind là một khung ưu tiên tiện ích sẽ giúp cuộc sống của bạn dễ dàng hơn rất nhiều vì nó có rất nhiều lớp Trong video này, chúng ta sẽ thiết lập Tailwind, tìm hiểu về phông chữ, màu sắc, căn chỉnh, màu nền, độ dốc, hình ảnh, phần đệm, lề, lưới, flexbox, di chuột, hoạt ảnh, chuyển tiếp và biến đổi Bên cạnh đó, chúng ta sẽ đi sâu vào thiết kế đáp ứng và cách tùy chỉnh Tailwind. Khi kết thúc khóa học, bạn sẽ học cách xóa tệp CSS Tailwind của mình vì tệp này có dung lượng gần 5MB Chúng tôi sẽ không tạo dự án ở đây mà chỉ đề cập đến các chủ đề quan trọng mà bạn cần biết trước khi bắt đầu sử dụng TailwindCSS. Đây là chuỗi video tôi đã tạo cho kênh YouTube của mình nhưng tôi nghĩ mình sẽ thêm nó vào Udemy Sau khi thử nghiệm Tailwind, dưới đây là những điều bạn nên biết trước khi bắt đầu với Tailwind CSS -
Tôi đã bắt đầu như thế nàoTailwind rất dễ sử dụng và bạn có thể nắm bắt nếu bạn có kiến thức tốt về CSS. Vì đó là cùng một CSS mà chúng tôi đang viết nhưng tóm lại, tôi không cần học thêm bất cứ điều gì trước khi có thể bắt đầu học Tailwind To start with Tailwind, I followed the playlist of Tailwind Lab's on YouTube: Tailwind CSS: from Zero to Production . This playlist really explains everything in a clear-cut and short way. I learnt how to set up a Tailwind project, that is to download all the important files( like package.json, tailwind.config file ) and other handy plugins. After been done learning about how Tailwind pretty much works, I started exploring Tailwind's documentation, which is one of the best docs I came across up till now. While fiddling with documentation and trying to implement things on my own, I learnt how to develop normal web pages with proper styling and responsiveness through Tailwind CSS. Afterwards, I jumped on to some advanced stuff like creating my own classes, how to make and use custom colours and properties!< br/> Những khó khăn tôi gặp phải
Dễ học
Bootstrap so với CSS TailwindBootstrap và Tailwind, cả hai đều là một trong những khung CSS được sử dụng nhiều nhất Bootstrap cho phép bạn nhanh chóng thiết kế và tùy chỉnh các trang web ưu tiên thiết bị di động đáp ứng. Đó là bộ công cụ nguồn mở giao diện người dùng phổ biến nhất trên thế giới, bao gồm các biến Sass và mixin, hệ thống lưới đáp ứng, các thành phần dựng sẵn mở rộng và các plugin JavaScript mạnh mẽ 1. khả năng tùy biến
2. Sử dụng với Bộ tiền xử lý CSS
3. Loại bỏ các lớp không sử dụngCả Tailwind CSS và Bootstrap đều sử dụng PurgeCSS để xóa tất cả các lớp css chưa được xử lý chỉ giúp tăng kích thước tệp Hướng dẫn về CSS của Tailwind cũng như các ví dụ về CSS của Tailwind là những thứ có thể rất hữu ích cho những người mới bắt đầu muốn nắm vững kiến thức cơ bản về khung CSS ưu tiên tiện ích này. Nhưng không chỉ đối với họ. Việc xây dựng các thiết kế trang web hấp dẫn bằng CSS có thể là một việc khó khăn khi mới bắt đầu. Vì vậy, nếu bạn muốn học CSS Tailwind nhanh, thì bạn nên đọc hướng dẫn chi tiết của chúng tôi. Là một phần của hướng dẫn về Tailwind, một số ví dụ thú vị về Tailwind cũng sẽ được cung cấp. Vì vậy, nếu bạn muốn tìm hiểu về Tailwind, hãy sớm bắt đầu với chúng tôi
Trong hướng dẫn mở rộng về Tailwind này, các chủ đề sau sẽ được thảo luận 1. Tóm tắt CSS Tailwind 2. Hướng dẫn và ví dụ về Tailwind CSS 3. Giờ thì bạn đã biết cách sử dụng Tailwind CSS trong các dự án của mình
Tóm tắt TailwindCSSTailwind là một khung CSS giúp các nhà phát triển bắt đầu một dự án mới với một tập hợp các kiểu tiện ích để tạo các ứng dụng web đẹp và có thể mở rộng một cách nhanh chóng và dễ dàng. Các khung CSS vẫn là một công cụ phổ biến trong bộ công cụ giao diện người dùng và có rất nhiều lý do chính đáng cho điều đó Trước hết – các phần tử HTML gốc không đẹp và đôi khi nó yêu cầu rất nhiều CSS để làm cho các trang web hấp dẫn và phản hồi nhanh. Các khung CSS giúp các nhà phát triển bắt đầu với một bộ cơ bản gồm các kiểu phong phú và có thể tùy chỉnh cho các thành phần khác nhau, thường là với cách tiếp cận ưu tiên thiết bị di động. Ưu tiên thiết bị di động có nghĩa là trang được tạo có tính đến kích thước màn hình của thiết bị di động và bố cục của trang được điều chỉnh dần dần để có độ phân giải cao hơn. Cách thiết kế trang web này được nhiều người coi là cách viết ứng dụng dễ dàng hơn nhiều so với việc bắt đầu với bố cục cho độ phân giải màn hình nền, sau đó nén trang để vừa với màn hình nhỏ hơn. Tại sao nên sử dụng khung CSS?Nếu chúng tôi không có hệ thống thiết kế, các khung CSS có thể cung cấp cho chúng tôi một bộ khối xây dựng đẹp mắt để làm cho ứng dụng trở nên thanh lịch về mặt trực quan. Bảng quản trị nội bộ thường là trường hợp của các ứng dụng như vậy. Tính năng quan trọng hơn vẻ ngoài và chúng thường không có bất kỳ thiết kế nào cả. Nếu chúng được xây dựng bằng khung CSS, nhà phát triển giao diện người dùng có thể dễ dàng tạo các ứng dụng web dễ nhìn Tương tự, nếu chúng ta cần tạo một trang đơn giản giới thiệu một thành phần hoặc chức năng đơn lẻ, hãy tạo một ứng dụng nhỏ cho cuộc thi hackathon hoặc làm việc trên một dự án phụ sau nhiều giờ thì thật tốt khi có một giải pháp sẵn sàng sử dụng để tạo kiểu nhanh và đẹp. Nếu bạn được giao nhiệm vụ tạo một ứng dụng web như một phần của quy trình phỏng vấn, giao diện của ứng dụng có thể có ý nghĩa nhiều nếu không muốn nói là nhiều hơn bản thân mã và chức năng Mặt khác, nếu chúng tôi đang tạo một ứng dụng mới trong nhóm có các nhà thiết kế UX chuyên dụng, thiết kế thường đòi hỏi nhiều công việc để thực hiện. Thiết lập chủ đề có thể bao gồm không gian, màu sắc, lưới và tất cả những thứ đó cho các độ phân giải màn hình khác nhau không phải là một kỳ công dễ dàng. Do khả năng tùy chỉnh của khung CSS, chúng có thể được sử dụng làm xương sống để xây dựng kết quả mong muốn nhanh hơn và hiệu quả hơn Khung CSS ưu tiên tiện íchTailwind CSS là tập hợp các lớp tiện ích, mỗi lớp chịu trách nhiệm về một số chức năng nhỏ. Đây có thể là màu văn bản, màu nền, khoảng cách hoặc đường viền. Cách tiếp cận như vậy cho phép chúng tôi viết một trang dựa trên cái gọi là CSS nguyên tử. Đó là một phương pháp hiện có nhiều người ủng hộ như đối thủ. Và các nhà phát triển phần mềm đã quen với việc viết và thiết kế CSS trong các dự án bằng cách sử dụng phương pháp thành phần. Trước tiên hãy giải thích hai cách tiếp cận là gì, để hiểu rõ hơn về sự khác biệt của chúng Trong cách tiếp cận thành phần để viết CSS, mỗi thành phần (một thành phần có chức năng cụ thể như chọn, hộp văn bản đa dạng thức hoặc băng chuyền có hình ảnh) phải độc lập về HTML, mã JavaScript và kiểu của nó. Kiểu dáng của một thành phần không được ảnh hưởng đến sự xuất hiện của thành phần khác theo bất kỳ cách nào. Viết CSS như thế này rất thuận tiện và trực quan cho các nhà phát triển phần mềm. Tuy nhiên, giải pháp này có nhược điểm của nó Vì CSS hoạt động trên toàn cầu nên chúng ta cần viết tên lớp theo cách có thể tránh được các xung đột tiềm ẩn. Chúng ta không thể có hai thành phần khác nhau xác định lớp Theo cách tiếp cận nguyên tử để viết CSS, chúng tôi có nhiều lớp chỉ kiểm soát các khía cạnh nhỏ của giao diện. Các lớp được xác định trước và được đặt tên rõ ràng, đồng thời với kho tài liệu được ghi lại về chúng, chúng tôi chỉ định một số ít được chọn cho các phần tử cụ thể Đối với nhiều nhà phát triển, cách tiếp cận mà Tailwind CSS quảng bá có vẻ kỳ lạ và không chính đáng. Người ta thường nhầm lẫn rằng nhiều lớp sẽ khiến kích thước cuối cùng của CSS được gửi cùng với HTML quá lớn và việc quản lý chúng sẽ trở nên phức tạp và không thực tế. Trong khi đó, không thiếu ý kiến cho rằng sự thật hoàn toàn ngược lại. Sau khi dùng thử Tailwind CSS, nhiều người nhận thấy phương pháp của nó rất dễ sử dụng. Vì các thành phần mới mà chúng tôi viết có thể sử dụng hầu hết các lớp hiện có, nên các tệp CSS phát triển chậm hơn và ít tích cực hơn so với cách tiếp cận truyền thống Tailwind CSS - các tính năng và hạn chếBài viết này được viết dựa trên phiên bản Tailwind CSS 3 mới nhất. 0. 5. Nhiều lớp CSS mà nó cung cấp sử dụng các tính năng chỉ có trong các trình duyệt mới, chẳng hạn như Bắt đầu với phiên bản 2. 0. 0, Tailwind không còn hỗ trợ các trình duyệt cũ như Internet Explorer 11. Nếu chúng ta đang thực hiện một dự án cần giao diện đẹp như nhau trên chúng, thì chúng ta phải sử dụng phiên bản cũ hơn của Tailwind 1. 9. 0, nhưng bạn phải tính đến thực tế là không phải tất cả các tính năng được mô tả trong bài viết này đều được triển khai ở đó Hướng dẫn và ví dụ về Tailwind CSSHãy xem cùng một thành phần có thể trông như thế nào từ phía mã được viết theo các phong cách khác nhau  Một thành phần thẻ đơn giản, có hình ảnh và văn bản bên trong. Khi bạn di chuột qua nó, màu nền sẽ thay đổi Đầu tiên, hãy xem kiểu dáng của một phần tử như vậy có thể trông như thế nào theo truyền thống. Hãy xác định một lớp cho từng thành phần – thẻ, hình ảnh và văn bản, sau đó gán chúng cho các thành phần HTML. Trong ví dụ này, màu sắc và khoảng cách đã được chọn cụ thể để khớp với những màu có sẵn trong Tailwind CSS Mã HTML + CSS mà chúng tôi sẽ phải viết thủ công để tạo kiểu cho thẻ bằng hình ảnh
Phần tử tương tự được viết bằng Tailwind CSS. Chúng tôi không cần một dòng CSS nào ở đây vì chúng tôi sử dụng các lớp được cung cấp
Tuy nhiên, nếu chúng ta không cảm thấy thuyết phục khi chỉ định một số lượng lớn các lớp cho mỗi thành phần HTML, thì Tailwind cũng cho phép chúng ta sử dụng nó theo cách thành phần. Nếu chúng tôi sử dụng công cụ mà nó cung cấp, chúng tôi sẽ có quyền truy cập vào các lệnh đặc biệt trong các tệp CSS có tên là Sử dụng lệnh Như bạn có thể thấy, Tailwind CSS không ép buộc chúng tôi áp dụng bất kỳ cách tiếp cận nào và chúng tôi có thể sử dụng nó một cách thoải mái và phù hợp. Tuy nhiên, các tác giả của Tailwind CSS khuyên bạn nên sử dụng nhiều lớp và gán chúng trong HTML, đây là một cách tiếp cận nguyên tử Cách sử dụng Tailwind CSSTailwind không chỉ là một tập hợp các lớp CSS. Nó cũng là một công cụ cho phép chúng tôi định cấu hình nhiều giá trị như màu sắc hoặc khoảng cách theo nhu cầu của chúng tôi. Nó cũng cung cấp một công cụ khai thác quét việc sử dụng các lớp trong các tệp HTML, JS và CSS của chúng tôi và chỉ nhập tập hợp con của các lớp mà chúng tôi sử dụng. Nhờ đó, chúng tôi không phải lo lắng rằng chúng tôi sẽ gửi hàng kilobyte CSS không sử dụng Để sử dụng công cụ này, chúng ta cần cài đặt một gói từ sổ đăng ký npm có tên là Lệnh đầu tiên cài đặt Cái đầu tiên sẽ tải xuống thư viện Tailwind CSS, thư viện này có tất cả các lớp trong đó, cũng như một công cụ hữu ích để sử dụng chúng. Lệnh thứ hai sẽ tạo một tệp cấu hình có tên là Tệp
Bây giờ chúng ta cần thêm một quy tắc đường dẫn để khớp với các tệp HTML và CSS của chúng ta Tệp
Bằng cách này, Tailwind CSS sẽ biết nơi để tìm việc sử dụng các lớp của nó. Trong quá trình xây dựng dự án của chúng tôi, chỉ những lớp được sử dụng ở bất kỳ đâu trong tệp Giả sử rằng tệp duy nhất trong thư mục Lệnh tạo tệp CSS đầu ra với các lớp CSS Tailwind được sử dụng. Tùy chọn Vô hiệu hóa tạo mã bình thường hóa CSS
Chúng tôi có thể tùy chọn chuyển một cờ Tailwind CSS cũng hỗ trợ nhiều framework phổ biến như Next. js, Gatsby, Laravel hoặc Tạo-React-App. Trên hết, bạn có thể sử dụng nó làm plugin cho thư viện PostCSS, thư viện này dễ dàng tích hợp với các gói hiện đang được sử dụng như webpack hoặc rollup Một lớp, nhiều giá trịNhiều thuộc tính CSS nhận giá trị số. Đây thường là các thuộc tính kiểm soát kích thước hoặc khoảng cách giữa các phần tử. Hãy xem cách Tailwind CSS có thể được sử dụng để thêm các lề khác nhau cho một phần tử ClassPropertiesm-0margin. 0pxmy-pxmargin-top. 1px; . 1px;mx-2lề-trái. 0. 5rem;lề-đáy. 1px;mx-2lề-trái. 0. 5rem; lề-phải. 0. 5rem;ml-8lề-trái. 2remmr-36lề-phải. 9rem Một bảng các lớp lề được chọn cho các mặt mô hình hộp khác nhau và các kích thước khác nhau và các thuộc tính kiểu tương ứng của chúng. my-px
Sự lựa chọn của các giá trị được hiển thị là ngẫu nhiên. Bảng này chỉ để cho thấy rằng các số không tương ứng trực tiếp với kích thước pixel mà đề cập đến một chỉ mục trong bảng kích thước được xác định. Chúng tôi cũng có thể lưu ý rằng Tailwind đã quyết định rằng tất cả các kích thước (ngoại trừ
Nếu muốn xem tất cả các kích thước có sẵn, chúng ta có thể dễ dàng kiểm tra chúng trong tài liệu CSS chính thức của Tailwind. Điều đáng nói là việc xác định phần đệm cho một phần tử được thực hiện theo cùng một cách, chúng chỉ khác nhau về tên, nhưng chữ cái xác định cạnh của mô hình hộp hoặc kích thước vẫn giống nhau Nếu muốn sử dụng một giá trị cụ thể mà Tailwind CSS không cung cấp, thì chúng ta không nhất thiết phải sửa đổi giá trị đó và viết các lớp theo cách thủ công. Nếu đặt kích thước trong dấu ngoặc vuông, chúng ta có thể sử dụng bất kỳ giá trị CSS hợp lệ nào và Tailwind CSS sẽ đọc chính xác lớp và tạo lớp đó cho chúng ta Mã HTML ngắn với các lớp sử dụng kích thước mà Tailwind CSS không cung cấp
Đối với mã HTML như vậy, các lớp được tạo để xác định khả năng đáp ứngViết các trang web đáp ứng đã trở thành một tiêu chuẩn để phát triển web ngày nay. Tỷ lệ thiết bị di động với tư cách là người nhận trang web đã trở nên quá lớn để bỏ qua. Tailwind CSS, theo một cách rất đơn giản, cho phép chúng tôi viết các trang một cách nhanh chóng. Mỗi lớp có trong Tailwind, chúng tôi có thể viết bằng tiền tố xác định kích thước mà lớp đó sẽ hoạt động. Tiền tố và truy vấn phương tiện tương ứng trông như thế này theo mặc định trong Tailwind CSS tiền tố điểm dừng chiều rộng tối thiểu CSS sm640px@media (chiều rộng tối thiểu. 640px) {. }md768px@media (chiều rộng tối thiểu. 768px) {. }lg1024px@media (chiều rộng tối thiểu. 1024px) {. }xl1280px@media (chiều rộng tối thiểu. 1280px) {. }2xl1536px@media (chiều rộng tối thiểu. 1536px) {. }Một bảng các tiền tố có sẵn, độ rộng tương ứng và truy vấn phương tiện
Thành phần thẻ chiếm một tỷ lệ phần trăm khác nhau của chiều rộng có sẵn tùy thuộc vào chiều rộng của thiết bị mà trang được hiển thị
Để đạt được điều này, chúng ta chỉ cần thêm các lớp điều khiển độ rộng phù hợp sẽ chỉ hoạt động với các kích thước cụ thể Việc thêm lớp
Chế độ tốiChế độ tối đã trở thành một yêu cầu ngày càng phổ biến vì một số người dùng thích chế độ này hơn là giao diện trang web có màu sáng. Đối với một số người, nó chỉ đơn giản là dễ chịu hơn trong nhận thức, những người khác cho rằng nó ít chói mắt hơn khi duyệt Internet vào ban đêm Trong Tailwind CSS, việc xử lý chế độ tối được thực hiện tương tự như việc xử lý khả năng phản hồi. Chúng ta chỉ cần thêm tiền tố Chuyển phát hiện chế độ tối tự động sang thủ công
Hãy lấy một ví dụ HTML đơn giản về cách chúng tôi có thể hiển thị và ẩn nội dung tùy thuộc vào chế độ tối khi nó được định cấu hình là `class` Ví dụ về mã HTML nơi chúng tôi có 2 tiêu đề Khả năng mở rộng TailwindTrong tệp Một ví dụ về tệp
Các plugin thêm một tập hợp các lớp bổ sung, đáng nói ở đây là các kiểu chữ và biểu mẫu bổ sung chính thức. Cái đầu tiên thêm một vài lớp để hiển thị nội dung dưới dạng văn bản Markdown. Nó rất hữu ích khi chúng ta cần hiển thị HTML với các thẻ ngữ nghĩa mà chúng ta không có quyền truy cập, vì vậy chúng ta không thể thêm các lớp của mình vào đó. Điều này thường xảy ra khi chúng ta cần hiển thị nội dung từ CMS. Cái thứ hai chỉ đơn giản là chịu trách nhiệm tạo kiểu dáng cho các biểu mẫu; . Chúng ta có thể chọn tùy chọn mà chúng ta phải gán các lớp `form-input` theo cách thủ công để áp dụng các kiểu Cấu hình CSS Tailwind với plugin kiểu chữ và biểu mẫu. Bằng cách định cấu hình chiến lược plugin biểu mẫu, chúng tôi phải chỉ định thủ công trường biểu mẫu nào sẽ được tạo kiểu
hỗ trợ biên tập viênTailwind CSS có một tính năng tuyệt vời khác trong cửa hàng bên cạnh một công cụ để tạo tệp CSS. Nếu công cụ của chúng tôi trong công việc hàng ngày là Visual Studio Code, thì chúng tôi có một plugin chính thức cho nó. Nhờ nó, trong các tệp HTML và CSS, chúng tôi có các lớp tự động đề xuất và một danh sách các giá trị có sẵn cho chúng. Chúng ta cũng có thể thấy màu đã sử dụng được đặt trước tên lớp và khi di chuột qua một trong các lớp, chúng ta có bản xem trước của mã CSS thực được xác định bởi nó Hiển thị tự động đề xuất tên lớp khi chỉnh sửa tệp HTML. Khi chúng ta di chuột qua một lớp, chúng ta có thể xem nó chứa mã CSS nào
Điều đáng nói là nếu chúng tôi mở rộng hoặc thay đổi cấu hình của Tailwind với tệp Nếu chúng tôi muốn sử dụng IDE từ JetBrains, thì cũng có một plugin dành cho họ, cung cấp các tiện ích tương tự
nguyên mẫuNếu bạn không muốn loay hoay với việc định cấu hình dự án để sử dụng Tailwind CSS, thì có một cách để bạn có thể dễ dàng đưa dự án đó lên trang web của chúng tôi. Bạn chỉ cần nhúng tập lệnh từ CDN Sau khi thêm một tệp JavaScript vào trang, chúng ta có thể sử dụng các lớp CSS của Tailwind trong HTML Điều đáng nói là việc sử dụng Tailwind CSS theo cách như vậy không phù hợp làm giải pháp sản xuất. Đây chỉ là một cách đơn giản và dễ dàng để kiểm tra xem chúng tôi đang làm việc với nó như thế nào Giờ thì bạn đã biết cách sử dụng Tailwind CSS trong các dự án của mìnhTôi hy vọng bạn có thể tìm hiểu xem Tailwind CSS có thể mạnh mẽ và linh hoạt như thế nào. Nó cung cấp cho chúng tôi một bộ sưu tập phong phú các lớp CSS và cho phép chúng tôi dễ dàng tạo các trang web phản hồi với sự hỗ trợ cho chế độ tối phổ biến. Nhờ đó, các trang của chúng tôi đáp ứng các yêu cầu hiện nay trong khi vẫn cung cấp kích thước hợp lý cho các tệp CSS được tải lên Các lớp trong Tailwind CSS được viết bằng các trình duyệt hiện đại và tính năng của chúng. Để làm việc với nó thú vị, các tác giả cần đưa ra một số quyết định dũng cảm, cụ thể là thiếu hỗ trợ cho các trình duyệt cũ hơn. Chúng ta nên luôn nhớ chọn công nghệ một cách có trách nhiệm và cân nhắc dựa trên yêu cầu của mình Có rất nhiều lớp mà Tailwind CSS cung cấp và mặc dù có tài liệu tuyệt vời nhưng ban đầu có vẻ khó khăn do phải chuyển đổi liên tục giữa lớp đó và trình chỉnh sửa. May mắn thay, với sự trợ giúp của một plugin cung cấp các đề xuất tên lớp và bản xem trước các giá trị của chúng. Đây là một công cụ giúp cho những bước khởi đầu dễ dàng hơn, nhưng nó cũng không thể thiếu trong công việc hàng ngày – ngay cả đối với những nhà phát triển phần mềm đã có một số kinh nghiệm với Tailwind CSS Rất thường xuyên, các lập trình viên gặp vấn đề với việc làm thế nào để chọn một tên hay cho một biến, lớp hoặc hàm; . May mắn thay, Tailwind CSS đã loại bỏ vấn đề này vì chúng tôi có sẵn một tập hợp các lớp được đặt tên với đầy đủ tài liệu. Mỗi tên xác định cả thuộc tính và giá trị, đồng thời cũng có thể tùy chọn điểm ngắt và hoạt động ở chế độ tối hoặc sáng. Điều này loại bỏ vấn đề đặt tên và giúp việc sử dụng Tailwind CSS nhanh hơn theo thời gian bằng cách ghi nhớ chúng ta có những lớp nào và chúng dùng để làm gì Nếu chúng tôi có nhận xét hoặc đề xuất về các kiểu tích hợp sẵn mà Tailwind CSS cung cấp, thì chúng tôi có thể tùy chỉnh chúng theo nhu cầu của mình một cách rất dễ dàng. Chúng tôi không chỉ có thể thêm các giá trị mới mà còn có thể thay đổi các giá trị mặc định cho điểm dừng, kích thước văn bản và phông chữ Nói tóm lại, Tailwind CSS là một công cụ tuyệt vời để bắt đầu các dự án mới và đã được thiết kế theo cách giúp nó mở rộng quy mô phù hợp với sự phát triển của ứng dụng. Nói chung, chắc chắn bạn nên học Tailwind CSS, sử dụng nó trong các dự án của bạn và xây dựng các thiết kế trang web hấp dẫn với nó Và trải nghiệm của bạn khi sử dụng các lớp CSS của Tailwind là gì? Học CSS Tailwind dễ dàng như thế nào?Theo tôi, Tailwind đơn giản và dễ hiểu . Đúng là có thể mất một chút thời gian để hiểu rõ tất cả các tên lớp tiện ích, nhưng đừng lo – bạn có thể tham khảo tài liệu của họ bất cứ khi nào bạn gặp khó khăn.
Tôi có thể học Tailwind CSS ở đâu?6 Sách và khóa học CSS Tailwind hay nhất dành cho người mới bắt đầu học năm 2023 . Tailwind CSS từ đầu. Tìm hiểu bằng cách xây dựng các dự án của Brad Traversy. . CSS đuôi gió. Một cách hiện đại để xây dựng trang web bằng CSS. . Tailwind CSS - Một cách mới để > SUY NGHĨ < CSS. . Tìm hiểu Tailwind CSS Xây dựng danh mục đầu tư của riêng bạn + Dự án thú vị Mất bao nhiêu để học Tailwind CSS?Học CSS Tailwind không khó chút nào vì như tôi đã đề cập ở trên, bạn không cần phải học gì thêm vì chúng tôi đang viết CSS cũ đó. Tài liệu của Tailwind có một trong những lời giải thích tốt nhất cho cùng một nội dung, đó là các khái niệm cốt lõi, cách thức hoạt động và cách sử dụng của nó.
Tailwind có thân thiện với người mới bắt đầu không?CSS TAILWIND LÀ GÌ? . beginner-friendly CSS framework, that enables developers to build beautiful designs without leaving their HTML page. |
