显示的响应变体停止工作

Posted 2023-03-07

【中文标题】显示的响应变体停止工作

【英文标题】：Responsive variants of display stopped working

【发布时间】：2022-01-03 14:29:40

【问题描述】：

在我的项目中，我大量使用了响应式变体。例如，有时我需要在移动显示器上隐藏某些内容并使用 hidden sm:flex 或 hidden md:block 等类。这已经完美运行了一段时间，但突然有些类在没有任何明显原因的情况下停止工作。在页面的某些部分它们有效，而在某些部分则无效。

我已经禁用了清除、JIT、重新安装了 tailwind、在不同的计算机上编译以及我能想到的所有其他内容。他们都没有对这个问题做出任何改变。

注意，我已经修复了重复问题，这与问题无关。

从下图中可以看出，类是在 DOM 元素上设置的，但它并没有注册到应用的 CSS 样式上。

tailwind.config.js

module.exports = 
  purge: 
    enabled: process.env.NODE_ENV === 'production',
    content: [
      'components/**/*.vue,js',
      'layouts/**/*.vue',
      'pages/**/*.vue',
      'plugins/**/*.js,ts',
      'nuxt.config.js,ts',
    ],
    safelist: [],
  ,
  future: 
    removeDeprecatedGapUtilities: true,
    purgeLayersByDefault: true,
  ,
  prefix: '',
  important: false,
  separator: ':',
  theme: 
    extend: 
      transitionProperty: 
        'max-height': 'max-height',
      ,
      colors: 
        'al-green-light': '#7e997a',
        'al-green': '#6C8469',
        'al-green-medium': '#566954',
        'al-green-dark': '#111411',
        'al-red': '#cf4040',
        'al-yellow': '#FFBF00',
        'al-beige': '#fbf8f5',
        'al-gray': '#767676',
      ,
      zIndex: 
        '-1': '-1',
        'card-backdrop': '100',
        'card-logo': '110',
        'card-content': '120',
        dropdown: '500',
        navigation: '900',
        modal: '1000',
        'modal-backdrop': '1010',
        'modal-content': '1020',
      ,
    ,
  ,
  variants: 
    backgroundColor: ['disabled', 'hover'],
    padding: ['group-hover'],
    display: ['group-hover'],
  ,
  plugins: [],
;

tailwind.css

/* purgecss start ignore */
@import 'tailwindcss/base';
@import 'tailwindcss/components';
/* purgecss end ignore */
@import 'tailwindcss/utilities';

nuxt.config.js

  buildModules: [
    '@nuxtjs/tailwindcss', 
  ],
  tailwindcss: 
    exposeConfig: true,
  ,

【问题讨论】：

您是否在此处编辑了带有一些自定义断点的tailwind.config.js 文件？

不，我没有以任何方式更改断点。

第二个 CSS 类从何而来？你应该在你的开发工具的右边有它的名字。

重复的 CSS 来自同一个文件，所以显然它在某处添加了两次。但我似乎不知道在哪里。

好的，我修复了重复问题。由于另一位开发人员多年前添加的某些行，CSS 被包含两次。主要问题仍然相同。

【参考方案1】：

我通过添加解决了这个问题

  variants: 
    display: ['responsive'],
  ,

到我的tailwind.config.js

但是，这不是必需的，因为根据 Tailwind 文档，默认情况下应该为显示实用程序生成响应变体。