SuperAPI AI 工具集

tailwind-impl-build-postcss-cli

前端与建站

查看项目

更新于 10-16 06:18

技能介绍

用途:在非 Vite 构建环境中把 Tailwind CSS 接入项目,提供两条路径——PostCSS 插件(可嵌入任何运行 PostCSS 的打包器)与独立 CLI(无打包器或非 Node 后端时使用)。同时覆盖 Tailwind v3 与 v4,因为包名、配置文件形态和 CSS 入口语法在版本间不同,选错组合会静默产出空 CSS。

主要能力:给出 v4 与 v3 的最小 PostCSS 与 CLI 配置示例;提供 PostCSS 与 CLI 的选择决策树、v3 与 v4 的选择决策树;列出 CLI 完整参数(--input/-i、--output/-o、--watch/-w、--minify/-m、--config/-c 等)及版本差异;说明 @import "tailwindcss" 与 @tailwind 三件套的对应关系;强调 autoprefixer 在 v3 必需、v4 绝不可加;附框架集成速查表与常见首次运行错误诊断。

使用方式:v4 PostCSS 安装 npm install tailwindcss @tailwindcss/postcss postcss,postcss.config.mjs 中仅配置 "@tailwindcss/postcss": {},入口 CSS 写 @import "tailwindcss"。v3 安装 npm install -D tailwindcss@3 postcss autoprefixer,执行 npx tailwindcss init,配置 tailwindcss 与 autoprefixer,入口写 @tailwind base/components/utilities。CLI 方面 v4 用 npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch,v3 用 npx tailwindcss 同参数;无 Node 时可从 GitHub releases 下载独立二进制。

适用场景:Next.js、Remix、Nuxt v3、Astro(pre-Vite)、Webpack、Rollup、esbuild、Parcel、Laravel Mix、Symfony Encore 等用 PostCSS 插件;Rails、Laravel Blade、Django、Flask、Go html/template、Phoenix、纯 HTML 静态站用独立 CLI。

限制:不覆盖 Vite 插件、CSS-first 配置语法、JS 配置语法、构建错误调试与 v3 到 v4 迁移;watch 模式不会发现配置范围外的新文件,需重启;v4 面向 Safari 16.4+、Chrome 111+、Firefox 128+,需兼容旧浏览器时应留在 v3。部分 Astro 补丁版本存在 Vite 插件兼容性回归,建议固定已知可用版本。