Flowbite - Build tools

Follow the steps below to configure, develop and build with FlowBite and Tailwind CSS

FlowBite is a collection of UI elements based on Tailwind CSS and uses a custom configuration file to extend the default utilities. This means that developing with FlowBite is almost the same as working with Tailwind CSS.

Installation

Follow these steps to configure, develop and build with FlowBite and Tailwind CSS:

  1. Make sure that you have Node.js and NPM installed on your machine
  2. Create a new folder with mkdir flowbite-project
  3. Move inside the newly created folder with cd flowbite-project
  4. Run npm init to create a package.json file and follow the CLI instructions
  5. Run the following code to install Tailwind CSS:
  1. Create a new file with touch postcss.config.js and insert the following code:
// postcss.config.js
module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
  1. Create a Tailwind configuration file by running:
npx tailwindcss init

And then add the following code inside the tailwind.config.js file:

module.exports = {
  purge: {
    // enabled: process.env.NODE_ENV === "production" ? true : false,
    enabled: true,
    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html"],
    options: {
      // safelist classes generated by plugins like the datepicker or modal
      safelist: [
        'w-64',
        'w-1/2',
        'rounded-l-lg',
        'rounded-r-lg',
        'bg-gray-200',
        'grid-cols-4',
        'grid-cols-7',
        'h-6',
        'leading-6',
        'h-9',
        'leading-9',
        'shadow-lg',
        'bg-opacity-50'
      ],
    }
  },
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {
      maxWidth: {
        '2xs': '16rem',
      }
    },
    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: {
      transparent: 'transparent',
      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'),
  ],
}
  1. Include Tailwind in your CSS by creating a new CSS file and use the @directive to inject the main styles:
/* ./styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;
  1. Compile the CSS using the Tailwind CLI tool by running:
npx tailwindcss -o flowbite.css
  1. Include the newly created flowbite.css file into your HTML template and start developing with FlowBite and Tailwind CSS.
  2. Using ES6: make sure that you also create a JavaScript file called flowbite.js to make elements such as dropdowns and modals work and add the following code:
import './flowbite.css';
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';
import Datepicker from '@themesberg/tailwind-datepicker/Datepicker';
import DateRangePicker from '@themesberg/tailwind-datepicker/DateRangePicker';

// Toggle target elements using [data-collapse-toggle]
document.querySelectorAll('[data-collapse-toggle]').forEach(function (collapseToggleEl) {
    var collapseId = collapseToggleEl.getAttribute('data-collapse-toggle');
    var collapseEl = document.getElementById(collapseId);

    collapseToggleEl.addEventListener('click', function() {
        if (collapseEl.classList.contains("hidden")) {
            collapseEl.classList.remove("hidden");
        } else {
            collapseEl.classList.add("hidden");
        }
    });
});

// Toggle dropdown elements using [data-dropdown-toggle]
document.querySelectorAll('[data-dropdown-toggle]').forEach(function (dropdownToggleEl) {
    var dropdownMenuId = dropdownToggleEl.getAttribute('data-dropdown-toggle');
    var dropdownMenuEl = document.getElementById(dropdownMenuId);

    dropdownToggleEl.addEventListener('click', function (event) {
        var element = event.target;
        while (element.nodeName !== "BUTTON") {
            element = element.parentNode;
        }
        createPopper(element, dropdownMenuEl, {
            placement: 'bottom-start',
            modifiers: [
                {
                    name: 'offset',
                    options: {
                        offset: [0, 10],
                    },
                },
            ]
        });

        // toggle when click on the button
        dropdownMenuEl.classList.toggle("hidden");
        dropdownMenuEl.classList.toggle("block");

        function handleDropdownOutsideClick(event) {
            var targetElement = event.target; // clicked element
            if (targetElement !== dropdownMenuEl && targetElement !== dropdownToggleEl && !dropdownToggleEl.contains(targetElement)) {
                dropdownMenuEl.classList.add("hidden");
                dropdownMenuEl.classList.remove("block");
                document.body.removeEventListener('click', handleDropdownOutsideClick, true);
            }
        }

        // hide popper when clicking outside the element
        document.body.addEventListener('click', handleDropdownOutsideClick, true);
    });
});

document.querySelectorAll('[data-modal-toggle]').forEach(function (modalToggleEl) {
    var modalId = modalToggleEl.getAttribute('data-modal-toggle');
    var modalEl = document.getElementById(modalId);

    modalToggleEl.addEventListener('click', function() {
        modalEl.classList.toggle("hidden");
        document.getElementById(modalId + "-backdrop").classList.toggle("hidden");
        modalEl.classList.toggle("flex");
        document.getElementById(modalId + "-backdrop").classList.toggle("flex");

        function handleModalOutsideClick(event) {
            var targetElement = event.target; // clicked element
            if (targetElement !== modalEl && !modalEl.contains(targetElement)) {
                modalEl.classList.add("hidden");
                document.getElementById(modalId + "-backdrop").classList.add("hidden");
                modalEl.classList.remove("flex");
                document.getElementById(modalId + "-backdrop").classList.remove("flex");
                document.body.removeEventListener('click', handleModalOutsideClick, true);
            }
        }

        // hide popper when clicking outside the element
        document.body.addEventListener('click', handleModalOutsideClick, true);
    });
});

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

const getDatepickerOptions = (datepickerEl) => {

    const buttons = datepickerEl.hasAttribute('datepicker-buttons');
    const autohide = datepickerEl.hasAttribute('datepicker-autohide');
    const format = datepickerEl.hasAttribute('datepicker-format');
    const orientation = datepickerEl.hasAttribute('datepicker-orientation');
    const title = datepickerEl.hasAttribute('datepicker-title');

    let options = {};
    if (buttons) {
        options.todayBtn = true;
        options.clearBtn = true;
    }
    if (autohide) {
        options.autohide = true;
    }
    if (format) {
        options.format = datepickerEl.getAttribute('datepicker-format');
    }
    if (orientation) {
        options.orientation = datepickerEl.getAttribute('datepicker-orientation');
    }
    if (title) {
        options.title = datepickerEl.getAttribute('datepicker-title');
    }

    return options;
}

document.querySelectorAll('[datepicker]').forEach(function (datepickerEl) {
    new Datepicker(datepickerEl, getDatepickerOptions(datepickerEl));
});

document.querySelectorAll('[inline-datepicker]').forEach(function (datepickerEl) {
    new Datepicker(datepickerEl, getDatepickerOptions(datepickerEl));
});

document.querySelectorAll('[date-rangepicker]').forEach(function (datepickerEl) {
    new DateRangePicker(datepickerEl, getDatepickerOptions(datepickerEl));
});

Alternatively, you can also just use a CDN link with the compiled JS:

<script src="https://unpkg.com/@themesberg/[email protected]/dist/flowbite.bundle.js"></script>

Building for production

If you want to build for production use the following command and remove any unused CSS:

NODE_ENV=production npx tailwindcss -o flowbite.css

Congratulations! You can now get started using the components included in this UI library.

Copied code to clipboard!