Làm cách nào để thêm Tailwind CSS vào vue 3?

Tailwind CSS là một trong những thư viện tiện ích mới nhất và thú vị nhất trong khối, đồng thời thư viện này cho phép bạn xây dựng các thành phần giao diện người dùng một cách dễ dàng. Dưới đây là hướng dẫn nhanh về cách thiết lập Tailwind trong dự án Vue 3 của bạn

Tailwind CSS không phải là thư viện CSS ưu tiên tiện ích đầu tiên, nhưng hiện tại có thể nói rằng nó đang trở nên phổ biến nhất đối với các nhà phát triển tại thời điểm hiện tại

Việc cài đặt Tailwind khác nhau tùy thuộc vào khuôn khổ dự án của bạn (React, Nuxt. js, vue. js, tiếp theo. js, Gatsby, Laravel) làm cho nó có sẵn trên một loạt các khung mà tôi nghĩ thậm chí còn làm cho nó trở nên tuyệt vời hơn

Đây là hướng dẫn nhanh để chỉ ra cách cấu hình tailwind trong ứng dụng Vue 3 mới

Giả sử npm đã được cài đặt, hãy đảm bảo rằng bạn cũng đã cài đặt vue cli

npm install -g @vue/cli

Tiếp theo, tạo một dự án Vue mới bằng lệnh vue cli

vue create vue3-tailwind

Điều hướng đến thư mục dự án

vue3-tailwind

Thiết lập Tailwind CSS trong Vue 3

Tiếp theo, chúng ta cần cài đặt tailwind và các phần phụ thuộc của nó (PostCSS và autoprefixer)

npm install -D [email protected] [email protected] [email protected]

Hoặc sử dụng sợi

yarn add --dev [email protected] [email protected] [email protected]

Ghi chú. nếu bạn gặp phải lỗi này

Lỗi. Plugin PostCSS tailwindcss yêu cầu PostCSS 8

Bạn sẽ cần cài đặt một bản dựng tailwind khác hỗ trợ PostCSS 7

npm uninstall tailwindcss postcss autoprefixer
npm install -D [email protected]:@tailwindcss/postcss7-compat @tailwindcss/postcss7-compat [email protected]^7 [email protected]^9

Tạo Tailwind và đăng tệp cấu hình CSS

npx tailwindcss init -p

đọc thêm. Cách cài đặt Vue 3 trong Laravel 8 từ đầu

Điều này sẽ tạo hai tệp trong thư mục gốc của bạn.

vue create vue3-tailwind

4 và 

vue create vue3-tailwind

5. Tệp cấu hình Tailwind là nơi bạn thêm tùy chỉnh và chủ đề cho ứng dụng của mình. Đây cũng là nơi bạn cho Tailwind biết đường dẫn để tìm kiếm các trang và thành phần của bạn. Nó trông giống như thế này

// tailwind.config.js
module.exports = {
  purge: [],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}

Chúng tôi sẽ không giải thích từng thuộc tính đó;

vue create vue3-tailwind

0

Tiếp theo, tạo một thư mục có tên "style" và trong thư mục đó, tạo một tệp CSS mục nhập (ứng dụng. css)

vue create vue3-tailwind

1

Chúng tôi sẽ nhập các kiểu của Tailwind bằng cách sử dụng 

vue create vue3-tailwind

6 trong tệp CSS mục nhập của chúng tôi

vue create vue3-tailwind

0

Cuối cùng, nhập tệp CSS mục nhập của bạn vào tệp Javascript mục nhập của bạn (chính. js)

vue create vue3-tailwind

1

Nâng cấp máy chủ của bạn và bắt đầu sử dụng ưu điểm của Tailwind trong ứng dụng Vue 3 của bạn. Hãy thử cập nhật ứng dụng. thành phần vue như vậy

vue create vue3-tailwind

2

Ở bước cuối cùng, hãy chạy lệnh sau để bắt đầu ứng dụng

vue create vue3-tailwind

3

Bạn có thể tìm thấy tất cả các lớp và tùy chọn của Tailwind trong tài liệu chính thức

Cảm ơn bạn đã đọc bài viết này

đọc thêm. Cách tối ưu hóa hiệu suất của Laravel

Nếu bạn muốn quản lý Máy chủ VPS / VM của mình mà không cần chạm vào dòng lệnh, hãy xem liên kết này. ServerAvatar cho phép bạn thiết lập nhanh các trang web WordPress hoặc PHP tùy chỉnh trên VPS / VM chỉ trong vài phút. Bạn có thể lưu trữ nhiều trang web trên một VPS / VM, định cấu hình chứng chỉ SSL và theo dõi tình trạng của máy chủ mà không cần chạm vào giao diện dòng lệnh

Nếu bạn có bất kỳ thắc mắc hoặc nghi ngờ nào về chủ đề này, vui lòng liên hệ với chúng tôi. Chúng tôi sẽ cố gắng liên lạc với bạn

Làm cách nào để cài đặt Tailwind CSS trong Vue 3?

Tailwind có hoạt động với vue3 không?

Tôi có nên sử dụng Tailwind với Vue không?

Tailwind CSS có tốt cho các dự án lớn không?