title: How Do I Override Tailwind Base With SASS/SCSS
body: <h1>My Issue</h1>
  
  <p>My h3 font-weight override doesn't appear to work.  </p>
  
  <pre><code>@tailwind base;
  
  h3{
      @apply font-thin;
  }
  
  @tailwind components;
  @tailwind utilities;
  
  
  h3{
      @apply font-thin;
  }
  </code></pre>
  
  <p>As you can see in the image, the layout.css coming from Tailwind takes precedence over my styles.scss</p>
  
  <p><a href="https://i.stack.imgur.com/cGAIk.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cGAIk.png" alt="enter image description here"></a></p>
  
  <h1>Some more background:</h1>
  
  <ul>
  <li>Gatsby project with PostCSS and SASS plugin (I've copied the relevant gatsby-config.js here:</li>
  </ul>
  
  <pre><code>module.exports = {
      plugins: [
        `gatsby-plugin-postcss`,
        {
          resolve: `gatsby-plugin-sass`,
          options: {
            postCssPlugins: [
              require("tailwindcss"),
              require("./tailwind.config.js"), // Optional: Load custom Tailwind CSS configuration
            ],
          }
        },
      ],
    }
  
  </code></pre>