Flowbite - Configuration

Customize the default utility classes by configuring the Tailwind CSS config file

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: ['./build/**/*.{js,jsx,ts,tsx}'],
  darkMode: false, // or 'media' or 'class'
  theme: {
      extend: {},
      fontFamily: {
      'sans': ['Inter', 'sans-serif'],
      'body': ['Inter', 'sans-serif'],
      'mono': ['ui-monospace', 'SFMono-Regular', 'Menlo', 'Monaco', 'Consolas', 'Liberation Mono', 'Courier New', 'monospace']
      },
      colors: {
      white: "#ffffff",
      black: "#000000",

      // other colors ...
      }
  },
  variants: {
      extend: {
      fill: ['hover', 'focus'],
      zIndex: ['hover', 'active'],
      },
  },
  plugins: [
      require('@tailwindcss/forms'),
  ],
}

Follow the build tools page steps to set up the configuration file if you haven’t done so.

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('@tailwindcss/forms'),
    require('@tailwindcss/aspect-ratio'),
    require('@tailwindcss/typography'),
    require('tailwindcss-children'),
  ],
}

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!