Tailwindcss: theme.fontFamily in base styles plugin creates multiple rules

Created on 31 May 2019 · 2Comments · Source: tailwindlabs/tailwindcss

This is a (maybe) bug I noticed. It might just be the way it works underneath.

Using a config like this:

module.exports = {
  theme: {
    fontFamily: {
      serif: [
        'playfair',
        'serif',
      ],
    },
  },
  variants: {},
  plugins: [
    function({ addBase, config }) {
      const { fontFamily } = config('theme')

      addBase({
        'h1, h2, h3, h4, h5, h6': { fontFamily: fontFamily.serif },
        // Also doesn’t work if you use `config('theme.fontFamily.serif')` here
      })
    },
  ],
}

It generates rules like this:

h1, h2, h3, h4, h5, h6 {
  font-family: playfair;
  font-family: serif;
}

For now I’m concatenating the array (fontFamily.serif.join()), but I figured I’d make a note of this behaviour here in case others run into it. I don’t know if this should be address with a code change as it seems to be on the postcss-js side of things (not entirely sure though) or just should be noted in the docs.

Source

knowler

👍2

Most helpful comment

It is how it works, the usage of arrays in the fontFamily is added convenience from tailwindcss side.
You'll have to join it with ', ', like:

({ addBase, config }) => addBase({
  'h1, h2, h3, h4, h5, h6': { fontFamily: config('theme.fontFamily.serif').join(', ') },
}),

Tailwind actually also accepts strings instead of arrays there, so you can do a check for that too if you want to stay close to tailwind or if you are making a library.

tlgreg on 31 May 2019

👍3

All 2 comments

It is how it works, the usage of arrays in the fontFamily is added convenience from tailwindcss side.
You'll have to join it with ', ', like:

({ addBase, config }) => addBase({
  'h1, h2, h3, h4, h5, h6': { fontFamily: config('theme.fontFamily.serif').join(', ') },
}),

Tailwind actually also accepts strings instead of arrays there, so you can do a check for that too if you want to stay close to tailwind or if you are making a library.

tlgreg on 31 May 2019

👍3

Yeah @tlgreg is correct, you would need to join the array yourself. Agree it's sort of annoying, in hindsight I almost feel like we never should have supported array syntax there to keep things simple. Can't really "fix" this without it being a BC break so just going to close as "won't fix" for now, maybe something we could make better in v2.