Tailwind CSS Typography - Flowbite
Use the typography plugin from Flowbite to apply styles to all inline elements like headings, paragraphs, lists, and images using a single format class
Get started with the Flowbite Typography plugin forked from the official Tailwind CSS Typography plugin to set a custom format class to a wrapper element to apply styles to all inline child elements such as headings, paragraphs, images, lists, and more and apply font sizes, font weights, colors, and spacings.
You can check out this live demo to see how content inside an article will render like.
Getting started #
Make sure that you have both Node.js and Tailwind CSS already installed in your project.
- Install the Flowbite Typography plugin via NPM:
- Terminal
npm i -D flowbite-typography
- Import the
flowbite-typographyplugin inside your main Tailwind CSS file:
- Terminal
@plugin "flowbite-typography";
Alternatively you can do the same but in your tailwind.config.js file:
- Terminal
// import the tailwind.config.js file in your main CSS file if using Tailwind CSS v4
module.exports = {
theme: {
// ...
},
plugins: [
require('flowbite-typography'),
// ...
],
}
Now you can go ahead and use the new formatting classes from the Flowbite Typography plugin.
Basic usage #
Once you have installed the plugin inside your project you can add the format class to a wrapper element and use any type of inline elements such as headings, paragraphs, images, lists, captions, links, and tables.
All of these elements will be automatically styled with proper spacing, font sizing, font weight, colors, and more based on recommended UI/UX readability and accessibility standards.
- Terminal
module.exports = {
theme: {
extend: {
typography: ({ theme }) => ({
orange: {
css: {
'--tw-format-body': theme('colors.orange[500]'),
'--tw-format-headings': theme('colors.orange[900]'),
'--tw-format-lead': theme('colors.orange[500]'),
'--tw-format-links': theme('colors.orange[600]'),
'--tw-format-bold': theme('colors.orange[900]'),
'--tw-format-counters': theme('colors.orange[500]'),
'--tw-format-bullets': theme('colors.orange[500]'),
'--tw-format-hr': theme('colors.orange[200]'),
'--tw-format-quotes': theme('colors.orange[900]'),
'--tw-format-quote-borders': theme('colors.orange[300]'),
'--tw-format-captions': theme('colors.orange[700]'),
'--tw-format-code': theme('colors.orange[900]'),
'--tw-format-code-bg': theme('colors.orange[50]'),
'--tw-format-pre-code': theme('colors.orange[100]'),
'--tw-format-pre-bg': theme('colors.orange[900]'),
'--tw-format-th-borders': theme('colors.orange[300]'),
'--tw-format-td-borders': theme('colors.orange[200]'),
'--tw-format-th-bg': theme('colors.orange[50]'),
'--tw-format-invert-body': theme('colors.orange[200]'),
'--tw-format-invert-headings': theme('colors.white'),
'--tw-format-invert-lead': theme('colors.orange[300]'),
'--tw-format-invert-links': theme('colors.white'),
'--tw-format-invert-bold': theme('colors.white'),
'--tw-format-invert-counters': theme('colors.orange[400]'),
'--tw-format-invert-bullets': theme('colors.orange[600]'),
'--tw-format-invert-hr': theme('colors.orange[700]'),
'--tw-format-invert-quotes': theme('colors.pink[100]'),
'--tw-format-invert-quote-borders': theme('colors.orange[700]'),
'--tw-format-invert-captions': theme('colors.orange[400]'),
'--tw-format-invert-code': theme('colors.white'),
'--tw-format-invert-pre-code': theme('colors.orange[300]'),
'--tw-format-invert-pre-bg': 'rgb(0 0 0 / 50%)',
'--tw-format-invert-th-borders': theme('colors.orange[600]'),
'--tw-format-invert-td-borders': theme('colors.orange[700]'),
'--tw-format-invert-th-bg': theme('colors.orange[700]'),
},
},
}),
},
},
plugins: [
require('flowbite-typography'),
// ...
],
}
Now you can use the format-red class and apply these styles.
Wrapper class #
Change the default format class to your own choosing by updating the tailwind.config.js file:
- Terminal
module.exports = {
theme: {
// ...
},
plugins: [
require('flowbite-typography')({
className: 'custom-class',
}),
]
...
}
Custom CSS #
You can also customize the default CSS by extending the css key value pair from the Tailwind configuration file:
- Terminal
module.exports = {
theme: {
extend: {
typography: {
DEFAULT: {
css: {
color: '#666',
a: {
color: '#3182ce',
'&:hover': {
color: '#2c5282',
},
},
},
},
},
},
},
plugins: [
require('flowbite-typography'),
// ...
],
}
Blog templates #
You can check out the following blog template layouts from Flowbite Blocks that use the Typography plugin.