tailwindcss standalone cli 安装以及初体验感受

浏览：20 | 发布于 2025-09-17

1、standalone CLI 安装

# Example for macOS arm64
curl -sLO https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.13/tailwindcss-macos-arm64
chmod +x tailwindcss-macos-arm64
mv tailwindcss-macos-arm64 tailwindcss

如果curl下载不下来，可以改用wget

wget https://github.com/tailwindlabs/tailwindcss/releases/download/v4.1.13/tailwindcss-macos-arm64

还可以通过网页直接从github下载，但是我这里会报错，显示文件已损坏，所以最终采用wget方式成功安装。

2、导入Tailwind到input.css

@import "tailwindcss";

3、启动观察器

./tailwindcss -i static/input.css -o static/output.css --watch

4、为正式环境编译最小化css

./tailwindcss -i static/input.css -o static/output.css --minify

5、创建基础Html页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="../static/output.css" rel="stylesheet" />
</head>
<body>
    
</body>
</html>

本文链接： https://haitaobeta.com/a/N2tBQTBJbDJFaUl0bDVXbENiWFNsUT09.html