Установите TAILWIND CSS в DJANGO

Я пытаюсь установить и использовать Tailwinds CSS в моем Django проекте, но, похоже, у меня ничего не получается. Вот что я делаю сейчас

  • Я создал свой проект, приложение и добавил это в настройках
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')

это в урлах

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL, document_root=settings.MEDIA_ROOT)
  • Создайте статическую папку внутри папки tailwind
    • .
  • запустите внутри папки tailwind следующее:
npm install -D tailwindcss
npx tailwindcss init
  • edit

tailwind.config.js следующим образом

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

создайте папку src внутри стиля css с помощью этого кода

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

создайте папку dist. -запустить этот код

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

И я получаю это предупреждение, которое я не понимаю, как избежать:


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

Последним в моем приложении я создаю эту папку

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

File HTML выглядит следующим образом:

<!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>

А страница остается без стиля. Какой шаг я пропустил или делаю неправильно?

существует ли каталог tailwind?

в запрашиваемом вами html

но не создавайте его в команде npx

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

Возможно, вы не указали каталог статических файлов (STATICFILES_DIRS) в файле settings.py. Я также не видел этого в документации, но вот как я это сделал:

STATICFILES_DIRS = [BASE_DIR / '../appname/static']

если вы использовали тему в качестве имени приложения, это может быть:

STATICFILES_DIRS = [BASE_DIR / '../theme/static']
Вернуться на верх