如何禁用某些文件的 Tailwind css？

Question

我想禁用某些文件的 tailwind，因为 tailwind 基本样式会重写来自 CMS 的样式。我尝试禁用预检，但它破坏了所有现有系统。有可能吗？

顺风版本 - 2.2.7

我的顺风配置：

const defaultTheme = require('tailwindcss/defaultTheme');
const colors = require('tailwindcss/colors');

module.exports = {
  mode: 'jit',
  purge: ['./src/**/*.{js,tsx}'],
  theme: {
    extend: {
      colors: {
        indigo: colors.indigo,
        green: colors.green,
        yellow: colors.yellow,
        'royal-blue': {
          100: '#F0F1FC',
          200: '#D9DCF9',
        },
        blueGray: {
          50: '#f8fafc',
          100: '#f1f5f9',
          400: '#94a3b8',
        },
      },
      fontFamily: {
        sans: ['Inter var', ...defaultTheme.fontFamily.sans],
      },
      maxWidth: {
        '8xl': '90rem',
      },
    },
  },
  variants: {},
  plugins: [
    function ({ addComponents }) {
      addComponents({
        '.container': {
          '@screen lg': {
            maxWidth: '1024px',
          },
          '@screen xl': {
            maxWidth: '1140px',
          },
        },
      });
    },
  ],
};```

Answer 1

如果您只想禁用某些 CMS 内容的预检，那么您可以尝试all: revert;向所需元素（及其子元素）添加属性，这会将大多数样式重置为其原始值。

在 MDN 上阅读更多内容

your-element-selector * {
  all: revert;
}