Vue thêm tailwind css
|
Tailwind CSS đã gây bão trong thế giới phát triển giao diện người dùng. Nếu bạn chưa nghe về nó, thì Tailwind tự mô tả là "khung CSS ưu tiên tiện ích được tích hợp các lớp như flex, pt-4, text-center và rotate-90, có thể được soạn để xây dựng bất kỳ thiết kế nào, . " Thay vì sử dụng các tên lớp ngữ nghĩa (như "nút" hoặc "tiêu đề"), bạn sử dụng các lớp tiện ích nhỏ hơn này để xây dựng các thành phần của mình Có nhiều cách để tích hợp Tailwind trong ứng dụng Vue. Trong bài viết này, chúng ta sẽ nói về một số phương pháp hay nhất để cài đặt và sử dụng Tailwind trong ứng dụng Vue 🔗Vue CLICài đặt Tailwind trong ứng dụng Vue CLI có lẽ là trải nghiệm dễ dàng nhất hiện có. Có một plugin CLI thực hiện mọi thứ chúng tôi cần, bao gồm cài đặt Tailwind và định cấu hình PostCSS cho chúng tôi. Thậm chí tốt hơn, nó hoạt động cho cả Vue 2 và 3 Trong thiết bị đầu cuối của bạn, tại thư mục gốc của ứng dụng, hãy chạy lệnh sau CLI sau đó sẽ cài đặt plugin. Bạn sẽ được hỏi mức độ hoàn chỉnh của tệp cấu hình Tailwind mà bạn muốn (không có, tối thiểu hoặc đầy đủ). Chọn "tối thiểu" ngay bây giờ - nó sẽ tạo tệp nhưng sẽ không điền vào tệp bất kỳ giá trị tùy chỉnh nào. Khi thiết bị đầu cuối đã hoàn thành, bạn đã hoàn tất Có một số cân nhắc cần lưu ý khi sử dụng phương pháp này
Tài liệu Tailwind bao gồm hướng dẫn cài đặt Tailwind với Vite. Mặc dù nó không đơn giản như plugin Vue CLI, nhưng nó vẫn khá đơn giản để bắt đầu trong Vite Trước tiên, hãy cài đặt Tailwind, PostCSS 8 và Autoprefixer trong kho lưu trữ của bạn Sau đó, chạy lệnh Tailwind CLI để tạo tệp cấu hình mặc định cho cả Tailwind và PostCSS Điều này sẽ tạo ra hai tập tin
Trừ khi bạn muốn thực hiện thay đổi đối với Tailwind hoặc PostCSS, bạn sẽ không phải chạm vào các tệp này. Tài liệu khuyên bạn nên định cấu hình tùy chọn Lưu ý rằng chúng tôi cũng đã thêm khóa Bây giờ, hãy tạo một tệp CSS cơ sở để nhập các lớp của Tailwind vào. Tài liệu Tailwind đề xuất sử dụng Điều này sử dụng PostCSS để nhập các lớp và tiện ích khác nhau mà Tailwind sử dụng. Sau đó, chúng ta chỉ cần nhập tệp này vào tệp Và chúng tôi đã hoàn thành. Tailwind hiện đã có trong ứng dụng Vite của bạn. Đảm bảo xóa tệp Nuxt có một hệ sinh thái plugin tuyệt vời và cũng có một plugin Tailwind để chúng tôi sử dụng tại đây. Không giống như với Vue CLI, có một số công việc thủ công hơn để cài đặt plugin Nuxt, vì vậy hãy bắt đầu Trước tiên, hãy đảm bảo ứng dụng Nuxt của bạn ít nhất là phiên bản 2. 15. 3. Đây là bản phát hành Nuxt hỗ trợ PostCSS 8. Không giống như Vue CLI, plugin này cung cấp bản dựng chính của Tailwind, không phải bản dựng tương thích cho PostCSS 7. Bạn có thể nâng cấp Nuxt bằng cách chạy Khi bạn đã xác nhận rằng ứng dụng Nuxt của mình đã sẵn sàng, hãy chạy lệnh sau trong thiết bị đầu cuối của bạn Thao tác này sẽ cài đặt Tailwind và các plugin cần thiết cho bạn. Sau đó, trong nuxt của bạn. cấu hình. js, hãy thêm plugin vào Cuối cùng, chạy Bạn có thể nhận thấy rằng có ít công việc hơn ở đây so với trong Vite (và ít tệp được tạo hơn nhiều so với trong Vue CLI). Với plugin Nuxt, nếu bạn không có tệp 🔗Tailwind ViewerMột lợi ích của plugin Nuxt là Trình xem Tailwind. Điều này cho phép bạn xem trước các kiểu hiện được bật trong cấu hình Tailwind của mình và sao chép/dán các lớp vào giao diện người dùng của bạn. Bản thân đây là một tính năng tuyệt vời, nhưng khi bạn bắt đầu làm việc với các màu tùy chỉnh hoặc các tính năng khác, việc xem trước chúng trước khi thêm các lớp vào mẫu của bạn có thể là vô giá 🔗Kết luậnChúng tôi đã hướng dẫn cách thêm Tailwind vào ứng dụng Vue trong ba công cụ phổ biến nhất để xây dựng ứng dụng Vue. Nói chung, quá trình là như nhau
Nếu đang sử dụng thiết lập tùy chỉnh cho trang web Vue của mình, thì bạn có thể áp dụng các bước này cho thiết lập của riêng mình để kích hoạt và chạy Tailwind. Ngoài ra còn có một số tài nguyên nếu bạn gặp bất kỳ sự cố nào, bao gồm máy chủ Discord và Thảo luận GitHub, nơi bạn có thể yêu cầu trợ giúp từ những người dùng Tailwind khác 🔗Lưu ý về CSS ưu tiên tiện íchKhi viết bài này, tôi biết rằng CSS ưu tiên tiện ích không dành cho tất cả mọi người. Nếu bạn cũng giống như vậy và bạn đã tiến xa đến mức này, thì có một điều về Tailwind không được nêu bật nhiều như lẽ ra là cách cấu hình cho phép xây dựng một hệ thống thiết kế nhất quán. Tần suất bạn thấy nhiều tệp cấu hình cho Sass không là gì ngoài các biến ( Ngoài ra, Tailwind cung cấp một lệnh đặc biệt, Xét thành phần sau Đây là một nút khá đơn giản, có màu nền, đệm theo chiều rộng và chiều cao và thuộc tính hover. Hiện tại, chúng ta có thể thấy một số thay đổi khác cần thực hiện (thêm một số bóng đổ, chuyển tiếp, các kiểu khác nhau cho trạng thái bị vô hiệu hóa, v.v.). Chỉ sử dụng Tailwind, điều đó có thể dẫn đến một số lượng lớn các lớp trên phần tử nút Giả sử bạn không thích có các thuộc tính lớp lớn đó, nhưng bạn vẫn muốn các lợi ích khác của Tailwind. Đây là ví dụ tương tự, sử dụng Tốt đẹp. Mẫu của chúng tôi đơn giản hơn rất nhiều và các kiểu được chứa trong khối kiểu của chúng tôi. Điều đó nói rằng, hầu hết người dùng Tailwind có thể sẽ muốn tiếp tục mà không sử dụng Và hãy nhớ rằng, mục tiêu của việc sử dụng Tailwind hoặc bất kỳ khung hoặc phương pháp CSS nào khác là để xây dựng trải nghiệm tuyệt vời cho người dùng ứng dụng của bạn. Đừng mất tập trung vào điều đó khi quyết định có nên áp dụng Tailwind trong ứng dụng Vue mới nhất của bạn hay không. Hãy dùng thử, xem nó có phù hợp với bạn không và tự quyết định xem nó có phù hợp với dự án hoặc phong cách viết CSS của bạn không Cho đến lần sau Dot Labs này là một công ty tư vấn web hiện đại tập trung vào việc giúp các công ty hiện thực hóa các nỗ lực chuyển đổi kỹ thuật số của họ. Để được chuyên gia hướng dẫn, đào tạo hoặc tư vấn kiến trúc về React, Angular, Vue, Web Components, GraphQL, Node, Bazel hoặc Polymer, hãy truy cập thisdotlabs. com Dot Media này tập trung vào việc tạo ra một trang web toàn diện và mang tính giáo dục cho tất cả mọi người. Chúng tôi giúp bạn cập nhật những tiến bộ trong web hiện đại thông qua các sự kiện, podcast và nội dung miễn phí. Để tìm hiểu, hãy truy cập dấu chấm này. đồng |
