TailwindCSS 如何与 React、Vue、Angular 等框架集成？
TailwindCSS 在现代前端框架（React、Vue、Angular）中都有良好的支持，可以无缝集成到各种项目中。在 React 中使用 TailwindCSS1. 安装和配置# 安装 TailwindCSS 和相关依赖npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p2. 配置文件// tailwind.config.jsmodule.exports = { content: [ "./src/**/*.{js,jsx,ts,tsx}", ], theme: { extend: {}, }, plugins: [],}3. 在 React 组件中使用// 基础使用function Button({ children, onClick }) { return ( <button onClick={onClick} className="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded" > {children} </button> );}// 响应式组件function Card({ title, content }) { return ( <div className="bg-white rounded-lg shadow-md p-6 w-full md:w-1/2 lg:w-1/3"> <h3 className="text-xl font-bold mb-2">{title}</h3> <p className="text-gray-600">{content}</p> </div> );}// 条件类名function StatusBadge({ status }) { const statusClasses = { active: 'bg-green-100 text-green-800', inactive: 'bg-gray-100 text-gray-800', error: 'bg-red-100 text-red-800', }; return ( <span className={`px-2 py-1 rounded ${statusClasses[status]}`}> {status} </span> );}4. 使用 clsx 或 classnames 库import clsx from 'clsx';function Button({ variant, size, children, className, ...props }) { const baseClasses = 'font-bold rounded'; const variantClasses = { primary: 'bg-blue-500 hover:bg-blue-600 text-white', secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800', danger: 'bg-red-500 hover:bg-red-600 text-white', }; const sizeClasses = { small: 'py-1 px-2 text-sm', medium: 'py-2 px-4', large: 'py-3 px-6 text-lg', }; return ( <button className={clsx( baseClasses, variantClasses[variant], sizeClasses[size], className )} {...props} > {children} </button> );}在 Vue 中使用 TailwindCSS1. 安装和配置# 安装 TailwindCSSnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p2. 配置文件// tailwind.config.jsmodule.exports = { content: [ "./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}", ], theme: { extend: {}, }, plugins: [],}3. 在 Vue 组件中使用<template> <!-- 基础使用 --> <button @click="handleClick" class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded" > 点击按钮 </button> <!-- 动态类名 --> <div :class="['bg-white', isActive ? 'bg-blue-500' : 'bg-gray-200']"> 动态类名 </div> <!-- 对象语法 --> <div :class="{ 'bg-blue-500': isActive, 'bg-gray-200': !isActive, 'text-white': isActive }" > 对象语法 </div></template><script>export default { data() { return { isActive: false, }; }, methods: { handleClick() { this.isActive = !this.isActive; }, },};</script>4. 组合式 API<template> <button @click="toggle" :class="buttonClasses" > {{ isActive ? '激活' : '未激活' }} </button></template><script setup>import { computed, ref } from 'vue';const isActive = ref(false);const buttonClasses = computed(() => { return [ 'font-bold py-2 px-4 rounded', isActive.value ? 'bg-blue-500 hover:bg-blue-600 text-white' : 'bg-gray-200 hover:bg-gray-300 text-gray-800' ];});function toggle() { isActive.value = !isActive.value;}</script>在 Angular 中使用 TailwindCSS1. 安装和配置# 安装 TailwindCSSnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init2. 配置文件// tailwind.config.jsmodule.exports = { content: [ "./src/**/*.{html,ts}", ], theme: { extend: {}, }, plugins: [],}3. 在 Angular 组件中使用// 组件类import { Component } from '@angular/core';@Component({ selector: 'app-button', template: ` <button (click)="handleClick()" [ngClass]="buttonClasses" > {{ buttonText }} </button> `, styles: []})export class ButtonComponent { isActive = false; get buttonText() { return this.isActive ? '激活' : '未激活'; } get buttonClasses() { return { 'bg-blue-500': this.isActive, 'bg-gray-200': !this.isActive, 'hover:bg-blue-600': this.isActive, 'hover:bg-gray-300': !this.isActive, 'text-white': this.isActive, 'text-gray-800': !this.isActive, 'font-bold': true, 'py-2': true, 'px-4': true, 'rounded': true }; } handleClick() { this.isActive = !this.isActive; }}在 Svelte 中使用 TailwindCSS1. 安装和配置# 安装 TailwindCSSnpm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p2. 在 Svelte 组件中使用<script> let isActive = false; function toggle() { isActive = !isActive; }</script><button on:click={toggle} class:bg-blue-500={isActive} class:bg-gray-200={!isActive} class:text-white={isActive} class:text-gray-800={!isActive} class="font-bold py-2 px-4 rounded"> {isActive ? '激活' : '未激活'}</button>最佳实践1. 组件封装// 创建可复用的组件const Button = ({ variant, size, children, ...props }) => { const variants = { primary: 'bg-blue-500 hover:bg-blue-600 text-white', secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-800', }; const sizes = { small: 'py-1 px-2 text-sm', medium: 'py-2 px-4', large: 'py-3 px-6 text-lg', }; return ( <button className={`font-bold rounded ${variants[variant]} ${sizes[size]}`} {...props} > {children} </button> );};2. 样式提取// 提取常用样式为常量const CARD_STYLES = 'bg-white rounded-lg shadow-md p-6';const BUTTON_STYLES = 'bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded';function Card({ title, content }) { return ( <div className={CARD_STYLES}> <h3 className="text-xl font-bold mb-2">{title}</h3> <p className="text-gray-600">{content}</p> </div> );}3. 响应式设计// 使用响应式类function ResponsiveGrid({ children }) { return ( <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> {children} </div> );}4. 性能优化// 使用 useMemo 优化类名计算import { useMemo } from 'react';function OptimizedButton({ variant, size, children }) { const className = useMemo(() => { return `font-bold rounded ${variant} ${size}`; }, [variant, size]); return <button className={className}>{children}</button>;}注意事项类名管理：在大型项目中，考虑使用类名管理工具代码可读性：避免在单个元素上使用过多的类名组件复用：将常用的样式组合封装为组件类型安全：在 TypeScript 中使用类型定义确保类名正确测试：确保在不同框架中样式表现一致
