Cannot overwrite theme fontFamily when using presets to override

Describe the problem:

I have moved some config into separate preset files. One of these preset files is called tailwind.brand.js and I am including this along with several others in my main tailwind.config.js file like so:

module.exports = {
  presets: [
    require('./src/tailwind/tailwind.brand.js'),
    // require('./src/tailwind/tailwind.project.js'),
    require('./src/tailwind/tailwind.colors.js'),
    require('./src/tailwind/tailwind.spacing.js'),
    require('./src/tailwind/tailwind.opacity.js'),
    require('./src/tailwind/tailwind.zindex.js'),
    require('./src/tailwind/tailwind.grid.js')
  ],
  purge: {
    mode: 'all',
    content: [
      './templates/**/*.html',
      './templates/**/*.php',
      './src/**/*.js'
    ],
    
    options: {
      whitelistPatterns: [/lazyload/, /grayscale-up/, /blur-up/],
    }
  },
  theme: {
    container: {
      center: true,
      padding: '1.5rem',
    },
  },
  variants: {
    extend: {
      // display: ['group-hover']
      // translate: ['group-hover']
    }
  },
  corePlugins: {},
  plugins: []
};

Within the tailwind.brand.js I am over-riding the font families and adding/extending some colours like so:

module.exports = {
  theme: {
    fontFamily: {
      'sans': ['Poppins', 'sans-serif'],
      'serif': [''],
      'brand': [],
    },
    extend: {
      colors: {
        // Extends one of new TailwindCSS colour schemes
        // lightblue: colors.lightBlue,
        
        'brand': {
          'orange': '#fe5b00',
          'red': '#ff0000'
        }
      },
    }
  }
};

However, on the buildCSS the fontFamily is not getting replaced and it is using the default family settings. If I move the fontFamily code out of the tailwind.brand.js and directly into the tailwind.config.js then it works ok.

    fontFamily: {
      'sans': ['Poppins', 'sans-serif'],
      'serif': [''],
      'brand': [],
    },

So it appears that the the defaults are not overridden when inside a preset.

[bradlc]

Hey @terryupton thanks for that. After taking a closer look at this it seems that the presets are working as expected, although the behaviour may be a little unintuitive.

Basically each of your presets in turn extends from the default config. From the docs:

By default, presets themselves extend Tailwind’s default configuration just like your own configuration would.

You can think of it like this:

let preset1 = [defaultConfig, customStuff1]
let preset2 = [defaultConfig, customStuff2]

let finalConfig = merge([...preset1, ...preset2, customStuff3])
// => merge([defaultConfig, customStuff1, defaultConfig, customStuff2, customStuff3])

So the font you’re specifying in customStuff1 is overridden by the default config that preset2 extends. The solution is to set presets to an empty array in each of your presets:

If you’d like to create a preset that completely replaces the default configuration, include an empty presets key in the preset itself

Then, to ensure that you still get the Tailwind defaults you can either leave the presets key off your first preset, or add it manually to your main config file:

module.exports = {
  presets: [
    require('tailwindcss/defaultConfig'),
    require('./preset1.js'),
    require('./preset2.js'),
  ],
}

Hopefully that makes sense, and I have opened a pull request on your repo with the changes I described 👍

[terryupton]

Hey @bradlc - I have now setup a new branch tailwind-presets-issue that illustrates the issue. I have rerun the build (using none production) and you can see that the ‘Poppins’ font stack is no longer used when it is called within /src/tailwind/tailwind.brand.js

Shout me if you need anything clarifying.