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

浏览：1053 | 发布于 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>

6、tailwindcss的5个断点

断点前缀	最小宽度	CSS
sm	640px	@media (min-width: 640px) { ... }
md	768px	@media (min-width: 768px) { ... }
lg	1024px	@media (min-width: 1024px) { ... }
xl	1280px	@media (min-width: 1280px) { ... }
2xl	1536px	@media (min-width: 1536px) { ... }

7、tailwindcss常见前缀

| 前缀 | 含义 | 示例用法 |
|---------------|----------------------------------------|------------------------------|
| bg- | 背景颜色 | bg-blue-500 |
| text- | 文本颜色 | text-red-600 |
| border- | 边框颜色 | border-gray-300 |
| p- | 内边距（padding） | p-4（表示 1rem 的内边距） |
| m- | 外边距（margin） | m-2（表示 0.5rem 的外边距）|
| h- | 高度 | h-64（表示 16rem 的高度） |
| w- | 宽度 | w-full（表示 100% 的宽度） |
| flex- | Flexbox 相关样式 | flex-row（表示横向排列） |
| grid- | Grid 相关样式 | grid-cols-3（表示三列） |
| rounded- | 圆角 | rounded-lg（表示大圆角） |
| shadow- | 阴影 | shadow-md（表示中等阴影） |
| opacity- | 不透明度 | opacity-50（表示 50% 不透明）|
| overflow- | 溢出处理 | overflow-hidden（隐藏溢出） |
| cursor- | 鼠标光标样式 | cursor-pointer（指针光标） |

2、thinkphp项目中使用tailwindcss

2.1、在合适的位置下载tailwindcss standalone cli

比如，我放在项目根目录下。可以在项目根目录，也可以在其它目录，只要等下命令行的路径能对应起来就行。

2.2、在合适的位置创建input.css

我选择输入文件为 public/static/default/css/input.css , 输出文件为 public/static/default/css/style.css 。

2.3、在input.css中导入tailwindcss

@import "tailwindcss";

2.4、启动tailwindcss

./tailwindcss -i public/static/default/css/input.css -o public/static/default/css/style.css --watch

在tailwindcss cli目录执行此命令，主要是文件目录对应问题，其它没啥。

2.5、在模版文件中引入style.css并测试

<div class="bg-blue-500 text-white p-4">Hello, Tailwind!</div>

如果tailwindcss顺利引入，页面会显示如下的结果：

后面，每次开发这个项目时执行启动命令即可。

本文链接： http://wenge365.com/a/N2tBQTBJbDJFaUl0bDVXbENiWFNsUT09.html