Nuxt s-s-r 设置导致 Tailwind 媒体查询崩溃

Posted 2023-03-07

【中文标题】Nuxt s-s-r 设置导致 Tailwind 媒体查询崩溃

【英文标题】：Nuxt s-s-r setting causes Tailwind media query to crash

【发布时间】：2021-03-25 09:03:07

【问题描述】：

我在使用 Tailwind 和 Nuxt 清除 CSS 时遇到问题。我能够将问题隔离在 nuxt 配置中的 s-s-r: false 和 s-s-r: true 设置之间。

问题

当我使用 s-s-r: true 和 target: static（全静态）时。媒体查询将消失。

预期行为

无论 s-s-r 是真还是假，CSS 清除都应该相同。

查看问题

具有 s-s-r 的工作站点 - 错误（SPA 模式）：Link 具有 s-s-r 的非功能站点 - 真（全静态）：Link

在工作站点下，如果您查看响应式元素的 CSS，您会看到媒体查询，如下所示：

<div class="hidden lg:block"> ... </div>

@media (min-width: 1024px)
.lg\:block 
    display: block;

在非功能性站点中，lg:block 类将丢失，lg:hidden 将丢失其媒体查询并变成只是

.lg\:hidden  display: hidden; 

您可以检查汉堡菜单将被隐藏无论您的屏幕尺寸。

有人知道我做错了什么吗？

我还附上了我的tailwind.config.js 以供参考

module.exports = 
  theme: 
    darkSelector: '.dark-mode',
    inset: 
      0: 0,
      auto: 'auto',
      '1/2': '50%',
      '-16': '-4rem',
    ,
    flexGrow: 
      0: 0,
      1: 1,
      2: 2,
      3: 3,
      default: 1,
    ,
    extend: 
      colors: 
        primary: 'var(--color-primary)',
        secondary: 'var(--color-secondary)',
        ld_gray: 
          100: 'var(--color-body-100)',
          200: 'var(--color-body-200)',
          300: 'var(--color-body-300)',
          400: 'var(--color-body-400)',
          500: 'var(--color-body-500)',
          600: 'var(--color-body-600)',
          700: 'var(--color-body-700)',
          800: 'var(--color-body-800)',
          900: 'var(--color-body-900)',
        ,
        background: 
          primary: 'var(--color-background-primary)',
        ,
        border: 
          primary: 'var(--color-border-primary)',
        ,
      ,
      spacing: 
        '1/3': '33.3333333%',
        '2/3': '66.6666667%',
        '1/5': '20%',
        '2/5': '40%',
        '3/5': '60%',
      ,
      fontSize: 
        xxs: '.625rem',
      ,
      fontFamily: 
        display: ['Oswald', 'Noto Sans TC'],
        body: ['Raleway', 'Noto Sans TC'],
        headline: ['Playfair Display', 'Noto Sans TC'],
      ,
      transitionDelay: 
        0: '0ms',
      ,
      screens: 
        'xs-only':  max: '639px' ,
        'sm-only':  min: '640px', max: '767px' ,
        'md-only':  min: '768px', max: '1023px' ,
        'lg-only':  min: '1024px', max: '1279px' ,
      ,
    ,
  ,
  variants: 
    display: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
      'dark',
      'dark-hover',
    ],
    backgroundColor: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
      'dark',
      'dark-hover',
      'dark-group-hover',
      'dark-even',
      'dark-odd',
    ],
    backgroundOpacity: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
      'dark',
      'dark-hover',
      'dark-group-hover',
      'dark-even',
      'dark-odd',
    ],
    textColor: [
      'responsive',
      'hover',
      'focus',
      'active',
      'group-hover',
      'dark',
      'dark-hover',
      'dark-group-hover',
      'dark-active',
    ],
    borderColor: [
      'responsive',
      'focus',
      'hover',
      'dark',
      'dark-focus',
      'dark-hover',
      'dark-focus-within',
    ],
    rotate: ['responsive', 'hover', 'group-hover', 'active', 'dark'],
  ,
  plugins: [
    require('tailwindcss-dark-mode')(), // https://github.com/ChanceArthur/tailwindcss-dark-mode
    require('@tailwindcss/custom-forms'),
  ],
  purge: 
    // Learn more on https://tailwindcss.com/docs/controlling-file-size/#removing-unused-css
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js',
      'nuxt.config.js',
    ],
    options: 
      whitelist: ['dark-mode'],
      variables: false,
    ,
  ,

【参考方案1】：

刚刚遇到了与您的问题非常相似的问题，但仅在使用 s-s-r: false 和 target: static 进行全静态构建时。 事实证明 TailwindCSS 正在使用 PurgeCSS 在构建时删除未使用的样式。 由于未知的原因，PurgeCSS 删除了生产构建中的所有媒体查询样式。 我到处找，你是唯一有类似问题的人，不知道你解决了吗？ 对我来说，我必须在 tailwind.config.js 处为 PurgeCSS 使用自定义选项，它指示 PurgeCSS 保留与我的应用程序中所需的响应式样式匹配的正则表达式规则列表。

module.exports = 
  purge: 
    options: 
      safelist: [
        'md:grid-cols-12',
        /^md:col-start-/,
        /^md:col-span-/,
        /^md:row-start-/,
        /^md:row-span-/,
      ]
    
  ,

只有这样我才能在生产模式下构建优化的静态导出。