Tailwind CSS Configuration - Flowbite

Learn how to customize the default Flowbite and Tailwind CSS options and styles

Before continuing, please make sure that you have installed Flowbite as a plugin inside your Tailwind CSS by following the quickstart guide.

Configuration file

You will probably want to be able to add your own colors, fonts, sizings, shadows, and other styles to the default set of utility classes from FlowBite and Tailwind CSS.

You can easily to so by editing the tailwind.config.js file from the root folder of your project.

module.exports = {
  purge: {
    // enable or disable the purging
    enabled: true,

    // add the folders and files from your templates
    content: ["./layouts/**/*.html", "./content/**/*.md", "./content/**/*.html", "./src/**/*.js"],

    options: {
      // make sure to safelist these classes when using purge
      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',
        /data-.*/
      ],
    }
  },
  darkMode: 'class',
  theme: {
    extend: {
      // extend base Tailwind CSS utility classes
    }
  },
  variants: {
    extend: {
      // apply variants like hover, focus, dark to components
    }
  },
  plugins: [
    // include Flowbite as a plugin in your Tailwind CSS project
    require('@themesberg/flowbite/plugin')
  ]
}

Theme

Use the theme object to define the color palette, fonts, border sizes, breakpoints. Basically, all of the visual design aspects of your website.

// tailwind.config.js
module.exports = {
  theme: {
    colors: {
      gray: colors.coolGray,
      blue: colors.lightBlue,
      red: colors.rose,
      pink: colors.fuchsia,
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    }
  }
}

Variants

Use the variants object lets you define which variants (eg. hover, focus states) are used for each utility plugin.

// tailwind.config.js
module.exports = {
  variants: {
    fill: [],
    extend: {
      borderColor: ['focus-visible'],
      opacity: ['disabled'],
    }
  },
}

Plugins

The plugins object lets you define which external plugin you would like to include.

// tailwind.config.js
module.exports = {
  plugins: [
    require('@themesberg/flowbite/plugin'),
    // ...
  ],
}

Presets

Use the presets object to require another default set of configuration.

// tailwind.config.js
module.exports = {
  presets: [
    require('@acmecorp/base-tailwind-config')
  ],

  // Project-specific customizations
  theme: {
    //...
  },
  // ...
}

Prefix

You can use the prefix object to set a prefix for all of the classes generated by FlowBite and Tailwind CSS.

For example, you can add the fb- prefix like so:

// tailwind.config.js
module.exports = {
  prefix: 'fb-',
}

Doing so it will add the prefix to all of the classes.

.fb-text-left {
  text-align: left;
}
.fb-text-center {
  text-align: center;
}
.fb-text-right {
  text-align: right;
}
/* etc. */

If you’d like to browse the full list of configurable options, please visit the official Tailwind CSS configuration.

Copied code to clipboard!