如何使用 SASS/SCSS 覆盖 Tailwind Base

Posted 2023-03-06

【中文标题】如何使用 SASS/SCSS 覆盖 Tailwind Base

【英文标题】：How Do I Override Tailwind Base With SASS/SCSS

【发布时间】：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

【参考方案1】：

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

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