Quickstart

Learn how to get started with the free and open-source Flowbite Mithril UI component library based on the utility classes from Tailwind CSS

Getting started #

You can install Flowbite Mithril to any Node.js project.

You’ll need to be familiar with Node.js, and have it installed.

Setup Tailwind CSS #

Install Tailwind CSS:


npm i autoprefixer postcss tailwindcss
npx tailwindcss init -p

Point Tailwind CSS to files you have class="..." in:


module.exports = {
  content: ["./src/**/*.js"],
  theme: {
    extend: {},
  },
  plugins: [],
};

Add Tailwind CSS to a CSS file:


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

Install Flowbite Mithril #

Install Flowbite and Flowbite Mithril:


npm i -D flowbite flowbite-mithril

Add the Flowbite plugin to tailwind.config.js, and include content from flowbite-mithril:


module.exports = {
  content: ["./node_modules/flowbite-mithril/**/*.js"],
  plugins: [require("flowbite/plugin")],
};

Try it out #

How you use Flowbite Mithril depends on your project setup. In general, you can just import the components you want to use from flowbite-mithril and use them in a Mithril .js file:


import { Button } from "flowbite-mithril";

const Component = {
  view: () =>
    m(Button, "Click me"),
};