custom breakpoint works in one component and doesn't work in another.

[josundaloc]

I've defined a custom breakpoint that's in between iphone SE screens and iphone X+, however it only seems to work on one component (a larger display component for a large landing image, 1400px) but not on a smaller component (a smaller component about 160px). I'm using it just to make the width responsive, but also noticed the breakpoint doesn't work for font colors.

here's my config file:
`const colors = require('tailwindcss/colors')

module.exports = {
purge: ['./src/**/*.{js,jsx,ts,tsx}', './public/index.html'],
darkMode: false, // or 'media' or 'class'
theme: {
screens: {
ipx: '370px',
sm: '640px',
md: '768px',
lg: '1024px',
xl: '1280px',
'2xl': '1536px',
},
colors: {
transparent: 'transparent',
current: 'currentColor',

  black: colors.black,
  white: colors.white,
  gray: colors.coolGray,
  red: colors.red,
  yellow: colors.amber,
  lime: colors.lime,
  green: colors.emerald,
  blue: colors.blue,
  indigo: colors.indigo,
  purple: colors.violet,
  pink: colors.pink,
},
extend: {
  screens: {
    ipx: '370px',
  }
},

},
variants: {
extend: {},
},
plugins: [],
}
`

[simonswiss]

Hey!

Can you please create an example of your issue in a Tailwind Play?