React和Tailwind-从配置中读取自定义断点值

我想根据窗口宽度值有条件地更改组件道具。

我添加了一个 xs 的断点值 tailwind.config.cjs 。

/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
  theme: {
    screens: {
      xs: '480px',
      ...defaultTheme.screens,
    },
    extend: {
      colors: {
        'primary-green': colors.green['600'],
        'off-white': '#fafafa',
      },
    },
  },
  plugins: [],
};

我已经创建了一个自定义Hook来从Tailwind主题中提取断点值。

theme.ts 文件:

import resolveConfig from 'tailwindcss/resolveConfig';
import tailwindConfig from 'tailwind.config.cjs';

export default resolveConfig(tailwindConfig);

和钩子:

import theme from 'lib/theme';

function useBreakpointValue(breakpointValue: string) {
  const breakpoint = theme.theme.screens[breakpointValue];
  return Number(breakpoint.slice(0, breakpoint.indexOf('px')));
}

export default useBreakpointValue;

当我使用预定义的Tailwind断点值时,一切都很好。

  const breakpoint = useBreakpointValue('sm'); // works fine

但不符合我的习惯 xs公司 价值

  const breakpoint = useBreakpointValue('xs'); // undefined - the app crashes

我想不通。 感谢您的帮助。