title: Tailwind is not refreshing when working with vite + react
body: <p>I started a project with vite + react + typescript and installed tailwind. Everything was working smoothly until I created a subfolder in /src and added the styles in files inside the subfolder. The auto build or watch mode for tailwind stopped working.</p>
  <p>For example when the styles were in /src/App.tsx everything works fine, but if I add styles in /src/components/Header.tsx and import that component in App.tsx the tailwind css file is not getting built automatically.</p>
  <p>Restarting the server does apply the new styles properly.</p>
  <p>This is what my files look like:</p>
  <p>tailwind.config.js</p>
  <pre><code>module.exports = {
      content: [&quot;./index.html&quot;, &quot;./src/**/*.{html,ts,tsx}&quot;, &quot;./src/*.{ts,tsx}&quot;],
      theme: {
          borderColor: {
              black: &quot;#000&quot;,
          },
          borderWidth: {
              1: 1,
          },
          extend: {
              colors: {
                  custom1: &quot;#F5A&quot;,
              },
          },
      },
      plugins: [],
  };
  </code></pre>
  <p>postcss.config.js</p>
  <pre><code>module.exports = {
    plugins: {
      tailwindcss: {},
      autoprefixer: {},
    },
  }
  </code></pre>
  <p>src/App.tsx</p>
  <pre><code>import &quot;./index.css&quot;;
  import Users from &quot;./components/Users&quot;;
  import Header from &quot;./layout/header&quot;;
  
  function App() {
      return (
          &lt;div&gt;
              &lt;Header /&gt;
              &lt;Users /&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p>src/layout/Header.tsx</p>
  <pre><code>import React from &quot;react&quot;;
  
  function Header() {
      return (
          &lt;div className=&quot;bg-custom1&quot;&gt;
              &lt;h1 className=&quot;text-5xl p-6&quot;&gt;Welcome to my app!&lt;/h1&gt;
              &lt;nav&gt;
                  &lt;ul&gt;
                      &lt;li&gt;
                          &lt;a href=&quot;/addUser&quot;&gt;Add User&lt;/a&gt;
                      &lt;/li&gt;
                      &lt;li&gt;
                          &lt;a href=&quot;/addUser&quot;&gt;Users&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
          &lt;/div&gt;
      );
  }
  
  export default Header;
  </code></pre>