title: Install TAILWIND CSS in DJANGO
body: <p>I'm trying to install and use Tailwinds CSS in my Django project but I can't seems to succeed. This is what I'm doing right now</p>
  <ul>
  <li>I've create my project, app and
  added this in settings</li>
  </ul>
  <pre><code>STATIC_URL = '/static/'
  STATIC_ROOT = BASE_DIR/'static_root'
  STATICFILES_DIRS = [
      os.path.join(BASE_DIR, 'static'),
  ]
  
  MEDIA_URL = '/media/'
  MEDIA_ROOT = os.path.join(BASE_DIR, 'media')
  </code></pre>
  <p>this in urls</p>
  <pre><code>if settings.DEBUG:
      urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
      urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  </code></pre>
  <ul>
  <li>Create a static folder with inside a tailwind folder</li>
  <li>run while inside the tailwind folder this:</li>
  </ul>
  <pre><code>npm install -D tailwindcss
  npx tailwindcss init
  </code></pre>
  <ul>
  <li>edit</li>
  </ul>
  <p>tailwind.config.js like this</p>
  <pre><code>module.exports = {
      future: {
          removeDeprecatedGapUtilities: true,
          purgeLayersByDefault: true,
      },
      purge: {
          enabled: false, //true for production build
          content: [
              '../**/templates/*.html',
              '../**/templates/**/*.html',
              '../**/templates/**/**/*.html'
          ]
      },
      theme: {
          extend: {},
      },
      variants: {},
      plugins: [],
  }
  </code></pre>
  <p>-create a src folder with inside a style css with this code</p>
  <pre><code>@tailwind base;
  @tailwind components;
  @tailwind utilities;
  </code></pre>
  <p>-create a dist folder
  -run this code</p>
  <pre><code>npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch
  </code></pre>
  <p>And I get this warning that I don't understand how to avoid:</p>
  <pre><code>
  warn - No utility classes were detected in your source files. If this is unexpected, double-check the `content` option in your Tailwind CSS configuration.
  warn - https://tailwindcss.com/docs/content-configuration
  </code></pre>
  <p>Last in my app I'm creating this folder</p>
  <pre><code>---templates
   --- folder 1
    --- folder 2
     --- file.html
  </code></pre>
  <p>File HTML looks like this:</p>
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;link href=&quot;tailwind/dist/style.css&quot; rel=&quot;stylesheet&quot;&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;div class=&quot;container mx-auto flex px-5 py-24 items-center justify-center flex-col&quot;&gt;
      &lt;img class=&quot;lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded&quot; alt=&quot;hero&quot; src=&quot;https://dummyimage.com/720x600&quot;&gt;
      &lt;div class=&quot;text-center lg:w-2/3 w-full&quot;&gt;
        &lt;h1 class=&quot;title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900&quot;&gt;Microdosing synth tattooed vexillologist&lt;/h1&gt;
        &lt;p class=&quot;mb-8 leading-relaxed&quot;&gt;Meggings kinfolk echo park stumptown DIY, kale chips beard jianbing tousled. Chambray dreamcatcher trust fund, kitsch vice godard disrupt ramps hexagon mustache umami snackwave tilde chillwave ugh. Pour-over meditation PBR&amp;amp;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.&lt;/p&gt;
        &lt;div class=&quot;flex justify-center&quot;&gt;
          &lt;button class=&quot;inline-flex text-white bg-blue-500 border-0 py-2 px-6 focus:outline-none hover:bg-blue-600 rounded text-lg&quot;&gt;Button&lt;/button&gt;
          &lt;button class=&quot;ml-4 inline-flex text-gray-700 bg-gray-100 border-0 py-2 px-6 focus:outline-none hover:bg-gray-200 rounded text-lg&quot;&gt;Button&lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>And the page is without style. What step am I missing or am I doing wrong?</p>