Tailwind CSS面试题手册

Tailwind CSS 是一个实用优先的 CSS 框架，它提供了大量的预定义类名，让开发者能够快速构建用户界面。与传统 CSS 框架（如 Bootstrap）不同，Tailwind CSS 不提供预构建的组件，而是提供底层的工具类，让开发者可以自由组合这些类来创建独特的设计。Tailwind CSS 的核心优势：快速开发：无需编写自定义 CSS，直接使用预定义类高度可定制：通过配置文件完全自定义设计系统响应式设计：内置响应式前缀（sm、md、lg、xl、2xl）深色模式：内置深色模式支持小体积：通过 PurgeCSS 自动删除未使用的样式一致性：强制使用统一的设计令牌安装和配置：通过 npm 安装：npm install -D tailwindcss初始化配置：npx tailwindcss init配置文件：tailwind.config.js在 CSS 中引入：@tailwind base; @tailwind components; @tailwind utilities;常用类名示例：间距：p-4（padding）、m-2（margin）、mt-4（margin-top）颜色：bg-blue-500（背景色）、text-white（文字颜色）布局：flex、grid、block、inline-block尺寸：w-full（宽度 100%）、h-screen（高度 100vh）字体：text-xl、font-bold、leading-relaxed边框：border-2、rounded-lg、shadow-md响应式设计：断点：sm（640px）、md（768px）、lg（1024px）、xl（1280px）、2xl（1536px）示例：md:w-1/2（中等屏幕及以上宽度为 50%）配置文件示例：module.exports = { content: ["./src/**/*.{html,js}"], theme: { extend: { colors: { primary: '#3b82f6', }, }, }, plugins: [],}最佳实践：使用 @apply 提取重复的类合理使用配置文件自定义设计系统利用 JIT 模式提高性能使用插件扩展功能保持 HTML 结构清晰

Tailwind CSS 的 Flexbox 布局通过 flex 相关类实现，让开发者能够轻松创建灵活的布局。基础 Flexbox 类：flex：启用 Flexbox 布局inline-flex：启用内联 Flexbox 布局flex-row：主轴为水平方向（默认）flex-row-reverse：主轴为水平反向方向flex-col：主轴为垂直方向flex-col-reverse：主轴为垂直反向方向主轴对齐（justify）：justify-start：主轴起始对齐justify-end：主轴结束对齐justify-center：主轴居中对齐justify-between：主轴两端对齐，项目之间间隔相等justify-around：主轴两端对齐，项目周围间隔相等justify-evenly：主轴均匀分布，项目之间间隔相等交叉轴对齐（items）：items-start：交叉轴起始对齐items-end：交叉轴结束对齐items-center：交叉轴居中对齐items-baseline：基线对齐items-stretch：拉伸以填充容器（默认）多行对齐（content）：content-start：多行起始对齐content-end：多行结束对齐content-center：多行居中对齐content-between：多行两端对齐content-around：多行周围间隔相等content-evenly：多行均匀分布Flex 项目属性：flex-1：flex: 1 1 0%flex-auto：flex: 1 1 autoflex-initial：flex: 0 1 autoflex-none：flex: noneflex-grow-0：flex-grow: 0flex-grow：flex-grow: 1flex-shrink-0：flex-shrink: 0flex-shrink：flex-shrink: 1flex-wrap：允许换行flex-nowrap：不允许换行（默认）flex-wrap-reverse：反向换行常用布局示例：水平居中： <div class="flex justify-center items-center h-screen"> 居中内容 </div>导航栏： <nav class="flex justify-between items-center p-4"> <div class="font-bold">Logo</div> <ul class="flex space-x-4"> <li>Home</li> <li>About</li> <li>Contact</li> </ul> </nav>卡片网格： <div class="flex flex-wrap gap-4"> <div class="flex-1">Card 1</div> <div class="flex-1">Card 2</div> <div class="flex-1">Card 3</div> </div>垂直布局： <div class="flex flex-col space-y-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>响应式布局： <div class="flex flex-col md:flex-row"> <div class="flex-1">Sidebar</div> <div class="flex-3">Content</div> </div>间距控制：space-x-*：水平间距 <div class="flex space-x-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>space-y-*：垂直间距 <div class="flex flex-col space-y-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>最佳实践：使用语义化的 HTML 结构合理使用 flex 属性控制布局结合响应式前缀创建自适应布局使用间距类控制项目间距测试不同屏幕尺寸的显示效果

Tailwind CSS 的 Grid 布局通过 grid 相关类实现，让开发者能够轻松创建二维网格布局。基础 Grid 类：grid：启用 Grid 布局inline-grid：启用内联 Grid 布局grid-cols-1：1 列网格grid-cols-2：2 列网格grid-cols-3：3 列网格grid-cols-4：4 列网格grid-cols-5：5 列网格grid-cols-6：6 列网格grid-cols-7：7 列网格grid-cols-8：8 列网格grid-cols-9：9 列网格grid-cols-10：10 列网格grid-cols-11：11 列网格grid-cols-12：12 列网格grid-cols-none：不指定列数行设置：grid-rows-1：1 行网格grid-rows-2：2 行网格grid-rows-3：3 行网格grid-rows-4：4 行网格grid-rows-5：5 行网格grid-rows-6：6 行网格grid-rows-none：不指定行数间距控制：gap-0：无间距gap-1：0.25rem（4px）gap-2：0.5rem（8px）gap-3：0.75rem（12px）gap-4：1rem（16px）gap-5：1.25rem（20px）gap-6：1.5rem（24px）gap-8：2rem（32px）gap-x-*：水平间距gap-y-*：垂直间距对齐方式：justify-items-start：水平起始对齐justify-items-end：水平结束对齐justify-items-center：水平居中对齐justify-items-stretch：水平拉伸（默认）items-start：垂直起始对齐items-end：垂直结束对齐items-center：垂直居中对齐items-stretch：垂直拉伸（默认）justify-start：网格容器水平起始对齐justify-end：网格容器水平结束对齐justify-center：网格容器水平居中对齐justify-between：网格容器水平两端对齐justify-around：网格容器水平周围间隔相等content-start：多行垂直起始对齐content-end：多行垂直结束对齐content-center：多行垂直居中对齐content-between：多行垂直两端对齐content-around：多行垂直周围间隔相等跨列跨行：col-span-1：跨越 1 列col-span-2：跨越 2 列col-span-3：跨越 3 列- col-span-full：跨越所有列col-start-1：从第 1 列开始col-end-2：到第 2 列结束row-span-1：跨越 1 行row-span-2：跨越 2 行row-span-full：跨越所有行row-start-1：从第 1 行开始row-end-2：到第 2 行结束常用布局示例：基本网格： <div class="grid grid-cols-3 gap-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> <div>Item 4</div> <div>Item 5</div> <div>Item 6</div> </div>响应式网格： <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>卡片布局： <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> <div class="card">Card 4</div> </div>复杂布局： <div class="grid grid-cols-4 grid-rows-3 gap-4"> <div class="col-span-2 row-span-2">Header</div> <div>Sidebar</div> <div class="col-span-3 row-span-2">Content</div> <div>Footer</div> </div>自动填充： <div class="grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] gap-4"> <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> </div>最佳实践：使用语义化的 HTML 结构结合响应式前缀创建自适应网格合理使用间距控制布局使用跨列跨行创建复杂布局测试不同屏幕尺寸的显示效果

Tailwind CSS 的 JIT（Just-In-Time）模式是 v3.0 引入的新特性，按需生成 CSS，显著提高性能。JIT 模式的优势：按需生成：只生成实际使用的类更小的文件体积：减少最终 CSS 大小更快的构建速度：只处理使用的类支持任意值：可以使用任意 CSS 值更好的开发体验：实时生成样式启用 JIT 模式：Tailwind CSS v3.0+ 默认启用 JIT 模式在 tailwind.config.js 中配置： module.exports = { mode: 'jit', // v3.0+ 默认启用 content: ["./src/**/*.{html,js}"], }使用任意值：方括号语法：使用任意 CSS 值示例： <div class="w-[123px]">自定义宽度</div> <div class="h-[50%]">自定义高度</div> <div class="bg-[#1da1f2]">自定义颜色</div> <div class="p-[10px]">自定义内边距</div> <div class="text-[20px]">自定义字体大小</div> <div class="grid-cols-[repeat(auto-fill,minmax(200px,1fr))]">自定义网格</div>JIT 模式配置：content 配置：指定要扫描的文件示例： module.exports = { content: [ "./src/**/*.{html,js,jsx,ts,tsx,vue}", "./public/**/*.html", ], }safelist 配置：防止某些类被清除示例： module.exports = { safelist: [ 'bg-red-500', { pattern: /bg-(red|green|blue)-(100|200|300)/, variants: ['hover', 'focus'], } ] }JIT 模式与 AOT 模式对比：JIT（Just-In-Time）：按需生成优点：文件小、构建快、支持任意值缺点：需要配置 content 路径AOT（Ahead-Of-Time）：预先生成所有类优点：无需配置、简单缺点：文件大、构建慢性能优化：合理配置 content 路径，避免扫描不必要的文件使用 safelist 保护动态生成的类利用任意值减少自定义 CSS定期清理未使用的样式开发体验：实时生成：修改 HTML 后立即生成样式热重载：支持开发服务器热重载错误提示：提供清晰的错误信息构建配置：Webpack： // webpack.config.js module.exports = { module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'], }, ], }, }Vite： // vite.config.js export default { css: { postcss: { plugins: [ require('tailwindcss'), require('autoprefixer'), ], }, }, }最佳实践：确保所有使用的类都在 content 路径中使用任意值减少自定义 CSS定期审查和优化配置测试构建输出的大小利用 JIT 模式的优势提高开发效率

Tailwind CSS 的动画和过渡效果通过内置的工具类实现，让开发者能够轻松创建动态效果。过渡效果：transition：启用所有过渡属性transition-none：禁用过渡效果transition-all：所有属性都有过渡效果transition-colors：颜色属性有过渡效果transition-opacity：透明度有过渡效果transition-shadow：阴影有过渡效果transition-transform：变换有过渡效果过渡持续时间：duration-75：75msduration-100：100msduration-150：150msduration-200：200msduration-300：300msduration-500：500msduration-700：700msduration-1000：1000ms过渡缓动函数：ease-linear：线性缓动ease-in：缓入ease-out：缓出ease-in-out：缓入缓出过渡延迟：delay-75：延迟 75msdelay-100：延迟 100msdelay-150：延迟 150msdelay-200：延迟 200msdelay-300：延迟 300msdelay-500：延迟 500msdelay-700：延迟 700msdelay-1000：延迟 1000ms动画效果：animate-none：无动画animate-spin：旋转动画animate-ping：脉冲动画animate-pulse：心跳动画animate-bounce：弹跳动画悬停状态：hover：鼠标悬停时应用样式示例： <button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded"> Hover me </button>焦点状态：focus：元素获得焦点时应用样式示例： <input class="border-gray-300 focus:border-blue-500 focus:ring-2 focus:ring-blue-500 rounded">活动状态：active：元素被激活时应用样式示例： <button class="bg-blue-500 active:bg-blue-700 text-white px-4 py-2 rounded"> Click me </button>组合状态：可以组合多个状态修饰符示例： <button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 focus:ring-blue-500 text-white px-4 py-2 rounded"> Button </button>响应式动画：结合响应式前缀使用示例： <div class="animate-pulse md:animate-spin"> 响应式动画 </div>深色模式动画：结合深色模式使用示例： <div class="bg-white dark:bg-gray-900 transition-colors duration-300"> 深色模式过渡 </div>自定义动画：在 tailwind.config.js 中配置示例： // tailwind.config.js module.exports = { theme: { extend: { animation: { 'fade-in': 'fadeIn 0.5s ease-in', 'slide-up': 'slideUp 0.5s ease-out', }, keyframes: { fadeIn: { '0%': { opacity: '0' }, '100%': { opacity: '1' }, }, slideUp: { '0%': { transform: 'translateY(100%)' }, '100%': { transform: 'translateY(0)' }, }, }, }, }, }使用自定义动画： <div class="animate-fade-in">淡入动画</div> <div class="animate-slide-up">上滑动画</div>最佳实践：合理使用过渡效果，避免过度动画保持动画简洁，提高用户体验测试动画性能，避免卡顿考虑用户偏好设置（减少动画）使用硬件加速（transform、opacity）

Tailwind CSS 的响应式设计通过断点前缀实现，让开发者能够轻松创建适应不同屏幕尺寸的布局。默认断点：sm：640px（小屏幕）md：768px（中等屏幕）lg：1024px（大屏幕）xl：1280px（超大屏幕）2xl：1536px（超超大屏幕）断点使用方式：在类名前添加断点前缀示例： <div class="w-full md:w-1/2 lg:w-1/3"> 响应式宽度 </div>默认样式（无前缀）适用于所有屏幕尺寸断点样式从该断点开始生效，向上应用常用响应式类：布局：flex md:flex-row lg:grid lg:grid-cols-3间距：p-4 md:p-8 lg:p-12字体：text-sm md:text-base lg:text-lg显示：block md:hidden lg:block宽高：w-full md:w-3/4 lg:w-1/2h-auto md:h-screen lg:h-96自定义断点：在 tailwind.config.js 中配置示例： theme: { screens: { 'xs': '475px', 'sm': '640px', 'md': '768px', 'lg': '1024px', 'xl': '1280px', '2xl': '1536px', } }可以使用范围断点： screens: { '2xl': { max: '1535px' }, // 或 'print': { raw: 'print' }, }移动优先设计：默认样式应用于所有屏幕使用断点前缀覆盖更大屏幕的样式示例： <div class="text-sm md:text-base lg:text-lg"> 移动优先设计 </div>堆叠顺序：断点类按从小到大的顺序应用后面的断点会覆盖前面的断点示例： <div class="w-full md:w-3/4 lg:w-1/2"> 宽度从 100% 到 75% 再到 50% </div>常见响应式模式：导航栏： <nav class="flex flex-col md:flex-row"> <div class="w-full md:w-auto">Logo</div> <ul class="flex flex-col md:flex-row"> <li>Home</li> <li>About</li> </ul> </nav>卡片布局： <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4"> <div class="card">Card 1</div> <div class="card">Card 2</div> <div class="card">Card 3</div> </div>隐藏/显示： <div class="hidden md:block"> 只在中等及以上屏幕显示 </div> <div class="block md:hidden"> 只在移动屏幕显示 </div>最佳实践：采用移动优先的设计方法合理使用断点，避免过度细分保持响应式类的一致性测试不同屏幕尺寸的显示效果使用容器查询（Container Queries）进行更精细的控制

Tailwind CSS 的插件系统允许开发者扩展框架的功能，添加自定义工具类和组件。官方插件：@tailwindcss/forms：表单样式插件为表单元素提供基础样式重置表单元素的默认样式安装：npm install -D @tailwindcss/forms使用：javascript// tailwind.config.jsplugins: [ require('@tailwindcss/forms'),]示例：<input type="text" class="form-input"><select class="form-select"> <option>Option 1</option> <option>Option 2</option></select>@tailwindcss/typography：排版插件为内容区域提供优美的排版样式支持 prose 类安装：npm install -D @tailwindcss/typography使用：javascript// tailwind.config.jsplugins: [ require('@tailwindcss/typography'),]示例：<article class="prose lg:prose-xl"> <h1>Article Title</h1> <p>Article content goes here.</p></article>@tailwindcss/aspect-ratio：宽高比插件提供宽高比工具类安装：npm install -D @tailwindcss/aspect-ratio使用：javascript// tailwind.config.jsplugins: [ require('@tailwindcss/aspect-ratio'),]示例：<div class="aspect-w-16 aspect-h-9"> <img src="image.jpg" alt="Image"></div>@tailwindcss/line-clamp：文本截断插件提供文本截断工具类安装：npm install -D @tailwindcss/line-clamp使用：javascript// tailwind.config.jsplugins: [ require('@tailwindcss/line-clamp'),]示例：```html This is a long text that will be truncated after 3 lines.```第三方插件：tailwindcss-animate：动画插件提供常用的动画类安装：npm install -D tailwindcss-animate使用：javascriptplugins: [ require('tailwindcss-animate'),]示例：<div class="animate-bounce">Bouncing element</div><div class="animate-pulse">Pulsing element</div>@tailwindcss/container-queries：容器查询插件提供容器查询支持安装：npm install -D @tailwindcss/container-queries使用：javascriptplugins: [ require('@tailwindcss/container-queries'),]自定义插件：创建自定义插件示例： // my-plugin.js const plugin = require('tailwindcss/plugin') module.exports = plugin(function({ addUtilities, theme }) { const newUtilities = { '.text-shadow': { textShadow: theme('textShadow'), }, } addUtilities(newUtilities) }, { theme: { textShadow: { sm: '2px 2px 4px rgba(0, 0, 0, 0.1)', DEFAULT: '4px 4px 8px rgba(0, 0, 0, 0.2)', lg: '8px 8px 16px rgba(0, 0, 0, 0.3)', }, }, })使用自定义插件： // tailwind.config.js const myPlugin = require('./my-plugin') module.exports = { plugins: [ myPlugin, ], }插件配置：为插件传递配置选项示例： plugins: [ require('@tailwindcss/forms')({ strategy: 'class', }), require('@tailwindcss/typography')({ className: 'prose', }), ]最佳实践：只安装需要的插件合理使用插件，避免过度依赖考虑创建自定义插件满足特定需求定期更新插件版本测试插件兼容性

Tailwind CSS 的深色模式支持让开发者能够轻松创建支持深色主题的界面。深色模式配置：在 tailwind.config.js 中配置两种模式：'media'：使用系统偏好设置（默认）'class'：使用类名控制示例： module.exports = { darkMode: 'class', // 或 'media' }使用系统偏好设置（media 模式）：自动检测系统的深色模式偏好无需手动切换示例： <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> 自动适应系统主题 </div>使用类名控制（class 模式）：手动添加 dark 类到 HTML 元素可以在根元素或特定元素上添加示例： <!-- 添加到根元素 --> <html class="dark"> <body> <div class="bg-white dark:bg-gray-900"> 深色模式 </div> </body> </html>切换深色模式：使用 JavaScript 切换 dark 类示例： // 添加 dark 类 document.documentElement.classList.add('dark') // 移除 dark 类 document.documentElement.classList.remove('dark') // 切换 dark 类 document.documentElement.classList.toggle('dark')持久化深色模式：使用 localStorage 保存用户偏好示例： // 保存偏好 localStorage.setItem('theme', 'dark') // 读取偏好 const theme = localStorage.getItem('theme') if (theme === 'dark') { document.documentElement.classList.add('dark') }常用深色模式类：背景色：bg-white dark:bg-gray-900bg-gray-100 dark:bg-gray-800文字颜色：text-gray-900 dark:text-gray-100text-blue-600 dark:text-blue-400边框颜色：border-gray-200 dark:border-gray-700border-blue-500 dark:border-blue-400阴影：shadow-lg dark:shadow-noneshadow-xl dark:shadow-2xl深色模式最佳实践：为所有颜色提供深色变体保持足够的对比度测试深色模式下的可读性考虑用户偏好设置提供手动切换选项React 集成示例：import { useState, useEffect } from 'react'function App() { const [isDark, setIsDark] = useState(false) useEffect(() => { const theme = localStorage.getItem('theme') if (theme === 'dark') { setIsDark(true) document.documentElement.classList.add('dark') } }, []) const toggleDark = () => { setIsDark(!isDark) if (!isDark) { document.documentElement.classList.add('dark') localStorage.setItem('theme', 'dark') } else { document.documentElement.classList.remove('dark') localStorage.setItem('theme', 'light') } } return ( <div className="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> <button onClick={toggleDark}> {isDark ? 'Light Mode' : 'Dark Mode'} </button> </div> )}Vue 集成示例：<template> <div :class="{ 'dark': isDark }" class="bg-white dark:bg-gray-900"> <button @click="toggleDark"> {{ isDark ? 'Light Mode' : 'Dark Mode' }} </button> </div></template><script>export default { data() { return { isDark: false } }, mounted() { const theme = localStorage.getItem('theme') if (theme === 'dark') { this.isDark = true } }, methods: { toggleDark() { this.isDark = !this.isDark localStorage.setItem('theme', this.isDark ? 'dark' : 'light') } }}</script>

Tailwind CSS 的配置文件（tailwind.config.js）是自定义设计系统的核心，通过配置文件可以完全控制框架的行为。配置文件结构：module.exports = { content: [], // 扫描的文件路径 theme: {}, // 主题配置 plugins: [], // 插件配置}content 配置：指定 Tailwind 扫描的文件路径支持 glob 模式匹配示例： content: [ "./src/**/*.{html,js}", "./pages/**/*.vue", "./components/**/*.jsx" ]JIT 模式下，只生成使用到的类theme 配置：colors：自定义颜色 theme: { colors: { primary: '#3b82f6', secondary: '#10b981', 'custom-blue': { light: '#93c5fd', DEFAULT: '#3b82f6', dark: '#1d4ed8', } } }spacing：自定义间距 theme: { spacing: { '128': '32rem', '144': '36rem', } }fontSize：自定义字体大小 theme: { fontSize: { 'xxs': '0.75rem', 'xxl': '2.25rem', } }fontFamily：自定义字体 theme: { fontFamily: { sans: ['Inter', 'sans-serif'], mono: ['Fira Code', 'monospace'], } }extend：扩展默认主题 theme: { extend: { colors: { brand: '#ff6b6b', }, spacing: { '72': '18rem', } } }plugins 配置：官方插件：@tailwindcss/forms：表单样式@tailwindcss/typography：排版样式@tailwindcss/aspect-ratio：宽高比@tailwindcss/line-clamp：文本截断安装插件：npm install -D @tailwindcss/forms使用插件： plugins: [ require('@tailwindcss/forms'), require('@tailwindcss/typography'), ]presets 配置：使用预设配置示例： presets: [ require('./my-preset'), ]darkMode 配置：'media'：使用系统偏好设置'class'：使用类名控制示例： darkMode: 'class', // 或 'media'corePlugins 配置：禁用核心插件示例： corePlugins: { preflight: false, // 禁用基础样式重置 }important 配置：设置 !important 优先级示例： important: true, // 所有类都添加 !important // 或 important: '#app', // 在特定选择器下添加 !importantprefix 配置：为所有类添加前缀示例： prefix: 'tw-', // 所有类名变为 tw-*separator 配置：自定义类名分隔符示例： separator: '_', // 使用下划线代替连字符safelist 配置：防止某些类被清除示例： safelist: [ 'bg-red-500', { pattern: /bg-(red|green|blue)-(100|200|300)/, variants: ['hover', 'focus'], } ]最佳实践：使用 extend 而不是覆盖默认主题合理组织配置文件结构使用设计令牌保持一致性利用插件扩展功能定期审查和优化配置

TailwindCSS v3.0 引入了 JIT（Just-In-Time）编译器，这是一个重大的性能改进，相比传统的 AOT（Ahead-Of-Time）编译方式有显著优势。JIT 编译器的工作原理JIT 编译器在开发过程中按需生成 CSS，而不是预先生成所有可能的样式组合。核心机制扫描文件：JIT 编译器扫描项目中的所有模板文件（HTML、JS、Vue、React 等）提取类名：提取实际使用的 TailwindCSS 类名动态生成：只生成被使用的 CSS 规则实时更新：当类名变化时，自动更新生成的 CSSJIT vs AOT 对比AOT（旧版本）预先生成所有可能的样式组合文件体积大（通常 3MB+）构建时间长需要配置 PurgeCSS 来移除未使用的样式JIT（v3.0+）按需生成样式文件体积小（通常只有几十 KB）构建速度快无需额外配置 PurgeCSS支持任意值语法JIT 的主要优势1. 任意值语法<!-- 可以直接使用任意值 --><div class="w-[137px] bg-[#1da1f2]"> 自定义样式</div>2. 变体堆叠<!-- 可以堆叠多个变体 --><button class="hover:bg-blue-500 focus:ring-2 active:scale-95 disabled:opacity-50"> 按钮</button>3. 更快的构建速度只处理实际使用的类名减少了不必要的 CSS 生成开发服务器启动更快4. 更小的最终文件只包含使用的样式自动优化 CSS 输出无需额外的清理步骤配置 JIT 编译器在 tailwind.config.js 中启用 JIT：module.exports = { mode: 'jit', content: [ './src/**/*.{html,js,ts,jsx,tsx,vue,svelte}', ], theme: { extend: {}, }, plugins: [],}JIT 的高级特性1. 动态类名支持// 可以使用模板字符串const size = 'large';<div class={`text-${size}`}> 动态大小</div>2. 安全列表module.exports = { safelist: [ 'bg-red-500', 'text-3xl', { pattern: /bg-(red|green|blue)-500/, variants: ['hover', 'focus'], }, ],}3. 自定义变体module.exports = { theme: { extend: { variants: { display: ['group-hover'], }, }, },}最佳实践使用 content 配置：明确指定要扫描的文件路径避免动态类名：尽量使用完整的类名而非动态拼接利用任意值语法：对于一次性使用的样式，使用任意值语法监控文件大小：定期检查生成的 CSS 文件大小注意事项JIT 编译器需要 Node.js 12.13.0 或更高版本某些旧版浏览器可能需要额外的 polyfill在生产环境中确保正确配置 content 选项