如何使用 SASS/SCSS 覆盖 Tailwind Base

Posted

技术标签:

【中文标题】如何使用 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 中删除

【讨论】:

以上是关于如何使用 SASS/SCSS 覆盖 Tailwind Base的主要内容,如果未能解决你的问题,请参考以下文章