angular-tailwind

用途

Angular + Tailwind CSS 用于在 Angular 应用中使用 Tailwind CSS 进行样式开发，适用于处理 Tailwind 配置、实用优先（utility-first）CSS，以及用 Tailwind 为 Angular 应用添加样式的场景。资料标注版本为 Tailwind CSS 4.x（2025），标签包括 Tailwind CSS、Styling、Utility-first、CSS。

版本与 API 变化

资料记录了近期与版本相关的 API 变化：

新增：Tailwind CSS v4 —— 新引擎，性能有所改进。
新增：@tailwindcss/vite —— 原生 Vite 支持。
新增：CSS 优先配置 —— 使用 CSS 而非配置文件来配置 Tailwind。
新增：Angular 17+ 支持 —— 与独立组件（standalone components）完全兼容。

主要能力与使用方式

安装 Tailwind CSS

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init

配置 tailwind.config.js

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

在样式中添加指令

@tailwind base;
@tailwind components;
@tailwind utilities;

在 Angular 中使用 Tailwind v4

npm install tailwindcss @tailwindcss/vite

// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});

@import "tailwindcss";

在模板中使用实用类

@Component({
  template: `
    <div class="flex items-center justify-between p-4 bg-white shadow rounded-lg">
      <h1 class="text-2xl font-bold text-gray-800">Title</h1>
      <button class="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600">
        Click
      </button>
    </div>
  `
})
export class CardComponent {}

使用 ngClass 处理条件类

@Component({
  template: `
    <div [ngClass]="isActive ? 'bg-blue-500' : 'bg-gray-200'">
      Content
    </div>
  `
})
export class MyComponent {}

使用 class 绑定

@Component({
  template: `
    <div [class]="containerClasses">
      Content
    </div>
  `
})
export class MyComponent {
  containerClasses = 'p-4 bg-white rounded-lg shadow';
}

使用 Tailwind 创建自定义组件

@Component({
  selector: 'app-button',
  template: `
    <button [class]="buttonClasses">
      <ng-content></ng-content>
    </button>
  `
})
export class ButtonComponent {
  @Input() variant: 'primary' | 'secondary' = 'primary';
  
  get buttonClasses() {
    const base = 'px-4 py-2 rounded font-medium transition';
    const variants = {
      primary: 'bg-blue-500 text-white hover:bg-blue-600',
      secondary: 'bg-gray-200 text-gray-800 hover:bg-gray-300'
    };
    return `${base} ${this.variants[this.variant]}`;
  }
}

使用 @apply 复用样式

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
  }
  
  .card {
    @apply bg-white rounded-lg shadow p-4;
  }
}

主题定制

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      }
    }
  }
}

暗色模式

// tailwind.config.js
module.exports = {
  darkMode: 'class',
}

@Component({
  template: `
    <div class="dark:bg-gray-900 dark:text-white">
      Content
    </div>
  `
})
export class DarkComponent {}

适用场景

适用于需要在 Angular 项目中引入 Tailwind CSS、配置 Tailwind、以实用优先方式编写样式、构建可复用样式组件、定制主题或实现暗色模式的开发场景。资料提到与 Angular 17+ 独立组件完全兼容。

限制

资料未提供关于收费、价格、平台支持范围、性能数据或具体使用限制的说明，这些内容暂未提供。