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

Tailwind CSS 使用简介

news 2025/7/11 2:55:34

参考网站安装 - Tailwind CSS 中文网

号称是开始使用 Tailwind CSS

通过 npm 安装 tailwindcss，并创建你的 tailwind.config.js 文件。

npm install -D tailwindcss
npx tailwindcss init

在 tailwind.config.js 文件中添加所有模板文件的路径。

/** @type {import('tailwindcss').Config} */
module.exports = {content: ["./src/**/*.{html,js}"],theme: {extend: {},},plugins: [],
}

将 Tailwind 指令添加到你的 CSS

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

启动 Tailwind CLI 构建进程

运行 CLI 工具以扫描模板文件中的类并构建 CSS。

npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

开始在你的 HTML 中使用 Tailwind

将已编译的 CSS 文件添加到 <head> 并开始使用 Tailwind 的工具类来设置内容的样式。

<!doctype html>
<html>
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link href="./output.css" rel="stylesheet">
</head>
<body><h1 class="text-3xl font-bold underline">Hello world!</h1>
</body>
</html>

查看全文

http://www.lryc.cn/news/515578.html