当前位置：首页 > news >正文

tailwindcss 写原生html

news 2025/8/8 5:08:05

需要注意：

html文件中引入的是output.css input.css写那三行预留的就可以了

打包的时候只要打包html output.css img文件夹句ok，其他都不用

原理是运行时生产output.css文件，直接

【注意！注意！注意！class="xxxx" 不要用className=“Xxxxx‘ 那是react的写法不行的】

要用

使用 npm 或者 pnpm 安装

# 使用 npm 安装
npm init 
npm i -D tailwindcss postcss autoprefixer

# 使用 pnpm，节省硬盘空间
npm i -g pnpm
pnpm init 
pnpm i -D tailwindcss postcss autoprefixer

生成配置文件

# 初始化配置文件
npx tailwindcss init -p

编辑 tailwind.config.js

// tailwind.config.js/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./**/*.html"], // 根据实际情况设置路径theme: {extend: {},},plugins: [],
};

新建样式文件（例如input.css）并写入：

// input.css@tailwind base;
@tailwind components;
@tailwind utilities;

在页面中引用最终样式，例如output.css

// index.html<link rel="stylesheet" href="./output.css" />

在终端运行命令，可选参数 –minify 进行压缩：

npx tailwindcss build -i input.css -o output.css --watch --minify

然后编辑页面标签里写入预置的样式名，

// index.html...
<div class="container mx-auto"></div>
...

或者编辑input.css再保存文件即可。

// input.css@tailwind base;
@tailwind components;
@tailwind utilities;body {@apply bg-slate-200;
}

也可以改成编辑package.json

// package.json...
"script": {
"dev": "npx tailwindcss -i input.css -o output.css --watch",
"build": "npx tailwindcss -i input.css -o output.css --minify"
}
...

编辑时运行（必须保持运行，如果出错导致自动退出则需重新运行）：