F

FlowBite - Tailwind CSS 组件库

2025-05-28

FlowBite - Tailwind CSS 组件库

什么是 FlowBite？

FlowBite 是一个开源的 UI 元素集合，基于实用优先的 CSS 框架 Tailwind，由 Themesberg 设计和编码，可在 Figma 和 Web 组件中使用。

为什么要使用 FlowBite？

与其他框架相比，Tailwind CSS 的缺点之一是它没有一套基础组件。这使得快速创建用户界面原型变得非常困难。

FlowBite - Tailwind CSS 组件库

这就是 FlowBite 发挥作用的地方：它基本上是 Tailwind CSS，但您可以获得通常使用经典 CSS 框架（如 Bootstrap 或 Bulma）获得的所有组件。

FlowBite 至少有 15 种类型的组件，包括按钮、警报、面包屑导航、分页和导航栏。FlowBite 还包含一些自定义 JavaScript，可实现交互式组件，例如下拉菜单、模态框、工具提示等等。

如何开始？

开始使用 FlowBite 相当容易：您需要做的就是按照快速入门指南或按照构建工具指南设置高级工作流程。

通过 CDN 包含

开始使用 FlowBite 的最快方法是通过 CDN 将 CSS 和 JavaScript 包含到您的项目中。

标签内需要以下最小化样式表head：

<link rel="stylesheet" href="https://unpkg.com/flowbite@latest/dist/flowbite.min.css" />
Enter fullscreen mode Exit fullscreen mode

并在元素结束前包含以下javascript文件body：

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.js"></script>
Enter fullscreen mode Exit fullscreen mode

重要提示：不推荐使用 FlowBite，因为您将无法清除不必要的 CSS。请查看构建工具，以正确设置 FlowBite 以用于开发和生产代码。

通过 NPM 请求

您还可以通过运行以下命令使用 NPM 将 FlowBite 作为依赖项：

npm i flowbite
Enter fullscreen mode Exit fullscreen mode

安装

按照以下步骤使用 FlowBite 和 Tailwind CSS 进行配置、开发和构建：

  1. 确保您的机器上安装了Node.js和 NPM
  2. 使用以下方式创建新文件夹mkdir flowbite-project
  3. 使用以下方式移动到新创建的文件夹中cd flowbite-project
  4. 运行npm init以创建package.json文件并按照 CLI 说明进行操作
  5. 运行以下代码来安装 Tailwind CSS：
npm install -D tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/forms@latest
Enter fullscreen mode Exit fullscreen mode
  1. 创建一个新文件touch postcss.config.js并插入以下代码：
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
Enter fullscreen mode Exit fullscreen mode
  1. 通过运行以下命令创建 Tailwind 配置文件：
npx tailwindcss init
Enter fullscreen mode Exit fullscreen mode

然后在tailwind.config.js文件中添加以下代码：

module.exports = {
  purge: {
    enabled: true,
    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
    fontFamily: {
      'sans': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'body': ['Inter', 'ui-sans-serif', 'system-ui', '-apple-system', 'system-ui', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'Noto Sans', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'],
      'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
    },
    colors: {
      white: "#ffffff",
      black: "#000000",
      gray: {
        50: '#F9FAFB',
        100: '#F3F4F6',
        200: '#E5E7EB',
        300: '#D1D5DB',
        400: '#9CA3AF',
        500: '#6B7280',
        600: '#4B5563',
        700: '#374151',
        800: '#1F2937',
        900: '#111827'
      },
      red: {
        50: '#FDF2F2',
        100: '#FDE8E8',
        200: '#FBD5D5',
        300: '#F8B4B4',
        400: '#F98080',
        500: '#F05252',
        600: '#E02424',
        700: '#C81E1E',
        800: '#9B1C1C',
        900: '#771D1D'
      },
      orange: {
        50: '#FFF8F1',
        100: '#FEECDC',
        200: '#FCD9BD',
        300: '#FDBA8C',
        400: '#FF8A4C',
        500: '#FF5A1F',
        600: '#D03801',
        700: '#B43403',
        800: '#8A2C0D',
        900: '#771D1D'
      },
      yellow: {
        50: '#FDFDEA',
        100: '#FDF6B2',
        200: '#FCE96A',
        300: '#FACA15',
        400: '#E3A008',
        500: '#C27803',
        600: '#9F580A',
        700: '#8E4B10',
        800: '#723B13',
        900: '#633112'
      },
      green: {
        50: '#F3FAF7',
        100: '#DEF7EC',
        200: '#BCF0DA',
        300: '#84E1BC',
        400: '#31C48D',
        500: '#0E9F6E',
        600: '#057A55',
        700: '#046C4E',
        800: '#03543F',
        900: '#014737'
      },
      teal: {
        50: '#EDFAFA',
        100: '#D5F5F6',
        200: '#AFECEF',
        300: '#7EDCE2',
        400: '#16BDCA',
        500: '#0694A2',
        600: '#047481',
        700: '#036672',
        800: '#05505C',
        900: '#014451'
      },
      blue: {
        50: '#EBF5FF',
        100: '#E1EFFE',
        200: '#C3DDFD',
        300: '#A4CAFE',
        400: '#76A9FA',
        500: '#3F83F8',
        600: '#1C64F2',
        700: '#1A56DB',
        800: '#1E429F',
        900: '#233876'
      },
      indigo: {
        50: '#F0F5FF',
        100: '#E5EDFF',
        200: '#CDDBFE',
        300: '#B4C6FC',
        400: '#8DA2FB',
        500: '#6875F5',
        600: '#5850EC',
        700: '#5145CD',
        800: '#42389D',
        900: '#362F78'
      },
      purple: {
        50: '#F6F5FF',
        100: '#EDEBFE',
        200: '#DCD7FE',
        300: '#CABFFD',
        400: '#AC94FA',
        500: '#9061F9',
        600: '#7E3AF2',
        700: '#6C2BD9',
        800: '#5521B5',
        900: '#4A1D96'
      },
      pink: {
        50: '#FDF2F8',
        100: '#FCE8F3',
        200: '#FAD1E8',
        300: '#F8B4D9',
        400: '#F17EB8',
        500: '#E74694',
        600: '#D61F69',
        700: '#BF125D',
        800: '#99154B',
        900: '#751A3D'
      }
    }
  },
  variants: {
    extend: {
      fill: ['hover', 'focus'],
      zIndex: ['hover', 'active'],
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
  ],
}
Enter fullscreen mode Exit fullscreen mode
  1. 通过创建一个新的 CSS 文件将 Tailwind 包含在您的 CSS 中，并使用@directive注入主要样式：
/* ./styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
Enter fullscreen mode Exit fullscreen mode
  1. 使用 Tailwind CLI 工具运行以下命令编译 CSS：
npx tailwindcss -o flowbite.css
Enter fullscreen mode Exit fullscreen mode
  1. 将新创建的flowbite.css文件包含到您的 HTML 模板中，然后开始使用 FlowBite 和 Tailwind CSS 进行开发。
  2. 使用 ES6：确保您还创建了一个名为 的 JavaScript 文件，flowbite.js以使下拉菜单和模式等元素能够工作，并添加以下代码：
import tippy from 'tippy.js';
import 'tippy.js/dist/tippy.css'; // optional for styling
import 'tippy.js/animations/scale.css';
import { createPopper } from '@popperjs/core';

function toggleCollapse(collapseId) {
    const menu = document.getElementById(collapseId);
    if (menu.classList.contains("hidden")) {
        menu.classList.remove("hidden");
    } else {
        menu.classList.add("hidden");
    }
}
window.toggleCollapse = toggleCollapse;

function toggleDropdown(event, dropdownID) {
    let element = event.target;
    while (element.nodeName !== "BUTTON") {
        element = element.parentNode;
    }
    createPopper(element, document.getElementById(dropdownID), {
        placement: 'bottom-start',
        modifiers: [
            {
                name: 'offset',
                options: {
                    offset: [0, 10],
                },
            },
        ]
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
}
window.toggleDropdown = toggleDropdown;

function toggleModal(modalID) {
    document.getElementById(modalID).classList.toggle("hidden");
    document.getElementById(modalID + "-backdrop").classList.toggle("hidden");
    document.getElementById(modalID).classList.toggle("flex");
    document.getElementById(modalID + "-backdrop").classList.toggle("flex");
}

window.toggleModal = toggleModal;

document.addEventListener("DOMContentLoaded", function () {
    tippy('[data-tippy-content]');
});
Enter fullscreen mode Exit fullscreen mode

或者，您也可以只使用已编译 JS 的 CDN 链接：

<script src="https://unpkg.com/flowbite@latest/dist/flowbite.js"></script>
Enter fullscreen mode Exit fullscreen mode

生产环境构建

如果您想要构建生产环境，请使用以下命令并删除任何未使用的 CSS：

NODE_ENV=production npx tailwindcss -o flowbite.css
Enter fullscreen mode Exit fullscreen mode

Figma 设计文件

如果您想使用 Figma 设计文件，您可以复制Figma 社区上的免费版本，或者使用FlowBite Pro升级以获得额外的应用程序 UI、营销 UI 以及电子商务部分和页面。

许可

FlowBite 的组件库根据MIT 许可证开源。

但是，请注意 FlowBite 的专业版受FlowBite 的EULA（最终用户许可协议）约束。

作者

FlowBite 的作者是Zoltán Szőgyényi（开发人员）和Robert Tanislav （设计师），他们也是Themesberg的联合创始人。

文章来源：https://dev.to/themesberg/flowbite-tailwind-css-components-library-1g5o
Devto 翻译
PREV
10+ 热门动画 UI 组件库🔥
NEXT
构建 Tailwind CSS 警报组件