How does TailwindCSS integrate with frameworks like React, Vue, and Angular? - 面试题

TailwindCSS has excellent support in modern frontend frameworks (React, Vue, Angular) and can be seamlessly integrated into various projects.

Using TailwindCSS in React

1. Installation and Configuration

bash
# Install TailwindCSS and related dependencies
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configuration File

javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Using in React Components

jsx
// Basic usage
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>
  );
}

// Responsive component
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>
  );
}

// Conditional class names
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. Using clsx or classnames Library

jsx
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>
  );
}

Using TailwindCSS in Vue

1. Installation and Configuration

bash
# Install TailwindCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Configuration File

javascript
// tailwind.config.js
module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{vue,js,ts,jsx,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Using in Vue Components

vue
<template>
  <!-- Basic usage -->
  <button 
    @click="handleClick"
    class="bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded"
  >
    Click button
  </button>
  
  <!-- Dynamic class names -->
  <div :class="['bg-white', isActive ? 'bg-blue-500' : 'bg-gray-200']">
    Dynamic class names
  </div>
  
  <!-- Object syntax -->
  <div 
    :class="{
      'bg-blue-500': isActive,
      'bg-gray-200': !isActive,
      'text-white': isActive
    }"
  >
    Object syntax
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false,
    };
  },
  methods: {
    handleClick() {
      this.isActive = !this.isActive;
    },
  },
};
</script>

4. Composition API

vue
<template>
  <button 
    @click="toggle"
    :class="buttonClasses"
  >
    {{ isActive ? 'Active' : 'Inactive' }}
  </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>

Using TailwindCSS in Angular

1. Installation and Configuration

bash
# Install TailwindCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

2. Configuration File

javascript
// tailwind.config.js
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

3. Using in Angular Components

typescript
// Component class
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 ? 'Active' : 'Inactive';
  }
  
  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;
  }
}

Using TailwindCSS in Svelte

1. Installation and Configuration

bash
# Install TailwindCSS
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

2. Using in Svelte Components

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 ? 'Active' : 'Inactive'}
</button>

Best Practices

1. Component Encapsulation

jsx
// Create reusable components
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. Style Extraction

jsx
// Extract common styles as constants
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. Responsive Design

jsx
// Use responsive classes
function ResponsiveGrid({ children }) {
  return (
    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      {children}
    </div>
  );
}

4. Performance Optimization

jsx
// Use useMemo to optimize class name calculations
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>;
}

Considerations

Class Name Management: Consider using class name management tools in large projects
Code Readability: Avoid using too many class names on a single element
Component Reusability: Encapsulate common style combinations as components
Type Safety: Use type definitions in TypeScript to ensure correct class names
Testing: Ensure consistent style behavior across different frameworks