本节将详细介绍 Tailwind CSS 的最新特性及其实际应用，帮助开发者更好地利用这些新功能。

容器查询（Container Queries）

基础配置

// tailwind.config.js
module.exports = {theme: {extend: {containers: {'sm': '320px','md': '768px','lg': '1024px',},},},
}

使用示例

// components/AdaptiveCard.tsx
const AdaptiveCard = () => {return (<div className="@container"><div className="grid gap-4@sm:grid-cols-1@md:grid-cols-2@lg:grid-cols-3"><div className="p-4 rounded-lg shadow@sm:flex-col@md:flex-row@lg:flex-col"><imgsrc="/image.jpg"alt="Feature"className="w-full rounded@md:w-1/3@lg:w-full"/><div className="mt-4@md:mt-0 @md:ml-4@lg:mt-4 @lg:ml-0"><h3 className="text-lg font-medium@md:text-xl@lg:text-2xl">特性标题</h3><p className="mt-2 text-gray-600">特性描述内容</p></div></div></div></div>);
};

任意值支持

动态值使用

// components/DynamicStyles.tsx
interface StyleProps {width?: string;height?: string;color?: string;
}const DynamicStyle: React.FC<StyleProps> = ({width = '100px',height = '100px',color = '#000000'
}) => {return (<div className={`[width:${width}][height:${height}][background-color:${color}]rounded-lgtransition-allduration-300`}>动态样式元素</div>);
};// 使用示例
<DynamicStylewidth="200px"height="150px"color="#3B82F6"
/>

CSS变量集成

// styles/theme.css
:root {--brand-hue: 215;--brand-saturation: 90%;--brand-lightness: 50%;--brand-color: hsl(var(--brand-hue)var(--brand-saturation)var(--brand-lightness));
}// components/ThemeAware.tsx
const ThemeAware = () => {return (<div className="[--brand-hue:215][--brand-saturation:90%][--brand-lightness:50%]bg-[color:var(--brand-color)]text-whitep-4rounded-lg">主题感知组件</div>);
};

多重样式变体

复杂状态处理

// components/ComplexButton.tsx
interface ComplexButtonProps {variant?: 'primary' | 'secondary';size?: 'sm' | 'md' | 'lg';isLoading?: boolean;isDisabled?: boolean;
}const ComplexButton: React.FC<ComplexButtonProps> = ({variant = 'primary',size = 'md',isLoading = false,isDisabled = false,children
}) => {return (<buttondisabled={isDisabled || isLoading}className={`inline-flex items-center justify-centerrounded-lg font-mediumtransition-colors duration-200focus:outline-none focus:ring-2 focus:ring-offset-2${variant === 'primary' ? `bg-blue-500hover:bg-blue-600focus:ring-blue-500text-whitedisabled:bg-blue-300` : `bg-gray-100hover:bg-gray-200focus:ring-gray-500text-gray-900disabled:bg-gray-50`}${size === 'sm' ? `px-3 py-1.5text-sm` : size === 'md' ? `px-4 py-2text-base` : `px-6 py-3text-lg`}${isLoading ? `relative!text-transparentpointer-events-noneafter:content-['']after:absoluteafter:w-5after:h-5after:border-2after:border-whiteafter:border-t-transparentafter:rounded-fullafter:animate-spin` : ''}${isDisabled ? `cursor-not-allowedopacity-50` : ''}`}>{children}</button>);
};

文件范围应用

模块化样式

// styles/typography.css
@layer base {@scope {:scope {font-family: Inter var, sans-serif;line-height: 1.5;}h1 {@apply text-4xl font-bold text-gray-900;}h2 {@apply text-3xl font-bold text-gray-900;}p {@apply text-base text-gray-600;}a {@apply text-blue-600 hover:text-blue-700 underline transition-colors;}}
}// components/Article.tsx
const Article = () => {return (<article className="prose"><h1>文章标题</h1><p>文章内容...</p><a href="#">了解更多</a></article>);
};

Just-in-Time 引擎增强

动态类生成

// utils/classNames.ts
export const generateUtilities = (properties: Record<string, string>) => {return Object.entries(properties).map(([key, value]) => `[${key}:${value}]`).join(' ');
};// 使用示例
const styles = generateUtilities({'--gradient-from': '#3B82F6','--gradient-to': '#10B981','background-image': 'linear-gradient(var(--gradient-from), var(--gradient-to))'
});// components/GradientCard.tsx
const GradientCard = () => {return (<div className={`p-6 rounded-lg text-white${styles}`}>渐变卡片</div>);
};

性能优化

选择器优化

// components/OptimizedList.tsx
const OptimizedList = () => {return (<ul className="space-y-4">{items.map((item, index) => (<likey={item.id}className={`p-4 rounded-lgtransition-colorshover:bg-gray-50${index === 0 && 'rounded-t-lg'}${index === items.length - 1 && 'rounded-b-lg'}`}>{item.content}</li>))}</ul>);
};

构建优化

// tailwind.config.js
module.exports = {mode: 'jit',purge: {content: ['./src/**/*.{js,jsx,ts,tsx}','./public/index.html'],options: {safelist: ['bg-blue-500','text-xl','p-4']}},future: {removeDeprecatedGapUtilities: true,purgeLayersByDefault: true,defaultLineHeights: true,standardFontWeights: true}
};

最佳实践

1. 新特性应用

   • 合理使用容器查询
   • 灵活运用任意值
   • 优化选择器性能

2. 开发建议

   • 保持代码整洁
   • 模块化管理
   • 持续优化更新

3. 性能考虑

   • 减少选择器复杂度
   • 优化构建配置
   • 监控样式体积

4. 维护策略

   • 版本迭代计划
   • 文档同步更新
   • 性能持续优化