将 tailwindcss 与 CSS 模块相结合答案

【问题标题】：Combine tailwindcss with CSS modules将 tailwindcss 与 CSS 模块相结合
【发布时间】：2021-04-23 03:48:57
【问题描述】：

我按照本教程安装了 tailwindcss：https://tailwindcss.com/docs/guides/create-react-app（使用 Craco 而不是 postcss）。在我包含每个代码sn-p并重新加载网页后，所有默认的CSS样式都消失了（h1，flex等）是因为我没有将整个项目正确配置tailwindcss还是所有默认的都是正常的样式规则已删除，您必须指定基础。通过配置我的意思是你只需要添加：

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

仅在 index.css 文件中，而不是每个 .css 组件文件中。

【问题讨论】：

Tailwind 设置了它自己的基本样式。所以你做对了一切。更多信息可以在这里找到 - tailwindcss.com/docs/preflight

标签： css reactjs create-react-app styling tailwind-css

【解决方案1】：

Tailwind Preflight 删除标题、块引用、段落等元素的所有默认边距。

@tailwind base; /* Preflight will be injected here */

@tailwind components;

@tailwind utilities;

如果您想坚持使用默认值，则可以禁用 Preflight

  // tailwind.config.js
  module.exports = {
    corePlugins: {
     preflight: false,
    }
  }

【讨论】：