Tailwind CSS 从 3.x 升级到 4.x 的关键改进摘要：

  • 性能优化：编译速度更快，生成的 CSS 文件更小，减少重复样式。

  • 容器查询支持：支持 @container，增强响应式布局能力。

  • ARIA 和数据属性支持：新增对 aria- 和 data- 属性状态的工具类支持。

  • 默认断点增强：提供更灵活的断点配置选项。

  • 动画改进：优化 transition 和 animation 的工具类，使用更直观。

  • JIT 编译增强：支持更复杂的动态类名生成，编译效率提升。

  • 排版插件升级：改进 @tailwindcss/typography 插件，默认样式更丰富。

  • 配置简化：优化 tailwind.config.js 格式，更易于维护和调整。

  • 插件兼容性：改进插件系统，确保官方和第三方插件更易集成。

  • 移除废弃功能：旧版中的一些弃用字段已被完全移除。

安装Node.JS

前往 Node.js 官方网站 并下载适合你操作系统的 Node.js 安装程序。

检查Node.js

node -v

检查NPM

npm -v

更新NPM

npm install -g npm

Tainlwind安装配置

从头开始使用 Tailwind CSS 的最简单、最快捷的方法是使用 Tailwind CLI 工具。

创建package.json

这将创建一个json文件

npm init -y

安装tailwind

npm install tailwindcss @tailwindcss/postcss postcss

创建 postcss.config.mjs

export default {
  plugins: {
    "@tailwindcss/postcss": {},
  }
}

创建xxxxx.css文件

由于Tailwind需要监听一个CSS文件，我们需要配置它，支持将自定义样式写在里面

@import "tailwindcss";

配置Tailwind.config.js

注意：V4 版本中，此配置为非必须项，也可作为自定义使用

官方默认配置的生成

npx tailwindcss init --full

配置基于Halo主题而配置，如果你是使用其他部分，请在 content 中修改项目地址即可。

module.exports = {
  content: [
    "./templates/**/*.html",
    "./templates/assets/**/*.js"
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

扫描并构建CSS

注意：V4 版本中 @tailwindcss/cli 替换 tailwind

通过监听content 中设置的项目地址，监听类名并生成css文件

npx @tailwindcss/cli -i ./src/input.css -o ./templates/assets/css/style.css --watch

在HTML中编写样式

<!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>

高级配置

但往往每次使用扫描构建太麻烦了，我们可以简化代码package.json

每次使用 npm run tailwind 快速构建

 "scripts": {
    "tailwind": "npx @tailwindcss/cli -i ./src/input.css -o ./templates/assets/css/style.css --watch"
  },

Prettier插件

安装插件

检查是否存在 Prettier插件

npm list prettier-plugin-tailwindcss

安装 Prettier 插件

npm install -D prettier prettier-plugin-tailwindcss

创建.prettier文件

{
  "plugins": ["prettier-plugin-tailwindcss"],
  "tailwindConfig": "./tailwind.config.js"
}