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

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