title: How to use @apply directive of tailwind in any .scss file instead of only using it main tailwind file(in React)?
body: <p>I am working in react with typescript and tailwindcss.</p>
  <p>What I want is that instead of using <strong>@apply</strong> directive in main tailwind.css file (<em>the file which conatins @tailwind base, @tailwind components, etc</em>), I want to use it in any .scss file.</p>
  <p>For example, in react whenever I create a component, I create a folder and an inside it I create a index.tsx file and a .scss file. I want to use @apply directive in that .scss file.  In this way, it will be easy to work and debug because both the associated files will be inside the same folder. How can I achieve that ??</p>
  <p>I have shown my basic folder structure below.</p>
  <p><strong>Folder structure:</strong></p>
  <p><em>src &gt; components &gt; Header &gt; Header.tsx</em></p>
  <pre><code>import React from &quot;react&quot;;
  import styles from &quot;./Header.module.scss&quot;;
  
  interface Props {}
  
  const Header: React.FC&lt;Props&gt; = (props) =&gt; {
    return &lt;div className={styles.headerTag}&gt;Header part here&lt;/div&gt;;
  };
  
  export default Header;
  </code></pre>
  <p><em>src &gt; components &gt; Header &gt; Header.module.scss</em></p>
  <pre><code>// what to import so that I can use tailwind like this
  
  .headerTag {
    @apply text-8xl font-bold bg-gray-500;
  }
  
  </code></pre>