带有 CSS 变量的 PostCSS 嵌套在 Tailwind CSS 和 Next.js 中不起作用

Question

我正在尝试将 PostCSS 嵌套与 CSS 变量一起使用，但它根本不转换 CSS 变量。

相反，它在 DOM 中为 CSS 变量显示 Invalid property value。

我的tailwind.css 文件包含一堆 CSS 变量：

tailwind.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  :root {
    --font-mono: 'Fira Mono, monospace';

    --text-1: '12px';
    --text-2: '14px';

    --colors-black: 'rgba(19, 19, 21, 1)';
    --colors-white: 'rgba(255, 255, 255, 1)';
    --colors-gray: 'rgba(128, 128, 128, 1)';
    --colors-blue: 'rgba(3, 136, 252, 1)';
    --colors-red: 'rgba(249, 16, 74, 1)';
    --colors-yellow: 'rgba(255, 221, 0, 1)';
    --colors-pink: 'rgba(232, 141, 163, 1)';
    --colors-turq: 'rgba(0, 245, 196, 1)';
    --colors-orange: 'rgba(255, 135, 31, 1)';

    --space-1: '4px';
    --space-2: '8px';
    --space-3: '16px';

    --radii-1: '2px';
    --radii-2: '4px';
  }

  pre {
    --background: 'hsla(206 12% 89.5% / 5%)';
    --text: var('--colors-white');
    --syntax1: var('--colors-orange');
    --syntax2: var('--colors-turq');
    --syntax3: var('--colors-pink');
    --syntax4: var('--colors-pink');
    --comment: var('--colors-gray');
    --removed: var('--colors-red');
    --added: var('--colors-turq');

    box-sizing: 'border-box';
    padding: var('--space-3');
    overflow: 'auto';
    font-family: var('--font-mono');
    font-size: var('--text-2');
    line-height: var('--space-3');
    whitespace: 'pre';
    background-color: var('--background');
    color: var('--text');

    '& > code': {
      display: 'block';
    }

    '.token.parameter': {
      color: var('--text');
    }

    '.token.tag, .token.class-name, .token.selector, .token.selector .class, .token.function': {
      color: var('--syntax1');
    }

    '.token.attr-value, .token.class, .token.string, .token.number, .token.unit, .token.color': {
      color: var('--syntax2');
    }

    '.token.attr-name, .token.keyword, .token.rule, .token.operator, .token.pseudo-class, .token.important': {
      color: var('--syntax3');
    }

    '.token.punctuation, .token.module, .token.property': {
      color: var('--syntax4');
    }

    '.token.comment': {
      color: var('--comment');
    }

    '.token.atapply .token:not(.rule):not(.important)': {
      color: 'inherit';
    }

    '.language-shell .token:not(.comment)': {
      color: 'inherit';
    }

    '.language-css .token.function': {
      color: 'inherit';
    }

    '.token.deleted:not(.prefix), .token.inserted:not(.prefix)': {
      display: 'block';
      px: '$4';
      mx: '-$4';
    }

    '.token.deleted:not(.prefix)': {
      color: var('--removed');
    }

    '.token.inserted:not(.prefix)': {
      color: var('--added');
    }

    '.token.deleted.prefix, .token.inserted.prefix': {
      userselect: 'none';
    }
  }
}

我的 PostCSS 配置已经包含 postcss-preset-env，它应该支持 CSS 嵌套。我还安装了postcss-nested & postcss-css-variables，以防万一。

postcss.config.js

module.exports = {
  plugins: [
    'postcss-import',
    'tailwindcss',
    'postcss-flexbugs-fixes',
    'postcss-nested',
    'postcss-css-variables',
    [
      'postcss-preset-env',
      {
        autoprefixer: {
          flexbox: 'no-2009',
        },
        stage: 3,
        features: {
          'custom-properties': false,
          'nesting-rules': true,
        },
      },
    ],
  ],
}

此处转载→https://github.com/deadcoder0904/postcss-tailwind-next-bug

运行应用程序并检查 DOM 以查看样式面板中显示 Invalid property value 的 CSS 变量。

如何让 CSS 变量与 Tailwind CSS 一起使用？

Answer 1

完整的解决方案是删除 CSS 中的引号和对象符号。我从 CSS-in-JS 中复制了整个内容，但忘记删除引号和对象符号又名 :

tailwind.css

@import 'tailwindcss/base';
@import 'tailwindcss/components';
@import 'tailwindcss/utilities';

@layer base {
  :root {
    --font-mono: 'Fira Mono, monospace';

    --text-1: 12px;
    --text-2: 14px;

    --colors-black: rgba(19, 19, 21, 1);
    --colors-white: rgba(255, 255, 255, 1);
    --colors-gray: rgba(128, 128, 128, 1);
    --colors-blue: rgba(3, 136, 252, 1);
    --colors-red: rgba(249, 16, 74, 1);
    --colors-yellow: rgba(255, 221, 0, 1);
    --colors-pink: rgba(232, 141, 163, 1);
    --colors-turq: rgba(0, 245, 196, 1);
    --colors-orange: rgba(255, 135, 31, 1);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;

    --radii-1: 2px;
    --radii-2: 4px;
  }

  pre {
    --background: hsla(206 12% 89.5% / 5%);
    --text: var(--colors-white);
    --syntax1: var(--colors-orange);
    --syntax2: var(--colors-turq);
    --syntax3: var(--colors-pink);
    --syntax4: var(--colors-pink);
    --comment: var(--colors-gray);
    --removed: var(--colors-red);
    --added: var(--colors-turq);

    box-sizing: border-box;
    padding: var(--space-3);
    overflow: auto;
    font-family: var(--font-mono);
    font-size: var(--text-2);
    line-height: var(--space-3);
    white-space: pre;
    background-color: var(--background);
    color: var(--text);

    & > code {
      display: block;
    }

    .token.parameter {
      color: var(--text);
    }

    .token.tag,
    .token.class-name,
    .token.selector,
    .token.selector .class,
    .token.function {
      color: var(--syntax1);
    }

    .token.attr-value,
    .token.class,
    .token.string,
    .token.number,
    .token.unit,
    .token.color {
      color: var(--syntax2);
    }

    .token.attr-name,
    .token.keyword,
    .token.rule,
    .token.operator,
    .token.pseudo-class,
    .token.important {
      color: var(--syntax3);
    }

    .token.punctuation,
    .token.module,
    .token.property {
      color: var(--syntax4);
    }

    .token.comment {
      color: var(--comment);
    }

    .token.atapply .token:not(.rule):not(.important) {
      color: inherit;
    }

    .language-shell .token:not(.comment) {
      color: inherit;
    }

    .language-css .token.function {
      color: inherit;
    }

    .token.deleted:not(.prefix),
    .token.inserted:not(.prefix) {
      display: block;
      px: $4;
      mx: -$4;
    }

    .token.deleted:not(.prefix) {
      color: var(--removed);
    }

    .token.inserted:not(.prefix) {
      color: var(--added);
    }

    .token.deleted.prefix,
    .token.inserted.prefix {
      userselect: none;
    }
  }
}

由于某种原因，在我的一个项目中，postcss-preset-env 不起作用，所以我不得不在postcss.config.js 中使用postcss-nested 和postcss-css-variables。

postcss.config.js

module.exports = {
    plugins: [
        'postcss-import',
        'tailwindcss',
        'postcss-flexbugs-fixes',
        'postcss-nested',
        'postcss-custom-properties',
        'autoprefixer',
        // [
        //  'postcss-preset-env',
        //  {
        //      autoprefixer: {
        //          flexbox: 'no-2009',
        //      },
        //      stage: 3,
        //      features: {
        //          'custom-properties': true,
        //          'nesting-rules': true,
        //      },
        //  },
        // ],
    ],
}

但是postcss-preset-env 在另一个具有相同配置的项目中工作。我已经通过清理缓存、重新安装依赖项并复制粘贴相同的配置对其进行了多次测试，所以我很确定这不是我的项目的问题。