Tailwind CSS v3 安装 (NPM) 学习笔记一、安装步骤1. 初始化项目mkdirmy-projectcdmy-projectnpminit-y2. 安装 Tailwind CSSnpminstall-Dtailwindcss3. 生成配置文件npx tailwindcss init生成tailwind.config.js/** type {import(tailwindcss).Config} */module.exports{content:[],// ← 需要配置模板路径theme:{extend:{},},plugins:[],}4. 配置内容路径/** type {import(tailwindcss).Config} */module.exports{content:[./src/**/*.{html,js,jsx,ts,tsx,vue},// ./public/**/*.html, // 如果 HTML 在 public 目录],theme:{extend:{},},plugins:[],}content是必须配置的Tailwind 据此扫描文件只生成用到的工具类Tree-shaking。5. 创建 CSS 入口文件/* src/input.css */tailwindbase;/* Preflight 重置样式 */tailwindcomponents;/* 组件层 */tailwindutilities;/* 工具类层 */6. 创建 HTML 文件!-- src/index.html --!DOCTYPEhtmlhtmllangzh-CNheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleTailwind CSS v3/titlelinkrelstylesheethref../dist/output.css/headbodyclassbg-gray-50 text-gray-900 min-h-screendivclassmax-w-4xl mx-auto py-12 px-4h1classtext-4xl font-bold text-blue-600 mb-4Hello Tailwind!/h1pclasstext-lg text-gray-600使用 NPM 方式安装的 Tailwind CSS v3。/p/div/body/html7. 构建并监听# 开发模式监听文件变化自动重新构建npx tailwindcss-isrc/input.css-odist/output.css--watch# 生产构建压缩输出npx tailwindcss-isrc/input.css-odist/output.css--minify8. 配置 npm scripts{scripts:{dev:tailwindcss -i src/input.css -o dist/output.css --watch,build:tailwindcss -i src/input.css -o dist/output.css --minify}}npmrun dev# 开发npmrun build# 生产构建二、项目结构my-project/ ├── package.json ├── tailwind.config.js ← Tailwind 配置 ├── src/ │ ├── input.css ← CSS 入口 │ └── index.html ← 页面模板 └── dist/ └── output.css ← 构建产物自动生成三、tailwind.config.js 完整配置1. content — 模板路径content:[// 相对路径支持 glob 模式./src/**/*.{html,js,jsx,ts,tsx,vue},./public/**/*.html,// 第三方组件库路径确保其类名不被 Tree-shaking./node_modules/my-ui-lib/**/*.js,],2. theme — 主题定制theme:{// 完全替换默认值不推荐colors:{...},// 在默认值基础上扩展推荐extend:{colors:{brand:{50:#eff6ff,100:#dbeafe,200:#bfdbfe,300:#93c5fd,400:#60a5fa,500:#3b82f6,600:#2563eb,700:#1d4ed8,800:#1e40af,900:#1e3a8a,},},fontFamily:{sans:[Microsoft YaHei,system-ui,sans-serif],mono:[Fira Code,monospace],},spacing:{128:32rem,144:36rem,},borderRadius:{4xl:2rem,},screens:{xs:475px,3xl:1920px,},animation:{fade-in:fadeIn 0.5s ease-out,slide-up:slideUp 0.3s ease-out,},keyframes:{fadeIn:{0%:{opacity:0,transform:translateY(10px)},100%:{opacity:1,transform:translateY(0)},},slideUp:{0%:{opacity:0,transform:translateY(20px)},100%:{opacity:1,transform:translateY(0)},},},boxShadow:{soft:0 2px 15px -3px rgba(0, 0, 0, 0.07), 0 10px 20px -2px rgba(0, 0, 0, 0.04),},},},3. plugins — 插件plugins:[require(tailwindcss/forms),// 表单样式重置require(tailwindcss/typography),// 排版插件 (prose)require(tailwindcss/aspect-ratio),// 宽高比require(tailwindcss/line-clamp),// 文本截断 (v3.3 已内置)],安装插件npminstall-Dtailwindcss/forms tailwindcss/typography tailwindcss/aspect-ratio4. darkMode — 暗色模式darkMode:class,// 通过 .dark 类手动切换// darkMode: media, // 跟随系统偏好默认5. 完整配置示例/** type {import(tailwindcss).Config} */module.exports{content:[./src/**/*.{html,js,jsx,ts,tsx,vue},./public/**/*.html,],darkMode:class,theme:{extend:{colors:{brand:{50:#eff6ff,500:#3b82f6,600:#2563eb,700:#1d4ed8,900:#1e3a8a,},},fontFamily:{sans:[Microsoft YaHei,system-ui,sans-serif],},animation:{fade-in:fadeIn 0.5s ease-out,},keyframes:{fadeIn:{0%:{opacity:0},100%:{opacity:1},},},},},plugins:[require(tailwindcss/forms),require(tailwindcss/typography),],}四、CSS 层与自定义样式1. 三个层的作用/* src/input.css *//* base 层Preflight 重置 全局样式 */tailwindbase;/* components 层可复用组件类 */tailwindcomponents;/* utilities 层工具类优先级最高 */tailwindutilities;优先级utilitiescomponentsbase2. 添加自定义样式/* src/input.css */tailwindbase;tailwindcomponents;tailwindutilities;/* base 层全局重置 */layerbase{body{applybg-gray-50 text-gray-900;}h1, h2, h3{applyfont-bold tracking-tight;}a{applytext-blue-600hover:text-blue-800 transition;}}/* components 层组件类 */layercomponents{.btn{applyfont-semibold py-2.5 px-5 rounded-lg transition duration-200 inline-flex items-center gap-2 cursor-pointer;}.btn-primary{applybg-blue-500hover:bg-blue-700 text-white;}.btn-danger{applybg-red-500hover:bg-red-700 text-white;}.btn-success{applybg-green-500hover:bg-green-700 text-white;}.btn-outline{applyborder-2 border-blue-500 text-blue-500hover:bg-blue-50;}.btn-sm{applytext-sm py-1.5 px-3;}.btn-lg{applytext-lg py-3 px-6;}.card{applybg-white rounded-xl shadow-sm border border-gray-200 p-6;}.input-field{applyw-full px-3 py-2.5 border border-gray-300 rounded-lgfocus:border-blue-500focus:ring-2focus:ring-blue-200 outline-none transition;}.badge{applytext-xs font-semibold px-2.5 py-0.5 rounded-full;}}/* utilities 层自定义工具类 */layerutilities{.text-balance{text-wrap:balance;}.scrollbar-hide{-ms-overflow-style:none;scrollbar-width:none;}.scrollbar-hide::-webkit-scrollbar{display:none;}}3. 不使用 layer 的样式/* 不放在 layer 中的样式优先级最高可覆盖所有 Tailwind 类 */.special-override{color:red!important;}谨慎使用通常应优先通过layer管理优先级。五、与构建工具集成1. Vite 集成推荐npmcreate vitelatest my-project ----templatevanillacdmy-projectnpminstall-Dtailwindcss postcss autoprefixer npx tailwindcss init-p# 生成 tailwind.config.js postcss.config.js// postcss.config.jsexportdefault{plugins:{tailwindcss:{},autoprefixer:{},},}Vite 会自动处理 PostCSS无需手动指定输出路径。2. Webpack 集成npminstall-Dtailwindcss postcss postcss-loader autoprefixer npx tailwindcss init-p// webpack.config.jsmodule.exports{module:{rules:[{test:/\.css$/,use:[style-loader,css-loader,postcss-loader],},],},};3. Next.js 集成npx create-next-applatest my-projectcdmy-projectnpminstall-Dtailwindcss postcss autoprefixer npx tailwindcss init-p// tailwind.config.jscontent:[./app/**/*.{js,ts,jsx,tsx,mdx},./pages/**/*.{js,ts,jsx,tsx,mdx},./components/**/*.{js,ts,jsx,tsx,mdx},],4. Vue CLI 集成vue create my-projectcdmy-projectnpminstall-Dtailwindcss postcss autoprefixer npx tailwindcss init-p// tailwind.config.jscontent:[./public/index.html,./src/**/*.{vue,js,ts,jsx,tsx},],六、PostCSS 与 Autoprefixer1. 为什么需要 AutoprefixerTailwind v3 本身不添加浏览器前缀需要 Autoprefixer 自动补全/* 输入 */.example{appearance:none;}/* Autoprefixer 输出 */.example{-webkit-appearance:none;-moz-appearance:none;appearance:none;}2. 安装npminstall-Dautoprefixer3. 配置// postcss.config.jsmodule.exports{plugins:{tailwindcss:{},autoprefixer:{},},}4. 浏览器目标// package.json{browserslist:[ 1%,last 2 versions,not dead]}七、生产优化1. Tree-shaking 原理Tailwind v3 通过content配置扫描模板文件只生成实际使用的工具类所有工具类 (约 100,000) → 扫描模板 → 实际使用的类 (约 1,000)2. 产出体积对比方式体积 (gzip)CDN (全量)~300KBNPM 开发构建~50-100KBNPM 生产构建 minify5-15KB3. 构建命令# 生产构建压缩 Tree-shakingNODE_ENVproduction npx tailwindcss-isrc/input.css-odist/output.css--minify4. 检查产出# 查看生成的 CSS 大小npx tailwindcss-isrc/input.css-odist/output.css--minifyls-lhdist/output.css八、常见问题1. 样式不生效原因content路径配置错误类名被 Tree-shaking 移除。// 检查 content 是否覆盖了你的模板文件content:[./src/**/*.{html,js,jsx,ts,tsx,vue},// 确保路径正确],2. 动态类名不生效Tailwind不识别拼接的类名!-- 不生效Tailwind 无法静态分析 --divclasstext-{{ color }}-500错误/div解决方案完整写出类名确保被扫描到!-- 正确 --divclass{{ color red ? text-red-500 : text-blue-500 }}正确/div或在safelist中强制保留// tailwind.config.jsmodule.exports{safelist:[text-red-500,text-blue-500,bg-red-500,bg-blue-500,],}3. apply 报错确保apply写在layer块内或使用独立 CSS 规则/* 正确 */layercomponents{.btn{applybg-blue-500 text-white;}}/* 也正确不在 layer 中优先级更高 */.btn{applybg-blue-500 text-white;}4. 修改配置后样式未更新开发模式下--watch会自动重建。若未生效# 删除缓存重新构建rm-rfnode_modules/.cache npx tailwindcss-isrc/input.css-odist/output.css--watch5. 与现有 CSS 冲突Tailwind 的 Preflight 会重置默认样式可能导致第三方库样式异常/* 禁用 Preflight *//* tailwind base; */← 注释掉即可tailwindcomponents;tailwindutilities;或选择性引入tailwindbase;/* 在 base 之后覆盖冲突样式 */layerbase{button{background:transparent;}}九、CDN vs NPM 对比总结对比项CDNNPM安装难度极低中产出体积大 (~300KB)小 (5-15KB gzip)自定义配置有限完整apply / layer有限支持完整支持Tree-shaking不支持支持插件生态部分支持完整支持构建工具集成不支持支持浏览器兼容依赖 JS纯 CSS适用场景学习/原型生产环境总结学习阶段可用 CDN 快速体验正式项目务必使用 NPM 方式以获得完整功能和最优性能。