TailwindCSS custom config: Colors, typography, custom properties

This is a brief guide as to how to implement several useful customizations into a TailwindCSS project:

1. Inject the full color palette into global CSS scope as custom properties, which you can then you in regular CSS/SCSS (to augment the utility classes)
2. Add custom colors to the palette
3. Add local fonts into the project, and add TW utility classes to apply them conveniently

NOTE: If you want to see all the available theme configuration options, you can see a full configuration file here, otherwise the docs are here. There is a LOT more you can do with Tailwind!

1. Add full color palette to CSS custom properties

Inside the tailwind.config.js file:

plugins: [require('@tailwindcss/typography'),require('@tailwindcss/forms'),require('daisyui'),// etcfunction ({ addBase, theme }) {function extractColorVars(colorObj, colorGroup = '') {return Object.keys(colorObj).reduce((vars, colorKey) => {const value = colorObj[colorKey];const newVars =typeof value === 'string'? { [`--color${colorGroup}-${colorKey}`]: value }: extractColorVars(value, `-${colorKey}`);return { ...vars, ...newVars };}, {});}addBase({':root': extractColorVars(theme('colors')),});},],

Voila! You should now have access to all your Tailwind colors, exposed as var(--color-color_name-intensity) - including any custom colors you’ve added to the palette!

This mixin was copied from this excellent gist by Merott, many thanks for sharing it!

2. Custom colors

If you want to extend a color that already exists:

colors: {...colors,
	gray: {750:  '#223240',},}

If you want to add new colors:

colors: {...colors,
	orangeyellow: {100:  "#fbf1cc",200:  "#f7e399",300:  "#f3d466",400:  "#efc633",500:  "#ebb800",600:  "#bc9300",700:  "#8d6e00",800:  "#5e4a00",900:  "#2f2500"},// etc

If you wanted to replace rather than augment the Tailwind default colors, simply leave out the ...colors, line.

3. Custom local fonts

This one is a bit more complex. I was able to do this thanks to this very helpful gist from odyright.

You’ll need a place for your font files; I’ve used static/fonts/.

For each font, you’ll need to create a subfolder, as well as a .css or .scss file in the fonts/ root.
The font files themselves (TTF, OTF, WOFF etc) will go into the static/fonts/[fontname] folder, while the static/fonts/[fontname].scss file will contain code to process that font.

You’ll need to copy @odyright’s mixin-fontface.scss into your fonts folder, and then create a [fontname].scss file based on his example for each font you want to add (each font file imports the mixin-fontface.scss mixin).

Within your app.scss (if you want them available to your app globally; otherwise you could import them per-page or layout) you’ll need to import all your new fonts as so:

@tailwind base;
@tailwind components;
@tailwind utilities;@import  '../static/fonts/open-sans.scss';@import  '../static/fonts/newsreader.scss';@import '../static/fonts/montserrat.scss';// etc...

That got me all the custom fonts I wanted, embedded locally!

Add your new fonts as utility classes:

Inside the tailwind.config.js file, add your fonts as follows:

theme: {
	fontFamily: {'open': ['"Open Sans"', ...defaultTheme.fontFamily.sans],'newsreader': ['Newsreader', ...defaultTheme.fontFamily.serif],'montserrat': ['Montserrat', ...defaultTheme.fontFamily.sans],// (...etc)},}

Wrapping up

There are many more customizations available for TailwindCSS; after all, it is their stated intention

to be extensible and customizable, so that no matter what you’re building you never feel like you’re fighting the framework.

Well played, Tailwind. I think you’re succeeding in your mission.

I hope this was helpful for you; if you found my writing helpful or interesting, please do follow me on GitHub, Twitter (though I rarely use it), or wherever my name pops up.

Have a great day!