TailwindCSS Autoprefixer 不工作 |柔性答案

【问题标题】：TailwindCSS Autoprefixer not working | flexTailwindCSS Autoprefixer 不工作 |柔性
【发布时间】：2023-01-03 07:43:34
【问题描述】：

嗨，我在我的反应项目中使用了 tailwind，但是当我构建项目时，autoprefixer 无法正常工作

tailwind.config.js：

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./src/**/*.{html,js}"],
  theme: {
    container: {
      center: true,
      padding: "1rem",
    },
    extend: {},
    },
  },
  plugins: [
     require('autoprefixer')
  ]
};

我想让 autoprefixer 为每个 flex 属性工作，例如：

.flex{
    display: flex;
}

到

.flex{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

浏览器列表 package.json：

{
  ....

  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

  ...
}

我希望所有 flex 属性都适用于所有浏览器，因为，例如，在 Safari 浏览器中的旧手机上，差距属性无法正常工作。

【问题讨论】：

标签： reactjs tailwind-css autoprefixer

【解决方案1】：

首先，你需要安装PostCSS并像这里一样设置：

将 Tailwind CSS 作为 PostCSS 插件安装是将其与构建工具（如 webpack、Rollup、Vite 和 Parcel）集成的最无缝方式。 Tailwind documentation

第二步，减少来自>0.2%到>0.01%在这两种环境中。

浏览器列表 package.json：
{
  ....

  "browserslist": {
    "production": [
      ">0.01%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      ">0.01%",
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },

  ...
}
最后，您可以从中删除 autoprefixer 插件tailwind.config.js.

【讨论】：

【解决方案2】：

可能在 tailwind.config.js 中缺少自定义扩展名，如 .svelte。由于它忽略了 .svelte 文件，它没有看到 flex 类，也没有将它包含在 output.css 文件中。

以下更改为我修复了它：

【讨论】：

【解决方案3】：

在 index.css 文件或导入 tailwind 的地方，

@tailwind base;
@tailwind components;
@tailwind utilities;

您可以使用扩展组件和实用程序

@layer utilities {
    .flex {
        ...
    }
}

【讨论】：