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

容器查询（Container Queries）

基础配置

  1. // tailwind.config.js
  2. module.exports = {
  3.   theme: {
  4.     extend: {
  5.       containers: {
  6.         'sm': '320px',
  7.         'md': '768px',
  8.         'lg': '1024px',
  9.       },
  10.     },
  11.   },
  12. }

使用示例

  1. // components/AdaptiveCard.tsx
  2. const AdaptiveCard = () => {
  3.   return (
  4.     <div className="@container">
  5.       <div className="
  6.         grid gap-4
  7.         @sm:grid-cols-1
  8.         @md:grid-cols-2
  9.         @lg:grid-cols-3
  10.       ">
  11.         <div className="
  12.           p-4 rounded-lg shadow
  13.           @sm:flex-col
  14.           @md:flex-row
  15.           @lg:flex-col
  16.         ">
  17.           <img
  18.             src="/image.jpg"
  19.             alt="Feature"
  20.             className="
  21.               w-full rounded
  22.               @md:w-1/3
  23.               @lg:w-full
  24.             "
  25.           />
  26.           <div className="
  27.             mt-4
  28.             @md:mt-0 @md:ml-4
  29.             @lg:mt-4 @lg:ml-0
  30.           ">
  31.             <h3 className="
  32.               text-lg font-medium
  33.               @md:text-xl
  34.               @lg:text-2xl
  35.             ">
  36.               特性标题
  37.             </h3>
  38.             <p className="mt-2 text-gray-600">
  39.               特性描述内容
  40.             </p>
  41.           </div>
  42.         </div>
  43.       </div>
  44.     </div>
  45.   );
  46. };

任意值支持

动态值使用

  1. // components/DynamicStyles.tsx
  2. interface StyleProps {
  3.   width?: string;
  4.   height?: string;
  5.   color?: string;
  6. }
  8. const DynamicStyle: React.FC<StyleProps> = ({
  9.   width = '100px',
  10.   height = '100px',
  11.   color = '#000000'
  12. }) => {
  13.   return (
  14.     <div className={`
  15.       [width:${width}]
  16.       [height:${height}]
  17.       [background-color:${color}]
  18.       rounded-lg
  19.       transition-all
  20.       duration-300
  21.     `}>
  22.       动态样式元素
  23.     </div>
  24.   );
  25. };
  27. // 使用示例
  28. <DynamicStyle
  29.   width="200px"
  30.   height="150px"
  31.   color="#3B82F6"
  32. />

CSS变量集成

  1. // styles/theme.css
  2. :root {
  3.   --brand-hue: 215;
  4.   --brand-saturation: 90%;
  5.   --brand-lightness: 50%;
  6.   --brand-color: hsl(
  7.     var(--brand-hue)
  8.     var(--brand-saturation)
  9.     var(--brand-lightness)
  10.   );
  11. }
  13. // components/ThemeAware.tsx
  14. const ThemeAware = () => {
  15.   return (
  16.     <div className="
  17.       [--brand-hue:215]
  18.       [--brand-saturation:90%]
  19.       [--brand-lightness:50%]
  20.       bg-[color:var(--brand-color)]
  21.       text-white
  22.       p-4
  23.       rounded-lg
  24.     ">
  25.       主题感知组件
  26.     </div>
  27.   );
  28. };

多重样式变体

复杂状态处理

  1. // components/ComplexButton.tsx
  2. interface ComplexButtonProps {
  3.   variant?: 'primary' | 'secondary';
  4.   size?: 'sm' | 'md' | 'lg';
  5.   isLoading?: boolean;
  6.   isDisabled?: boolean;
  7. }
  9. const ComplexButton: React.FC<ComplexButtonProps> = ({
  10.   variant = 'primary',
  11.   size = 'md',
  12.   isLoading = false,
  13.   isDisabled = false,
  14.   children
  15. }) => {
  16.   return (
  17.     <button
  18.       disabled={isDisabled || isLoading}
  19.       className={`
  20.         inline-flex items-center justify-center
  21.         rounded-lg font-medium
  22.         transition-colors duration-200
  23.         focus:outline-none focus:ring-2 focus:ring-offset-2
  25.         ${variant === 'primary' ? `
  26.           bg-blue-500
  27.           hover:bg-blue-600
  28.           focus:ring-blue-500
  29.           text-white
  30.           disabled:bg-blue-300
  31.         ` : `
  32.           bg-gray-100
  33.           hover:bg-gray-200
  34.           focus:ring-gray-500
  35.           text-gray-900
  36.           disabled:bg-gray-50
  37.         `}
  39.         ${size === 'sm' ? `
  40.           px-3 py-1.5
  41.           text-sm
  42.         ` : size === 'md' ? `
  43.           px-4 py-2
  44.           text-base
  45.         ` : `
  46.           px-6 py-3
  47.           text-lg
  48.         `}
  50.         ${isLoading ? `
  51.           relative
  52.           !text-transparent
  53.           pointer-events-none
  54.           after:content-['']
  55.           after:absolute
  56.           after:w-5
  57.           after:h-5
  58.           after:border-2
  59.           after:border-white
  60.           after:border-t-transparent
  61.           after:rounded-full
  62.           after:animate-spin
  63.         ` : ''}
  65.         ${isDisabled ? `
  66.           cursor-not-allowed
  67.           opacity-50
  68.         ` : ''}
  69.       `}
  70.     >
  71.       {children}
  72.     </button>
  73.   );
  74. };

文件范围应用

模块化样式

  1. // styles/typography.css
  2. @layer base {
  3.   @scope {
  4.     :scope {
  5.       font-family: Inter var, sans-serif;
  6.       line-height: 1.5;
  7.     }
  9.     h1 {
  10.       @apply text-4xl font-bold text-gray-900;
  11.     }
  13.     h2 {
  14.       @apply text-3xl font-bold text-gray-900;
  15.     }
  17.     p {
  18.       @apply text-base text-gray-600;
  19.     }
  21.     a {
  22.       @apply text-blue-600 hover:text-blue-700 
  23.              underline transition-colors;
  24.     }
  25.   }
  26. }
  28. // components/Article.tsx
  29. const Article = () => {
  30.   return (
  31.     <article className="prose">
  32.       <h1>文章标题</h1>
  33.       <p>文章内容...</p>
  34.       <a href="#">了解更多</a>
  35.     </article>
  36.   );
  37. };

Just-in-Time 引擎增强

动态类生成

  1. // utils/classNames.ts
  2. export const generateUtilities = (properties: Record<string, string>) => {
  3.   return Object.entries(properties)
  4.     .map(([key, value]) => `[${key}:${value}]`)
  5.     .join(' ');
  6. };
  8. // 使用示例
  9. const styles = generateUtilities({
  10.   '--gradient-from': '#3B82F6',
  11.   '--gradient-to': '#10B981',
  12.   'background-image': 'linear-gradient(var(--gradient-from), var(--gradient-to))'
  13. });
  15. // components/GradientCard.tsx
  16. const GradientCard = () => {
  17.   return (
  18.     <div className={`
  19.       p-6 rounded-lg text-white
  20.       ${styles}
  21.     `}>
  22.       渐变卡片
  23.     </div>
  24.   );
  25. };

性能优化

选择器优化

  1. // components/OptimizedList.tsx
  2. const OptimizedList = () => {
  3.   return (
  4.     <ul className="space-y-4">
  5.       {items.map((item, index) => (
  6.         <li
  7.           key={item.id}
  8.           className={`
  9.             p-4 rounded-lg
  10.             transition-colors
  11.             hover:bg-gray-50
  12.             ${index === 0 && 'rounded-t-lg'}
  13.             ${index === items.length - 1 && 'rounded-b-lg'}
  14.           `}
  15.         >
  16.           {item.content}
  17.         </li>
  18.       ))}
  19.     </ul>
  20.   );
  21. };

构建优化

  1. // tailwind.config.js
  2. module.exports = {
  3.   mode: 'jit',
  4.   purge: {
  5.     content: [
  6.       './src/**/*.{js,jsx,ts,tsx}',
  7.       './public/index.html'
  8.     ],
  9.     options: {
  10.       safelist: [
  11.         'bg-blue-500',
  12.         'text-xl',
  13.         'p-4'
  14.       ]
  15.     }
  16.   },
  17.   future: {
  18.     removeDeprecatedGapUtilities: true,
  19.     purgeLayersByDefault: true,
  20.     defaultLineHeights: true,
  21.     standardFontWeights: true
  22.   }
  23. };

最佳实践

  1. 新特性应用

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

  2. 开发建议

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

  3. 性能考虑

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

  4. 维护策略

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