有(至少)3种不同的方法可以正确地在Django中安装Tailwind。
如果您的项目需要使用node(例如:添加插件,如Daisy UI,或者有一个SPA),这是首选方法。
cd your-django-folder; mkdir jstoolchain; cd jstoolchain
npm init -y
npm install -D tailwindcss
npx tailwindcss init
tailwind.config.js
中配置模板路径,通过指定正确的位置解析您的内容。根据您的模板所在的位置,这可能会略有不同,可以像下面这样:...
content: ["../templates/**/*.{html,js}"],
...
@tailwind base;
@tailwind components;
@tailwind utilities;
package.json
文件中,你可以准备npm脚本来简化构建/压缩任务的执行(根据你的Django static
文件夹位置调整路径):"scripts": {
// use in local environment
"tailwind-watch": "tailwindcss -i ../input.css -o ../static/css/output.css --watch",
// use in remote environment
"tailwind-build": "tailwindcss -i ../input.css -o ../static/css/output.css --minify"
}
{% load static %}
<head>
<link rel="stylesheet" href="{% static "css/output.css" %}">
</head>
npm run tailwind-build
脚本。这将构建输出并删除未使用的类,以确保文件大小更小。现在为了简化开发,当更改和保存HTML文件时,需要自动重新加载django开发服务器。 处理这个问题的最佳扩展是Django-browser-reload。 只需按照设置说明进行操作,它将如预期般工作。
如果您的项目根本不需要node(例如:前端没有SPA,不需要像daisyUI这样的插件等),则这是首选方法。
您可以按照官方说明手动安装它,或者使用以下脚本自动化安装:
#!/bin/sh
set -e
TAILWIND_ARCHITECTURE=arm64 # chose the right architecture for you
TAILWIND_VERSION=v3.1.4 # chose the right version
SOURCE_NAME=tailwindcss-linux-${TAILWIND_ARCHITECTURE}
OUTPUT_NAME=tailwindcss
DOWNLOAD_URL=https://github.com/tailwindlabs/tailwindcss/releases/download/${TAILWIND_VERSION}/${SOURCE_NAME}
curl -sLO ${DOWNLOAD_URL} && chmod +x ${SOURCE_NAME}
mv ${SOURCE_NAME} ${OUTPUT_NAME} # rename it
mv ${OUTPUT_NAME} /usr/bin # move it to be used globally in a folder already in the PATH var
Django-Tailwind CSS 是一个非常好的包,它对我很有用。
请按照文档操作,你就没问题了。
在开始之前,请确保系统中已经正确安装了npm
。
快速开始:
pip install django-tailwind
或者,您可以下载或克隆此repo并运行: pip install -e ..
将tailwind
添加到settings.py中的INSTALLED_APPS:
创建一个与tailwind兼容的Django app,我喜欢称之为theme
:
python manage.py tailwind init theme
将您新创建的theme
app添加到settings.py的INSTALLED_APPS中。
在settings.py中注册tailwind app,添加以下字符串:
TAILWIND_APP_NAME = 'theme'
python manage.py tailwind install
python manage.py tailwind start
Django Tailwind 自带一个简单的 base.html 模板,可以在 yourtailwindappname/templates/base.html 找到。您可以随时扩展它或删除它,如果您有自己的布局。
如果您没有使用 Django Tailwind 提供的 base.html 模板,请将 styles.min.css 添加到您自己的 base.html 模板文件中:
现在您应该能够在您的 HTML 中使用 Tailwind CSS 类了。
要构建生产版本的 CSS,请运行:
python manage.py tailwind build
对于实时重新加载,请使用以下命令处理:
python manage.py tailwind start
对于构建过程,请使用以下命令处理:
python manage.py tailwind build
有关 PurgeCSS 过程,请参见 文档 中的简单示例。
对于 NPM 路径配置错误(特别是在 Windows 上),请参见 文档。
1. 前往你期望安装的文件夹。在我的情况下:
mkdir static/css/tailwind
cd static/css/tailwind
2. 创建package.json文件:
npm init -y
3. 通过npm安装Tailwind:
npm i tailwindcss
4. 创建一个CSS文件,并从官方Tailwind文档中添加代码:
@tailwind base;
@tailwind components;
@tailwind utilities;
5. 打开 package.json 文件,并对 "scripts" 进行如下更改:
"scripts": {
"build:css": "tailwind build tw.css -o ../tailwind.css"
},
6. 运行编写的脚本
npm run build:css
tw.css
是我们在第四步中创建的文件的位置。而 ../tailwind.css
则是我们希望 Tailwind css 输出的文件位置。因此,在运行此命令后,我们将获得一个包含 Tailwind 基础样式、组件和实用程序的 tailwind.css
文件。
inplace
html 样式。main.scss
文件,您可以在其中添加自定义样式。克隆该项目
https://github.com/MindMansion/DjangoTailwindStarter
从您的 Django 项目目录开始
mkdir theme
cd theme
npx degit https://github.com/MindMansion/DjangoTailwindStarter/theme
npm install
npm run build
npm run watch
你的静态目录中应该准备好使用一个 global.css
文件。
python manage.py tailwind start
进行初始化。python -m pip install django-tailwind
python -m pip install git+https://github.com/timonweb/django-tailwind.git
INSTALLED_APPS = [ 'tailwind', ]
python manage.py tailwind init
INSTALLED_APPS = [ 'tailwind', 'theme' ]
将生成的“theme”应用程序注册,通过在settings.py文件中添加以下行:
TAILWIND_APP_NAME = 'theme'
确保INTERNAL_IPS列表存在于settings.py文件中,并包含127.0.0.1
IP地址:
INTERNAL_IPS = [ "127.0.0.1", ]
安装Tailwind CSS依赖项,运行以下命令:
python manage.py tailwind install
Django Tailwind带有一个简单的base.html
模板,位于您的tailwind_app_name/templates/base.html
。如果您已经有了布局,可以随时扩展或删除它。
如果您没有使用Django Tailwind附带的base.html模板,请将{% tailwind_css %}
添加到base.html模板中:
{% load tailwind_tags %}
<head>
{% tailwind_css %}
</head>
{% tailwind_css %}
标签包括Tailwind的样式表。
让我们也添加并配置django_browser_reload,在开发模式下自动刷新页面和CSS。在settings.py中将其添加到INSTALLED_APPS中:
INSTALLED_APPS = ['tailwind', 'theme', 'django_browser_reload']
仍然在settings.py中,添加中间件:
MIDDLEWARE = ["django_browser_reload.middleware.BrowserReloadMiddleware",]
中间件应该在任何编码响应的中间件之后列出,例如Django的GZipMiddleware。当DEBUG为True时,中间件会自动在HTML响应前插入所需的脚本标记。
在root url.py中包含django_browser_reload URL:
from django.urls import include, path
urlpatterns = [path("__reload__/", include("django_browser_reload.urls")),]
最后,在HTML中应该能够使用Tailwind CSS类。通过在终端中运行以下命令启动开发服务器:
python manage.py tailwind start
我知道你提到要排除CDN,但我点击了这个页面来寻找在我的Django项目中使用tailwind的方法,而不知道有一个CDN(我也花了几个小时来调试)。所以对于那些通过搜索找到这个问题的人,请查看https://tailwindcss.com/docs/installation/play-cdn。
package.json
,而不是packages.json
(即没有 's')。 - mathandy