Use Flowbite in Tailwind Config

sage
,
1

Trying to import Flowbite to work with it for Navi navigation menu. So added the following to tailwind.config.js:

/** @type {import('tailwindcss').Config} config */
import flowbite from 'flowbite';
const config = {
  content: ['./index.php', './app/**/*.php', './resources/**/*.{php,vue,js}'],
  theme: {
    container: {
      center: true,
      padding: {
        DEFAULT: '.625rem',
        sm: '1.25rem'
      }
    },
    screens: {
      'sm': '640px',
      'md': '768px',
      'lg': '1300px',
    },
    fontFamily: {
      'body': ['"Inconsolata"', 'Serif'],
      'heading': ['"Poppins"', "Inconsolata"],
    },
    extend: {
      colors: {
        'black-100': '#0c1c2e',
        'black-200': '#000',
        'grey': '#414141',
        'off-white': '#e6ecef',
        'blue': '#2d80e2',
        'red': '#e95941',
        'yellow': '#fed15a',
        'cyan': '#71e2df',
      },
      spacing: {
        '16': '4.375rem'
      },
      fontSize: {
        'xs':'.9375rem',
        '2xl':'1.5625rem',
        '4xl':'2.5rem',
        '6vw': '6vw',
        '9vw': '9vw',
        '12vw': '12vw'
      }
    },
  },
  plugins: [
    flowbite,
  ],
};

export default config;

but then I get this error:


│ │ Module build failed (from ../node_modules/postcss-loader/dist/cjs.js):
│ │ TypeError: Cannot read properties of undefined (reading '__isOptionsFunction')
│ │     at node_modules/tailwindcss/lib/util/resolveConfig.js:199:24
│ │     at Array.forEach (<anonymous>)
│ │     at node_modules/tailwindcss/lib/util/resolveConfig.js:198:17
│ │     at Array.forEach (<anonymous>)
│ │     at extractPluginConfigs (node_modules/tailwindcss/lib/util/resolveConfig.js:188:13)
│ │     at resolveConfig (node_modules/tailwindcss/lib/util/resolveConfig.js:239:12)
│ │     at resolveConfig (node_modules/tailwindcss/lib/public/resolve-config.js:20:39)
│ │     at getTailwindConfig (node_modules/tailwindcss/lib/lib/setupTrackingContext.js:71:88)
│ │     at node_modules/tailwindcss/lib/lib/setupTrackingContext.js:100:92
│ │     at node_modules/tailwindcss/lib/processTailwindFeatures.js:48:11
│ │     at plugins (node_modules/tailwindcss/lib/plugin.js:38:69)
│ │     at LazyResult.runOnRoot (node_modules/postcss/lib/lazy-result.js:357:16)
│ │     at LazyResult.runAsync (node_modules/postcss/lib/lazy-result.js:286:26)
│ │     at async Object.loader (node_modules/postcss-loader/dist/index.js:84:14)

What is the proper way to import and use this plugin ?

1 Like
2

When I use import flowbite from 'flowbite/plugin.js'; it does work. But… the hamburger still did not trigger a dropdown in Navi resources/views/partials/navigation.blade.php:

@if ($navigation)
  <nav class="bg-white border-gray-200 dark:bg-gray-900">
    <div class="max-w-screen-xl flex flex-wrap items-center justify-between mx-auto p-4">
      <a href="https://flowbite.com/" class="flex items-center">
          <img src="https://flowbite.com/docs/images/logo.svg" class="h-8 mr-3" alt="Flowbite Logo" />
          <span class="self-center text-2xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
      </a>
      <button data-collapse-toggle="navbar-default" type="button" class="inline-flex items-center p-2 w-10 h-10 justify-center text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          <svg class="w-5 h-5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 17 14">
              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 1h15M1 7h15M1 13h15"/>
          </svg>
      </button>
      <div class="hidden w-full md:block md:w-auto" id="navbar-default">
        <ul class="font-medium flex flex-col p-4 md:p-0 mt-4 border border-gray-100 rounded-lg bg-gray-50 md:flex-row md:space-x-8 md:mt-0 md:border-0 md:bg-white dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700">
          @foreach ($navigation as $item)
            <li class="my-menu-item {{ $item->classes ?? '' }} {{ $item->active ? 'active' : '' }}">
              <a href="{{ $item->url }}" class="block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
                {{ $item->label }}
              </a>

              @if ($item->children)
                <ul class="my-child-menu">
                  @foreach ($item->children as $child)
                    <li class="my-child-item {{ $child->classes ?? '' }} {{ $child->active ? 'active' : '' }} block py-2 pl-3 pr-4 text-gray-900 rounded hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-white md:dark:hover:text-blue-500 dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">
                      <a href="{{ $child->url }}">
                        {{ $child->label }}
                      </a>
                    </li>
                  @endforeach
                </ul>
              @endif
            </li>
          @endforeach
        </ul>
      </div> <!-- hidden sm -->
    </div> <!-- max screen -->
@endif

Had to also add it to app.js . Not sure why as well but I did:

import domReady from '@roots/sage/client/dom-ready';

/**
 * Application entrypoint
 */
domReady(async () => {
  // ...
});

/**
 * @see {@link https://webpack.js.org/api/hot-module-replacement/}
 */
if (import.meta.webpackHot) import.meta.webpackHot.accept(console.error);

import 'flowbite';

Now it does work though styling still needs love.

1 Like