can't add custom fonts using addBase function as a tailwind plugin

[krikchaip]

Hi. i just recently switched from a plain Tailwind on NextJS to this.
Previously, I had created tailwind plugins to customize my app styling. this also included custom font faces, which used to worked fine until i switched.

those @font-face rules somehow were not loaded into the base layer (i use addBase function with @font-face key. see below) but other just works fine.

i knew that this problem can easily solve by using <GlobalStyles> component from emotion instead of writing tailwind plugins, but i want to keep my project structure the same without changing.

Thanks.

// tailwind.config.js
module.exports = {
  theme: {
    fontFamily: {
      sans: ['NotoSans']
    }
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/line-clamp'),
    require('@tailwindcss/aspect-ratio'),
    ...require('./plugins')
  ]
}

// plugins/index.js
module.exports = [require('./font-face'), require('./global')]

// plugins/font-face.js
const plugin = require('tailwindcss/plugin')

module.exports = plugin(({ addBase }) => {
  addBase({
    '@font-face': {
      fontFamily: 'NotoSans',
      fontWeight: 400,
      fontStyle: 'normal',
      src: `url('./font/NotoSans/NotoSans-Regular.ttf')`
    }
  })
}

// plugins/global.js
const plugin = require('tailwindcss/plugin')

module.exports = plugin(({ addBase }) => {
  addBase({
    body: {
      color: 'red'
    }
  })
})

project structure

[ben-rogerson]

Hey there,

Twins GlobalStyles import adds the plugins you've defined with addBase.
But right now there's a problem defining @font-face within tailwind plugins using addBase - fix is in #563 which I'll push soon.
Until then, add it temporarily with emotions globalStyles import.

[krikchaip]

much appreciated. Thanks!

[ben-rogerson]

@krikchaip All fixed in [email protected] 🎉