在 DJANGO 中安装 TAILWIND CSS答案

【问题标题】：Install TAILWIND CSS in DJANGO在 DJANGO 中安装 TAILWIND CSS
【发布时间】：2022-10-24 11:40:11
【问题描述】：

我正在尝试在我的 Django 项目中安装和使用 Tailwinds CSS，但我似乎无法成功。这就是我现在正在做的

我已经创建了我的项目、应用程序和在设置中添加了这个

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 文件夹中运行：

npm install -D tailwindcss
npx tailwindcss init

编辑

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

- 使用此代码在样式 css 中创建一个 src 文件夹

@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

文件 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>

页面没有样式。我错过了什么步骤或者我做错了什么？

【问题讨论】：

标签： html django tailwind-css

【解决方案1】：

有顺风目录吗？

在您请求的 html 中

但不要在 npm 命令中创建它

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

【讨论】：

【解决方案2】：

您可能错过了放置静态文件目录（STATICFILES_DIRS) 在您的 settings.py 中。我也没有在文档中看到这一点，但这就是我如何做到这一点的：

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

如果您使用主题作为应用名称，它可能是：

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

【讨论】：