'Install TAILWIND CSS in DJANGO

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

  • I've create my project, app and added this in settings
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')

this in urls

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  • Create a static folder with inside a tailwind folder
  • run while inside the tailwind folder this:
npm install -D tailwindcss
npx tailwindcss init
  • edit

tailwind.config.js like this

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: [],
}

-create a src folder with inside a style css with this code

@tailwind base;
@tailwind components;
@tailwind utilities;

-create a dist folder -run this code

npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch

And I get this warning that I don't understand how to avoid:


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

Last in my app I'm creating this folder

---templates
 --- folder 1
  --- folder 2
   --- file.html

File HTML looks like this:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="tailwind/dist/style.css" rel="stylesheet">
</head>
<body>
  <div class="container mx-auto flex px-5 py-24 items-center justify-center flex-col">
    <img class="lg:w-2/6 md:w-3/6 w-5/6 mb-10 object-cover object-center rounded" alt="hero" src="https://dummyimage.com/720x600">
    <div class="text-center lg:w-2/3 w-full">
      <h1 class="title-font sm:text-4xl text-3xl mb-4 font-medium text-gray-900">Microdosing synth tattooed vexillologist</h1>
      <p class="mb-8 leading-relaxed">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;B pickled ennui celiac mlkshk freegan photo booth af fingerstache pitchfork.</p>
      <div class="flex justify-center">
        <button class="inline-flex text-white bg-blue-500 border-0 py-2 px-6 focus:outline-none hover:bg-blue-600 rounded text-lg">Button</button>
        <button class="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">Button</button>
      </div>
    </div>
  </div>
</body>
</html>

And the page is without style. What step am I missing or am I doing wrong?

htmldjangotailwind-css


Solution 1:[1]

is there a tailwind directory?

in the html you request

but dont create that in the npx command

npx tailwindcss -i ./src/style.css -o ./dist/style.css --watch

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 andylondon

Related Questions