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
0Tiế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
1Chú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ôivue create vue3-tailwind
0Cuố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
1Nâ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
3Bạ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