Vue thêm đuôi CSS
Thư viện này sử dụng các lớp TailwindCSS theo mặc định. Tuy nhiên, nó sẽ hoạt động với bất kỳ khung CSS nào vì tất cả các lớp CSS đều có thể định cấu hình được Show
Để cài đặt TailwindCSS, hãy làm theo tài liệu chính thức của anh ấy. https. //tailwindcss. com/docs/cài đặt 2. 1 Thêm plugin @tailwindcss/formsChủ đề mặc định của thư viện này phụ thuộc vào plugin 1. Để sử dụng nó, hãy làm theo các bước trên trang nguồn plugin. https. //github. com/tailwindlabs/tailwindcss-forms2. 1 Thêm các biến thể cho lớp giả bị vô hiệu hóaCũng cần thiết cho chủ đề mặc định và được khuyến nghị mạnh mẽ vì nó bổ sung khả năng sử dụng một số lớp như 2 cho đầu vào bị vô hiệu hóaXem https. //tailwindcss. com/docs/conforming-variants trên tài liệu TailwindCSS để biết thêm thông tin Để tham khảo, 3 của bạn có thể trông như thế này
3. Định cấu hình Vue để sử dụng vue-tailwind3. 1 Nhập và cài đặt các thành phầnĐịnh dạng cấu hìnhĐịnh dạng mà các cài đặt mong đợi là như sau
4 là tên mà bạn sẽ sử dụng để thêm thành phần của mình. Bạn có thể đặt bất kỳ tên nào bạn muốn. Hãy xem ví dụ sauTrong trường hợp bạn thắc mắc, bạn có thể cài đặt cùng một thành phần hai lần nhưng với các cài đặt khác nhau 3. 2 Ngoài ra, bạn có thể sử dụng phiên bản v1. 0 cú phápCú pháp này sẽ cài đặt tất cả các thành phần trên thư viện này 3. 3 Hoặc bạn chỉ có thể cài đặt các thành phần bạn cầnSử dụng cú pháp từ điểm 3. 3 là cách tốt nhất để ngăn kích thước gói lớn, nhưng chỉ khi bạn nhập một vài thành phần. Nếu số lượng thành phần bạn cài đặt tăng lên, cách khuyến nghị để cài đặt chúng là sử dụng cú pháp từ các điểm 3. 1 hoặc 3. 2 để giúp thư viện sử dụng lại một số mã và giữ kích thước gói ở mức tối thiểu 4. Định cấu hình purgecss (tùy chọn)Để sử dụng plugin 5 postcss, bạn sẽ cần một cách để cho plugin biết bạn đang sử dụng lớp nào. Một cách để làm điều đó là di chuyển cài đặt của bạn sang một tệp riêng và sau đó thêm tệp đó vào cấu hình postcss 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 từng 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 6, tùy chọn này được Tailwind sử dụng để xóa các kiểu không sử dụng. Với thay đổi này, tệp 3 của bạn sẽ trông như thế nàyLưu ý rằng chúng tôi cũng đã thêm khóa 8 vào cấu hình. Điều này sẽ kích hoạt chế độ Just-In-Time của Tailwind, đây là một trải nghiệm hiệu quả hơn và kích hoạt một số tính năng khác của Tailwind. Đọc tài liệu để tìm hiểu thêm và hiểu rõ hơn những gì bạn nhận được từ điều nàyBâ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 9, nhưng tôi khuyên bạn nên tạo một tệp CSS riêng chỉ dành cho Tailwind. Hãy gọi nó là 0. Trong tập tin đó, đặt như sauĐ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 0 của mình như thế nàyVà 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 1 của bất kỳ kiểu nào bạn không muốn. Trên thực tế, tệp đó có thể sẽ nhỏ hơn nhiều so với mức mà bạn có thể sử dụng, nhưng vẫn hữu ích nếu tách các kiểu tùy chỉnh của bạn khỏi TailwindNuxt 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 2Khi 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 3 của bạn________số 8 Cuối cùng, chạy 4 để tạo tệp cấu hình Tailwind. Và đó là nó. Tailwind hiện đã sẵn sàng để đưa vào ứng dụng Nuxt của bạnBạ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 0 nơi các kiểu được thêm vào, Nuxt sẽ tạo tệp đó cho bạn (điều này cũng đúng với tệp 3, nhưng thông thường bạn sẽ muốn điều đó để bật chế độ JIT hoặc chế độ khác Trình xem TailwindMộ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á Phần 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 ( 7, 8, v.v. )? . Ngoài ra, Tailwind đã được tích hợp sẵn một số quyết định thiết kế tuyệt vời cho phần đệm và lề, hộp linh hoạt, v.v., giúp công việc xây dựng một hệ thống thiết kế trở nên dễ dàng hơn nhiềuNgoài ra, Tailwind cung cấp một lệnh đặc biệt, 9, cho phép bạn sử dụng các lớp Tailwind trong CSS tiêu chuẩn. Điều này có nghĩa là thay vì sử dụng các lớp tiện ích mà Tailwind cung cấp trong mẫu của bạn, bạn có thể tạo các lớp tùy chỉnh (như 0 hoặc 1) trong khi vẫn hưởng lợi từ các tính năng khác của Tailwind. Thậm chí tốt hơn, bằng cách sử dụng plugin như PostCSS Nested, bạn có thể nhận CSS lồng nhau, giống như trong Sass hoặc các bộ tiền xử lý CSS khácXét thành phần sau 5Đâ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 9 để xây dựng lớp 1 tùy chỉnh 8Tố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 9 (Adam Wathan, người tạo ra Tailwind, đã nói rằng anh ấy hầu như không bao giờ sử dụng 9). Điều đó không làm cho điều này trở nên kém giá trị hơn chút nào và là một cách hoàn hảo để cân bằng các điểm mạnh của Tailwind với các phương pháp viết CSS truyền thống như BEM. Nếu bạn ngần ngại dùng thử Tailwind vì số lượng lớn các lớp học, hãy dùng thử và xem bạn thích nó như thế nàoVà 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 Làm cách nào để nhập CSS Tailwind trong vue?Cài đặt Tailwind CSS bằng Vite . Tạo dự án của bạn. Bắt đầu bằng cách tạo một dự án Vite mới nếu bạn chưa thiết lập. . Cài đặt Tailwind CSS. . Định cấu hình đường dẫn mẫu của bạn. . Thêm lệnh Tailwind vào CSS của bạn. . Bắt đầu quá trình xây dựng của bạn. . Bắt đầu sử dụng Tailwind trong dự án của bạn Làm cách nào để thêm Tailwind CSS vào vue 3?Để có thể sử dụng TailwindCSS trong dự án của mình, chúng tôi sẽ cần thêm một số dòng vào tệp CSS được tải trong ứng dụng của chúng tôi. Mở tệp CSS của bạn và thêm 3 dòng sau. @tailwind base; . Now you can start utilizing Tailwind to style your Vue 3 application.
Bạn có thể thêm CSS tùy chỉnh vào Tailwind không?Sử dụng công cụ sửa đổi với CSS tùy chỉnh. Mọi kiểu tùy chỉnh mà bạn thêm vào Tailwind bằng @layer sẽ tự động hỗ trợ cú pháp công cụ sửa đổi của Tailwind để xử lý những thứ như trạng thái di chuột, điểm ngắt phản hồi, chế độ tối, v.v. . Tìm hiểu thêm về cách hoạt động của các công cụ sửa đổi này trong tài liệu Hover, Focus và Other States.
Tôi có nên sử dụng Tailwind với Vue không?Không giống như Bootstrap cung cấp các thành phần dựng sẵn, Tailwind CSS cung cấp các lớp tiện ích để xây dựng các thành phần của riêng bạn, hoàn toàn đáp ứng và cho phép nhà phát triển tạo chính xác những gì họ cần. Tailwind và Vue tích hợp cùng nhau chỉ bằng một vài gói, khiến nó trở thành tùy chọn phù hợp cho bất kỳ nhà phát triển nào . |