Tailwind CSS 可以与各种现代前端框架完美配合。本节将详细介绍如何将 Tailwind CSS 集成到 React、Vue 和 Angular 等主流框架中，并介绍相关的最佳实践。

React 集成

基础配置

  1. # 创建 React 项目
  2. npx create-react-app my-app --template typescript
  4. # 安装 Tailwind CSS
  5. npm install -D tailwindcss postcss autoprefixer
  7. # 初始化 Tailwind CSS
  8. npx tailwindcss init -p
  1. // tailwind.config.js
  2. module.exports = {
  3.   content: [
  4.     "./src/**/*.{js,jsx,ts,tsx}",
  5.   ],
  6.   theme: {
  7.     extend: {},
  8.   },
  9.   plugins: [],
  10. }
  1. /* src/index.css */
  2. @tailwind base;
  3. @tailwind components;
  4. @tailwind utilities;

组件开发

  1. // src/components/Button.tsx
  2. interface ButtonProps {
  3.   variant?: 'primary' | 'secondary';
  4.   size?: 'sm' | 'md' | 'lg';
  5.   children: React.ReactNode;
  6. }
  8. const Button: React.FC<ButtonProps> = ({
  9.   variant = 'primary',
  10.   size = 'md',
  11.   children
  12. }) => {
  13.   const baseStyles = 'rounded-lg font-medium transition-colors';
  15.   const variants = {
  16.     primary: 'bg-blue-500 text-white hover:bg-blue-600',
  17.     secondary: 'bg-gray-500 text-white hover:bg-gray-600'
  18.   };
  20.   const sizes = {
  21.     sm: 'px-3 py-1.5 text-sm',
  22.     md: 'px-4 py-2 text-base',
  23.     lg: 'px-6 py-3 text-lg'
  24.   };
  26.   return (
  27.     <button className={`${baseStyles} ${variants[variant]} ${sizes[size]}`}>
  28.       {children}
  29.     </button>
  30.   );
  31. };
  33. export default Button;

样式组织

  1. // src/styles/components.ts
  2. export const buttonStyles = {
  3.   base: 'rounded-lg font-medium transition-colors',
  4.   variants: {
  5.     primary: 'bg-blue-500 text-white hover:bg-blue-600',
  6.     secondary: 'bg-gray-500 text-white hover:bg-gray-600'
  7.   },
  8.   sizes: {
  9.     sm: 'px-3 py-1.5 text-sm',
  10.     md: 'px-4 py-2 text-base',
  11.     lg: 'px-6 py-3 text-lg'
  12.   }
  13. };

Vue 集成

项目配置

  1. # 创建 Vue 项目
  2. npm init vue@latest
  4. # 安装依赖
  5. npm install -D tailwindcss postcss autoprefixer
  7. # 初始化配置
  8. npx tailwindcss init -p
  1. // tailwind.config.js
  2. module.exports = {
  3.   content: [
  4.     "./index.html",
  5.     "./src/**/*.{vue,js,ts,jsx,tsx}",
  6.   ],
  7.   theme: {
  8.     extend: {},
  9.   },
  10.   plugins: [],
  11. }

组件示例

  1. <!-- src/components/BaseButton.vue -->
  2. <template>
  3.   <button 
  4.     :class="[
  5.       baseStyles,
  6.       variants[variant],
  7.       sizes[size]
  8.     ]"
  9.   >
  10.     <slot></slot>
  11.   </button>
  12. </template>
  14. <script setup lang="ts">
  15. interface Props {
  16.   variant?: 'primary' | 'secondary';
  17.   size?: 'sm' | 'md' | 'lg';
  18. }
  20. const props = withDefaults(defineProps<Props>(), {
  21.   variant: 'primary',
  22.   size: 'md'
  23. });
  25. const baseStyles = 'rounded-lg font-medium transition-colors';
  27. const variants = {
  28.   primary: 'bg-blue-500 text-white hover:bg-blue-600',
  29.   secondary: 'bg-gray-500 text-white hover:bg-gray-600'
  30. };
  32. const sizes = {
  33.   sm: 'px-3 py-1.5 text-sm',
  34.   md: 'px-4 py-2 text-base',
  35.   lg: 'px-6 py-3 text-lg'
  36. };
  37. </script>

自定义指令

  1. // src/directives/tailwind.ts
  2. import { DirectiveBinding } from 'vue'
  4. export const vTailwind = {
  5.   mounted(el: HTMLElement, binding: DirectiveBinding) {
  6.     const value = binding.value
  7.     if (typeof value === 'string') {
  8.       el.className = value
  9.     } else if (typeof value === 'object') {
  10.       el.className = Object.entries(value)
  11.         .filter(([_, condition]) => condition)
  12.         .map(([className]) => className)
  13.         .join(' ')
  14.     }
  15.   },
  16.   updated(el: HTMLElement, binding: DirectiveBinding) {
  17.     // 同上
  18.   }
  19. }

Angular 集成

项目设置

  1. # 创建 Angular 项目
  2. ng new my-app
  4. # 安装依赖
  5. npm install -D tailwindcss postcss autoprefixer
  7. # 初始化配置
  8. npx tailwindcss init
  1. // tailwind.config.js
  2. module.exports = {
  3.   content: [
  4.     "./src/**/*.{html,ts}",
  5.   ],
  6.   theme: {
  7.     extend: {},
  8.   },
  9.   plugins: [],
  10. }

组件实现

  1. // src/app/components/button/button.component.ts
  2. import { Component, Input } from '@angular/core';
  4. @Component({
  5.   selector: 'app-button',
  6.   template: `
  7.     <button [ngClass]="[
  8.       baseStyles,
  9.       variants[variant],
  10.       sizes[size]
  11.     ]">
  12.       <ng-content></ng-content>
  13.     </button>
  14.   `
  15. })
  16. export class ButtonComponent {
  17.   @Input() variant: 'primary' | 'secondary' = 'primary';
  18.   @Input() size: 'sm' | 'md' | 'lg' = 'md';
  20.   baseStyles = 'rounded-lg font-medium transition-colors';
  22.   variants = {
  23.     primary: 'bg-blue-500 text-white hover:bg-blue-600',
  24.     secondary: 'bg-gray-500 text-white hover:bg-gray-600'
  25.   };
  27.   sizes = {
  28.     sm: 'px-3 py-1.5 text-sm',
  29.     md: 'px-4 py-2 text-base',
  30.     lg: 'px-6 py-3 text-lg'
  31.   };
  32. }

服务封装

  1. // src/app/services/tailwind.service.ts
  2. import { Injectable } from '@angular/core';
  4. @Injectable({
  5.   providedIn: 'root'
  6. })
  7. export class TailwindService {
  8.   combineClasses(...classes: (string | undefined)[]): string {
  9.     return classes.filter(Boolean).join(' ');
  10.   }
  12.   getColorClass(color: string, variant: string = '500'): string {
  13.     return `bg-${color}-${variant}`;
  14.   }
  16.   getTextClass(color: string, variant: string = '500'): string {
  17.     return `text-${color}-${variant}`;
  18.   }
  19. }

框架通用最佳实践

样式抽象

  1. // src/styles/theme.ts
  2. export const theme = {
  3.   colors: {
  4.     primary: {
  5.       light: 'bg-blue-400',
  6.       default: 'bg-blue-500',
  7.       dark: 'bg-blue-600'
  8.     },
  9.     secondary: {
  10.       light: 'bg-gray-400',
  11.       default: 'bg-gray-500',
  12.       dark: 'bg-gray-600'
  13.     }
  14.   },
  15.   typography: {
  16.     sizes: {
  17.       sm: 'text-sm',
  18.       base: 'text-base',
  19.       lg: 'text-lg'
  20.     }
  21.   }
  22. };

工具函数

  1. // src/utils/tailwind.ts
  2. export function classNames(...classes: (string | undefined)[]) {
  3.   return classes.filter(Boolean).join(' ');
  4. }
  6. export function createVariant(baseClass: string, variants: Record<string, string>) {
  7.   return (variant: keyof typeof variants) => 
  8.     classNames(baseClass, variants[variant]);
  9. }

类型支持

  1. // src/types/tailwind.ts
  2. export type Color = 
  3.   | 'primary'
  4.   | 'secondary'
  5.   | 'success'
  6.   | 'warning'
  7.   | 'danger';
  9. export type Shade = 
  10.   | '50'
  11.   | '100'
  12.   | '200'
  13.   | '300'
  14.   | '400'
  15.   | '500'
  16.   | '600'
  17.   | '700'
  18.   | '800'
  19.   | '900';
  21. export type ColorClass = `bg-${Color}-${Shade}`;
  22. export type TextClass = `text-${Color}-${Shade}`;

性能优化

按需加载

  1. // tailwind.config.js
  2. module.exports = {
  3.   content: [
  4.     // 精确指定需要处理的文件
  5.     "./src/components/**/*.{js,ts,jsx,tsx,vue}",
  6.     "./src/pages/**/*.{js,ts,jsx,tsx,vue}",
  7.   ],
  8.   // 禁用未使用的核心插件
  9.   corePlugins: {
  10.     float: false,
  11.     clear: false,
  12.     objectFit: false
  13.   }
  14. }

构建优化

  1. // webpack.config.js
  2. module.exports = {
  3.   optimization: {
  4.     splitChunks: {
  5.       cacheGroups: {
  6.         styles: {
  7.           name: 'styles',
  8.           test: /\.css$/,
  9.           chunks: 'all',
  10.           enforce: true
  11.         }
  12.       }
  13.     }
  14.   }
  15. }

最佳实践

  1. 集成原则

    • 遵循框架约定
    • 保持代码一致性
    • 合理的样式组织

  2. 开发建议

    • 组件抽象
    • 类型支持
    • 工具函数复用

  3. 性能考虑

    • 按需加载
    • 代码分割
    • 缓存优化

  4. 维护策略

    • 统一的样式规范
    • 组件文档
    • 版本控制