Tailwind CDN配置自定义断点后自定义颜色失效问题排查

当前配置存在两处错误，直接导致配置解析中断，自定义颜色等扩展规则全部失效：

• CDN方式引入Tailwind时，全局作用域下不存在defaultTheme变量，直接展开...defaultTheme.screens会触发JavaScript引用错误，整个配置对象的解析流程终止，后续所有扩展配置都不会被Tailwind加载。
• 自定义断点screens被直接写在theme根节点下，而非theme.extend节点内，即使解决变量引用问题，该写法也会直接覆盖Tailwind内置的全部默认断点，而非追加新的小尺寸断点。

将断点配置移入extend节点，同时通过CDN暴露的全局tailwind对象读取默认主题，修正后的完整配置如下：

tailwind.config = {
  theme: {
    extend: {
      screens: {
        iphone: '360px',
        ...tailwind.defaultTheme.screens,
      },
      colors: {
        green: "#02594c",
        grey: "#333",
        yellow: "#fe0",
        purple: "#5F3DC4",
        orange: "#ff9800"
      },
      fontSize: {
        lg2: '1.1875rem',
        remtwo: '2rem',
      },
      margin: {
        xxl: '34rem',
        xxl2: '37rem',
        xxl3: '40rem',
        xxl4: '45rem',
        xxl5: '50rem',
        xxl6: '55rem',
        xxl7: '60rem',
        xxl8: '65rem',
        xxl9: '70rem',
      },
      gap: {
        110: '23rem',
        120: '27rem',
        130: '30rem',
        135: '32rem',
        140: '33rem'
      },
      fontFamily: {
        arial: ['arial']
      },
      height: {
        xxl: '25rem',
        xxl2: '27rem',
        xxl3: '30rem',
        xxl4: '32rem',
        xxl5: '34rem'
      },
      width: {
        xl: '25rem',
        xxl: '30rem',
        xxl2: '37rem',
        xxl3: '38rem'
      },
      borderWidth: {
        xl: '323px',
        xxl: '400px',
      },
    },
  }
};

修正配置后：

• 无JS运行错误，所有自定义的颜色、字号、间距、字体等规则均可正常生效
• 新增的iphone:360px断点会被追加到默认断点列表最前端，不会覆盖Tailwind原有的sm、md、lg等默认断点，符合小尺寸断点的添加逻辑

内容的提问来源于stack exchange，提问作者someone