【问题标题】：How Do I Override Tailwind Base With SASS/SCSS如何使用 SASS/SCSS 覆盖 Tailwind Base
【发布时间】：2020-07-09 14:09:00
【问题描述】：

我的问题

我的 h3 字体粗细覆盖似乎不起作用。

@tailwind base;

h3{
    @apply font-thin;
}

@tailwind components;
@tailwind utilities;


h3{
    @apply font-thin;
}

如图所示，来自 Tailwind 的 layout.css 优先于我的 styles.scss

更多背景知识：

带有 PostCSS 和 SASS 插件的 Gatsby 项目（我在这里复制了相关的 gatsby-config.js：

module.exports = {
    plugins: [
      `gatsby-plugin-postcss`,
      {
        resolve: `gatsby-plugin-sass`,
        options: {
          postCssPlugins: [
            require("tailwindcss"),
            require("./tailwind.config.js"), // Optional: Load custom Tailwind CSS configuration
          ],
        }
      },
    ],
  }

【问题讨论】：

浏览 Tailwind 文档，不知道哪里出错了：tailwindcss.com/docs/preflight#extending-preflight

标签： sass gatsby postcss tailwind-css

【解决方案1】：

哦，我发现了问题，layout.css 不是来自 Tailwinds ......它是来自 Gatsby 入门主题的样板。

找到它并将其从 src/components/layout.js 中删除

【讨论】：