开始使用TailwindCSS4.x新建一个项目

泽泽 2025年02月11日编辑

tailwindcss 4.0已经正式发布。安装方式也有一些改变，步骤简单了不少。虽然官方也有安装说明，但是感觉不太适合我，所以自己微调了下，用本文做个记录。

安装 Tailwind CSS

tailwindcss 通过 npm 安装。

npm install tailwindcss @tailwindcss/cli

将 `Tailwind` 指令添加到您的 `CSS`

创建一个css文件，位置随意，比如src/main.css,并且将内容修改为如下：

@import "tailwindcss";

开始在您的 `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="/src/tw.css" rel="stylesheet">
</head>
<body>
  <h1 class="text-3xl font-bold underline">
    Hello world!
  </h1>
</body>
</html>

创建构建命令

运行以下命令

npm init -y

现在打开 package.json 文件，添加以下运行脚本：

"scripts": {
  "build": "tailwindcss -i ./src/main.css -o ./src/tw.css --watch"
}

这时候只要运行npm run build就可以自动监听你的页面改动并且实时编译了。

自动刷新HTML文件

这是个题外话，不属于Tailwind CSS的范畴，如果你在写静态页面的时候，需要每次修改html页面，浏览器就自动刷新这个页面，那么只需要在vscode内搜索Live Preview并且安装，之后在你需要预览的页面，右键，选择Live Preview：Show Preview即可。

生成min版css

需要安装minify插件

  "scripts": {
    "build:css": "tailwindcss -i ./src/main.css -o ./src/tw.css",
    "build:css:min": "tailwindcss -i ./src/main.css -o ./src/tw.min.css --minify --watch",
    "build": "npm run build:css:min"
  },