title: How to add TailwindCSS to Vue3 apps relying on the Vue CLI?
body: <p>Based on the guides on <a href="https://tailwindcss.com/docs/installation/framework-guides" rel="nofollow noreferrer">how to setup TailwindCSS for specific frameworks</a> I'm trying to add it to my new Vue 3 app. I'm not using Vite yet but couldn't find a Vue CLI guide.</p>
  <p>I know there is the <a href="https://github.com/forsartis/vue-cli-plugin-tailwind/tree/master" rel="nofollow noreferrer">vue-cli-plugin-tailwind</a> solving this but the current version is in beta so I would like to do it on my own for now.</p>
  <p>First I created a Vue 3 app using the Vue CLI. After that I followed the <a href="https://tailwindcss.com/docs/guides/angular" rel="nofollow noreferrer">guide for Angular apps</a></p>
  <ul>
  <li><code>npm install -D tailwindcss postcss autoprefixer</code></li>
  <li><code>npx tailwindcss init</code></li>
  <li>Inside the <em>tailwind.config.js</em>  file use this content</li>
  </ul>
  <p>.</p>
  <pre><code>  content: [
      &quot;./public/index.html&quot;,
      &quot;./src/**/*.{vue,js,ts,jsx,tsx}&quot;,
    ],
  </code></pre>
  <ul>
  <li>Create a new file <em>./src/styles.css</em></li>
  </ul>
  <p>.</p>
  <pre><code>@tailwind base;
  @tailwind components;
  @tailwind utilities;
  </code></pre>
  <ul>
  <li>Inside the <em>main.ts</em> file add <code>import &quot;./styles.css&quot;;</code></li>
  <li>Add the following code to the <em>App.vue</em> file</li>
  </ul>
  <p>.</p>
  <pre><code>  &lt;div class=&quot;bg-red-500&quot;&gt;
      Background should be red
    &lt;/div&gt;
  </code></pre>
  <p>Unfortunately the background is not red.</p>
  <p>Does someone know how to setup the project?</p>