传统 web 项目使用 tailwindcss

开发阶段使用 cdn

<script src="https://cdn.tailwindcss.com" type="text/javascript"></script>

因为这个js初次加载时较慢，不太适合线上正式项目使用。

1、可以摘出每个页面head里动态产生的style，各页面的css合并到一起去重本地化。
2、安装tailwindcss将已使用的class生成本地文件。

第2种方式：

a. 初始化 package.json

npm init -y

npm install -D tailwindcss
npx tailwindcss init

module.exports = {
    content: ["./template/tai/**/*.htm"],
    theme: {
        extend: {},
    },
    plugins: [],
}

content是想要收集class的模板文件路径。

/template/tai/css/tailwind.css

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

/* 也可以使用 @apply */
body{@apply bg-zinc-100}

npx tailwindcss -i ./template/tai/css/tailwind.css -o ./template/tai/css/output.css --watch

<link rel="stylesheet" href="/template/tai/css/output.css" />