Băng chuyền CSS Tailwind không hoạt động

Tailwind Elements là plugin mở rộng chức năng của thư viện với nhiều thành phần tương tác

Trong một số thành phần động (như danh sách thả xuống hoặc phương thức), chúng tôi thêm các biểu tượng Font Awesome và JavaScript tùy chỉnh. Tuy nhiên, chúng không yêu cầu bất kỳ cài đặt bổ sung nào, tất cả mã cần thiết luôn được bao gồm trong ví dụ và được sao chép vào bất kỳ dự án Tailwind nào - nó sẽ hoạt động

Các thành phần Bootstrap được tạo lại bằng Tailwind CSS, nhưng với thiết kế đẹp hơn và nhiều chức năng hơn

• Hơn 500 thành phần giao diện người dùng
• Siêu đơn giản, cài đặt 1 phút
• Lưu trữ miễn phí
• Giấy phép MIT - miễn phí cho mục đích sử dụng cá nhân và thương mại

Thành phầnThiết kế khối (phần)Mẫu (sắp có)Lưu trữ miễn phíPlaygroundTrình tạo kéo và thả (sắp có)Thành phần

Bộ sưu tập các thành phần phổ biến, miễn phí như phương thức, danh sách thả xuống, băng chuyền, cửa sổ bật lên, thẻ, biểu đồ và nhiều thành phần khác

DatepickerDropdownModalChartsTooltipsCarouselAccordionTabsStepperAccordionTabsStepper

khối thiết kế

Các khối trang đích đáp ứng được tạo bằng Tailwind CSS. Rất nhiều ví dụ về khối thiết kế như Nhóm, dịch vụ, dự án, câu hỏi thường gặp, v.v.

HeroPricingKêu gọi hành độngTính năngLiên hệTin tức/blogLời chứng thực của TeamStatsBản tin liên hệDự án

Hướng dẫn bắt đầu nhanh

NPM

1. Trước khi bắt đầu dự án, hãy đảm bảo cài đặt Node. js (LTS) và TailwindCSS

2. Chạy lệnh sau để cài đặt gói qua NPM

npm install tw-elements

1. Tailwind Elements là một plugin và nên được đưa vào bên trong tailwind. cấu hình. tập tin js. Bạn cũng nên mở rộng mảng nội dung bằng tệp js tải các lớp thành phần động

module.exports = {
  content: ['./src/**/*.{html,js}', './node_modules/tw-elements/dist/js/**/*.js'],
  plugins: [require('tw-elements/dist/plugin')],
};

1. Các thành phần động sẽ hoạt động sau khi thêm tệp js

Ngoài ra, bạn có thể nhập nó theo cách sau (phiên bản gói)

import 'tw-elements';

MDB GO / CLI

Tạo, triển khai và lưu trữ mọi thứ bằng một lệnh duy nhất

1. Để bắt đầu sử dụng MDB GO/CLI, hãy cài đặt nó bằng một lệnh

npm install -g mdb-cli

1. Đăng nhập vào CLI bằng tài khoản MDB của bạn

mdb login

1. Khởi tạo một dự án và chọn Tailwind Elements từ danh sách

mdb init

1. Cài đặt các phụ thuộc (bên trong thư mục dự án)

npm install

1. Chạy ứng dụng

________số 8

1. Xuất bản khi bạn đã sẵn sàng

mdb publish

CDN

Bạn có thể dễ dàng kiểm tra Tailwind Elements bằng cách thêm tập lệnh CDN vào mẫu HTML cổ điển của mình mà không cần cài đặt bất kỳ gói nào

Làm cách nào để tạo băng chuyền bằng Tailwind CSS?

Tailwind CSS là giao diện người dùng hay chương trình phụ trợ?

Thành phần tailwind là gì?