Tailwind CSS

简介

Tailwind CSS 是一个功能优先的 CSS 框架，通过预定义的工具类直接在 HTML 中构建自定义设计。无需编写传统 CSS 文件，开发效率极高，生成的 CSS 体积通过 Purge 可以很小。

特性

• 功能优先的设计理念
• 丰富的预定义工具类
• 响应式设计内置
• 暗色模式支持
• 自定义主题配置
• Tree-shaking 优化

安装

# 安装
npm install -D tailwindcss postcss autoprefixer
# 初始化配置
npx tailwindcss init -p
# 在 CSS 中引入
# @tailwind base;
# @tailwind components;
# @tailwind utilities;

常用命令

# 开发模式（监听文件变化）
npx tailwindcss -i ./src/input.css -o ./dist/output.css --watch
# 生产构建（压缩）
npx tailwindcss -i ./src/input.css -o ./dist/output.css --minify
# 使用 CDN（快速原型）
#