Files

Sqrcz 7948a04159 Feature/paragraph updates (#257 )

* useMergeClasses accepted types updated - to match twMerge

* fwb-paragraph updated to accept user classes

* docs updated to fix missing tailwind classes

* fwb-p documentation updated

* tailwindcss class wrapper props removed

* Update docs/components/typography/p/FwbPExampleCustom.vue

* Update docs/components/typography/p/FwbPExampleCustom.vue

---------

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

2023-12-18 10:57:06 +03:00

1.5 KiB

Raw Permalink Blame History

Flowbite Vue - Quickstart

Get started with Flowbite by including it into your project using NPM

Flowbite is a library of components built on top of the utility-classes from Tailwind CSS and it also includes a JavaScript file that makes interactive elements works, such as modals, dropdowns, and more. Learn how to get started by following this quickstart guide.

Require via NPM

Make sure that you have Node.js and Tailwind CSS installed.

Install flowbite and flowbite-vue as a dependency using NPM by running the following command:

npm i flowbite flowbite-vue

Require Flowbite as a plugin inside the tailwind.config.js and add flowbite-vue dist folder to tailwind content:

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

Now you can use flowbite-vue anywhere in your project and build awesome interfaces:

<template>
  <fwb-dropdown text="Click me" placement="top">
    <fwb-list-group>
      <fwb-list-group-item>Item #1</fwb-list-group-item>
      <fwb-list-group-item>Item #2</fwb-list-group-item>
      <fwb-list-group-item>Item #3</fwb-list-group-item>
    </fwb-list-group>
  </fwb-dropdown>
</template>

<script setup>
import { FwbDropdown, FwbListGroup, FwbListGroupItem } from 'flowbite-vue'
</script>

1.5 KiB Raw Permalink Blame History

Flowbite Vue - Quickstart

Require via NPM

1.5 KiB

Raw Permalink Blame History