Skip to content

Latest commit

 

History

History
45 lines (32 loc) · 1.72 KB

theme.md

File metadata and controls

45 lines (32 loc) · 1.72 KB

Theme

在模板中写 Tailwind CSS,利用 django-tailwind 生成 CSS(contest/theme/static/css/,这是 Django 项目的一个应用),然后通过模板中的{% tailwind_css %}引入。

开发

NPM_BIN_PATH

构建 Tailwind CSS 需要 Node.js 及 npm 或 pnpm

仓库中设置会用$PATH(Windows:还有$PATHEXT)上的pnpm;若有其它需求,请更改settings.py中的NPM_BIN_PATH

自动重新构建

开发时可以监视源代码,修改时自动重新构建。

just serve会监视一般源代码,但对 theme 不知情;just watch-theme会监视模板生成 CSS,进而让浏览器页面刷新。因此,开发时需要两个进程同时工作。

根据 Django 文档,添加文件不会让服务器重启。如果您是初次构建前端,可能需要手动重启服务器。

示例

以下是初始化 django-tailwind 时生成的base.html

{% load static tailwind_tags %}
<!DOCTYPE html>
<html lang="en">
	<head>
    <title>Django Tailwind</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		{% tailwind_css %}
	</head>

	<body class="bg-gray-50 font-serif leading-normal tracking-normal">
		<div class="container mx-auto">
			<section class="flex items-center justify-center h-screen">
				<h1 class="text-5xl">Django + Tailwind = ❤️</h1>
			</section>
		</div>
	</body>
</html>