CSS: Flowbite

Flowbite là gì?

Flowbite là một thư viện UI components được xây dựng trên nền Tailwind CSS, giúp bạn dễ dàng tạo các thành phần UI như button, modal, dropdown... mà không cần viết nhiều CSS thủ công. Flowbite hỗ trợ tốt với React.

Flowbite cung cấp sẵn các thành phần như:

• Nút bấm (Button)
• Hộp thoại (Modal)
• Accordion
• Thanh điều hướng (Navbar)
• Tab, Tooltip, Dropdown...
• Biểu mẫu (Form), Bảng dữ liệu (Table)... 

Flowbite giống jQuery UI thời xưa?

Nếu bạn từng dùng jQuery UI để bổ sung component cho jQuery (jquery kết hợp với CSS), thì Flowbite chính là phiên bản hiện đại tương tự cho Tailwind CSS. 

Setup

Đầu tiên, chúng ta tạo project ReactJs sử dụng Vite

npm create vite@latest
Need to install the following packages:
create-vite@6.5.0
Ok to proceed? (y) y


> npx
> create-vite

│
◇  Project name:
│  react-getting-started
│
◇  Select a framework:
│  React
│
◇  Select a variant:
│  TypeScript + SWC
│
◇  Scaffolding project in D:\Practices\ReactJs\react-getting-started...
│
└  Done. Now run:

cd react-getting-started
npm install
npm run dev

Cài đặt Tailwind

npm install -D tailwindcss@3
npx tailwindcss init -p

Cài đặt Flowbite và Flowbite React

npm install flowbite flowbite-react

Cấu hình tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{js,ts,jsx,tsx}",
    "./node_modules/flowbite-react/**/*.js",
  ],
  theme: {
    extend: {},
  },
  plugins: [
    require('flowbite/plugin')({
            charts: true,
        })
    ],
}

Sửa src/index.css

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

Tạo mới 1 component và thử dùng Flowbite

const FlowbiteAccordion  = () => { 

    return (
        <div className="p-6">
            <button className="bg-blue-500 text-black px-4 py-2 rounded-lg hover:bg-blue-600">
                Flowbite
            </button>
        </div>
    );
};

export default FlowbiteAccordion ;

Tham khảo

Integrating Tailwind CSS with Flowbite in Your React Project: A Step-by-Step Guide