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
Để 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/forms
Chủ đề mặc định của thư viện này phụ thuộc vào plugin
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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óa
Cũ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ư
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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,
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
3 của bạn có thể trông như thế nàymodule.exports = {
variants: {
extend: {
opacity: ['disabled'],
cursor: ['disabled'],
},
},
plugins: [
require['@tailwindcss/forms'],
],
};
3. Định cấu hình Vue để sử dụng vue-tailwind
3. 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
{component-name}: {
component: {importedComponentObject},
props: {
{propToOverride}: {newDefaultValue}
{propToOverride2}: {newDefaultValue2}
}
}
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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áp
Cú 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ần
Sử 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
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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 CLI
Cà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
- Khi viết bài này, plugin CLI đã không được cập nhật trong một vài tháng. Nó hiện đang cài đặt Tailwind phiên bản 2. 0. 2 [mới nhất hiện tại là 2. 2. 4]. Điều này đủ dễ dàng để điều chỉnh thủ công, nhưng bạn cần lưu ý về nó để tự mình thực hiện thay đổi
- Plugin cũng đang cung cấp bản dựng tương thích PostCSS 7. Đối với hầu hết các phần, điều này không tạo ra sự khác biệt lớn. Các lưu ý rằng bản dựng tương thích giống hệt với bản dựng chính, vì vậy bạn sẽ không bỏ lỡ bất kỳ tính năng nào. Hiện tại, điều này sẽ ổn, nhưng có thể dẫn đến sự cố sau này nếu bạn muốn sử dụng plugin PostCSS 8 [hoặc nếu Tailwind quyết định ngừng cung cấp các bản dựng tương thích ngược]. Nếu bạn đang sử dụng Vue 3. 0. 6 trở lên, bạn sẽ có thể nâng cấp lên bản dựng chính. Tuy nhiên, bạn nên đảm bảo cập nhật tất cả các plugin PostCSS của mình lên các bản dựng chính mới nhất, không chỉ Tailwind
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
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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
- Gió cùng chiều. cấu hình. js
- postcss. cấu hình. js
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
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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à npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
3 của bạn________số 8
Cuối cùng, chạy
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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 npm install -D tailwindcss@latest postcss@latest autoprefixer@latest
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 Tailwind
Mộ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ận
Chú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
- Cài đặt Tailwind, PostCSS và Autoprefixer
- Định cấu hình Tailwind và PostCSS
- Nhập tệp CSS bao gồm các lớp Tailwind vào ứng dụng của bạn
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 ích
Khi 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 [
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
7, npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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,
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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ư export default {
buildModules: ['@nuxtjs/tailwindcss']
}
0 hoặc export default {
buildModules: ['@nuxtjs/tailwindcss']
}
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
{component-name}: {
component: {importedComponentObject},
props: {
{propToOverride}: {newDefaultValue}
{propToOverride2}: {newDefaultValue2}
}
}
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
9 để xây dựng lớp export default {
buildModules: ['@nuxtjs/tailwindcss']
}
1 tùy chỉnh{component-name}: {
component: {importedComponentObject},
props: {
{propToOverride}: {newDefaultValue}
{propToOverride2}: {newDefaultValue2}
}
}
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
npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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 npm install --save-dev @nuxtjs/tailwindcss postcss@latest
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