显示的响应变体停止工作答案

【问题标题】：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 被包含两次。主要问题仍然相同。

标签： nuxt.js tailwind-css

【解决方案1】：

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

  variants: {
    display: ['responsive'],
  },

到我的tailwind.config.js

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

【讨论】：