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

Để 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-forms

2. 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óa

Xem 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ày

module.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ụ sau

Trong 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ày

Lư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ày

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

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ày

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

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 Tailwind

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

npm install --save-dev @nuxtjs/tailwindcss postcss@latest
2

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

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ạn

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

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

  1. Cài đặt Tailwind, PostCSS và Autoprefixer
  2. Định cấu hình Tailwind và PostCSS
  3. 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ều

Ngoà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ác

Xé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}
  }
}
8

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

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ào

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

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 .