Back to Details

angular-tailwind

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Angular + Tailwind CSS

Angular + Tailwind CSS

Version: Tailwind CSS 4.x (2025) Tags: Tailwind CSS, Styling, Utility-first, CSS
References: Tailwind CSS • Angular Tailwind
版本： Tailwind CSS 4.x（2025年） 标签： Tailwind CSS, 样式开发, 实用优先, CSS
参考文档： Tailwind CSS • Angular集成Tailwind指南

API Changes

API变更

This section documents recent version-specific API changes.
  • NEW: Tailwind CSS v4 — New engine with improved performance source
  • NEW: @tailwindcss/vite — Native Vite support
  • NEW: CSS-first configuration — Configure Tailwind with CSS instead of config file
  • NEW: Angular 17+ support — Full compatibility with standalone components
本部分记录了近期版本对应的API变更。
  • 新特性：Tailwind CSS v4 — 搭载性能大幅提升的全新引擎 来源
  • 新特性：@tailwindcss/vite — 原生支持Vite
  • 新特性：CSS优先配置 — 可直接用CSS配置Tailwind，无需单独的配置文件
  • 新特性：支持Angular 17+ — 与独立组件完全兼容

Best Practices

最佳实践

  • Install Tailwind CSS
bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
  • Configure tailwind.config.js
js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • Add directives to styles
css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • Use Tailwind v4 with Angular
bash
npm install tailwindcss @tailwindcss/vite
ts
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});
css
@import "tailwindcss";
  • Use utility classes in templates
ts
@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 {}
  • Use ngClass for conditional classes
ts
@Component({
  template: `
    <div [ngClass]="isActive ? 'bg-blue-500' : 'bg-gray-200'">
      Content
    </div>
  `
})
export class MyComponent {}
  • Use class binding
ts
@Component({
  template: `
    <div [class]="containerClasses">
      Content
    </div>
  `
})
export class MyComponent {
  containerClasses = 'p-4 bg-white rounded-lg shadow';
}
  • Create custom components with Tailwind
ts
@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]}`;
  }
}
  • Use @apply for reusable styles
css
@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;
  }
}
  • Use theme customization
js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      }
    }
  }
}
  • Use Dark mode
js
// tailwind.config.js
module.exports = {
  darkMode: 'class',
}
ts
@Component({
  template: `
    <div class="dark:bg-gray-900 dark:text-white">
      Content
    </div>
  `
})
export class DarkComponent {}
  • 安装Tailwind CSS
bash
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init
  • 配置tailwind.config.js
js
/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./src/**/*.{html,ts}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}
  • 向样式文件中添加指令
css
@tailwind base;
@tailwind components;
@tailwind utilities;
  • 在Angular中使用Tailwind v4
bash
npm install tailwindcss @tailwindcss/vite
ts
// vite.config.ts
import tailwindcss from '@tailwindcss/vite';

export default defineConfig({
  plugins: [tailwindcss()],
});
css
@import "tailwindcss";
  • 在模板中使用工具类
ts
@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实现条件类名
ts
@Component({
  template: `
    <div [ngClass]="isActive ? 'bg-blue-500' : 'bg-gray-200'">
      Content
    </div>
  `
})
export class MyComponent {}
  • 使用类名绑定
ts
@Component({
  template: `
    <div [class]="containerClasses">
      Content
    </div>
  `
})
export class MyComponent {
  containerClasses = 'p-4 bg-white rounded-lg shadow';
}
  • 基于Tailwind创建自定义组件
ts
@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定义可复用样式
css
@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;
  }
}
  • 自定义主题
js
// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f9ff',
          500: '#0ea5e9',
          900: '#0c4a6e',
        }
      }
    }
  }
}
  • 使用深色模式
js
// tailwind.config.js
module.exports = {
  darkMode: 'class',
}
ts
@Component({
  template: `
    <div class="dark:bg-gray-900 dark:text-white">
      Content
    </div>
  `
})
export class DarkComponent {}