Flowbite React: Xây dựng Ứng dụng React với Các Thành phần Tailwind CSS

🚧 flowbite-react (chưa phát hành) 🚧

Xây dựng trang web nhanh hơn với các thành phần trên nền React và Tailwind CSS

Nội dung chính

`flowbite-react` là một bộ sưu tập các thành phần giao diện người dùng mã nguồn mở, được xây dựng trong React, với các lớp tiện ích từ Tailwind CSS mà bạn có thể sử dụng làm điểm khởi đầu cho giao diện người dùng và trang web.

Tài liệu

Tài liệu cho flowbite-react chưa hoàn thiện.

Nếu bạn muốn duyệt qua các thành phần, hãy truy cập flowbite-react.com.

Nếu bạn muốn tìm hiểu thêm về Flowbite, hãy truy cập Flowbite docs.

Bắt đầu

Học cách bắt đầu với Flowbite React và bắt đầu tận dụng các thành phần React tương tác kết hợp với Flowbite và Tailwind CSS.

Bạn cần phải quen thuộc với Node.js và npm, và đã cài đặt npm. Bạn nên thoải mái trong việc cài đặt gói với npm, và có kinh nghiệm trong việc tạo ứng dụng web với React và Tailwind CSS sẽ rất hữu ích.

Cài đặt Tailwind CSS

Cài đặt Tailwind CSS:

npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p

Chỉ định Tailwind CSS cho các tệp bạn có className=".." trong:

module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}' /* src folder, for example */],
  theme: {
    extend: {},
  },
  plugins: [],
};

Thêm Tailwind CSS vào một tệp CSS:

@tailwind base;
@tailwind components;
@tailwind utilities;

Cài đặt Flowbite React

. Cài đặt Flowbite và Flowbite React:

npm i flowbite flowbite-react # or yarn add flowbite flowbite-react

. Thêm plugin Flowbite vào tailwind.config.js, và bao gồm nội dung từ flowbite-react:

module.exports = {
  content: [
    ...,
    'node_modules/flowbite-react/**/*.{js,jsx,ts,tsx}'
  ],
  plugins: [..., require('flowbite/plugin')],
  ...
};

Thử nghiệm

Cách bạn sử dụng Flowbite React phụ thuộc vào cài đặt dự án của bạn. Nói chung, bạn có thể chỉ cần nhập các thành phần bạn muốn sử dụng từ flowbite-react và sử dụng chúng trong tệp React .jsx:

import { Button } from 'flowbite-react';

export default function MyPage() {
  return (
    <div>
      <Button>Click me</Button>
    </div>
  );
}

Các bước tiếp theo

Next.js

Nếu bạn đang sử dụng Next.js, bạn có thể tuân theo hướng dẫn cài đặt Next.js, bao gồm Next.js starter project với Flowbite React đã được cài đặt sẵn.

Chế độ tối

Nếu bạn muốn thêm công tắc chế độ tối vào ứng dụng của bạn, bạn có thể tuân theo hướng dẫn chế độ tối.

Tùy chỉnh

Nếu bạn muốn tùy chỉnh thành phần Flowbite React, bạn có thể tuân theo hướng dẫn chủ đề.

Đóng góp

Nếu bạn muốn đóng góp cho Flowbite React, bạn có thể tuân theo hướng dẫn đóng góp.

Các thành phần

Lưu ý rằng một số thành phần trong thư viện Flowbite gốc hiện chưa có sẵn trong Flowbite React.

Accordion	Alert	Avatar

Badge	Breadcrumb	Button

Nhóm nút	Thẻ	Carousel

Dropdown	Chân trang	Biểu mẫu

Nhóm danh sách	Modal	Thanh điều hướng

Chân trang	Thanh tiến trình	Đánh giá

Thanh bên	Spinner	Bảng

Thẻ	Dòng thời gian	Toast

Tooltip