Tailwind CSS Configuration
Learn how to customize the default Tailwind and Tailwind CSS options and styles
Before continuing, please make sure that you have installed Tailwind 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 do that by editing the tailwind.config.js
file from the root folder of your project.
module.exports = {
// add the folders and files from your templates
content: ['./layouts/**/*.html', './content/**/*.md', './content/**/*.html', './src/**/*.js'],
// 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'
],
// enable dark mode via class strategy
darkMode: 'class',
theme: {
extend: {
// extend base Tailwind CSS utility classes
}
},
plugins: [
// include Tailwind as a plugin in your Tailwind CSS project
require('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('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.