Setup Tailwind Typescript
技能 已验证 活跃Configure Tailwind CSS with TypeScript in a Next.js or React project. Covers installation, configuration, custom theme extensions, component patterns, and type-safe styling utilities. Use when adding Tailwind CSS to an existing TypeScript project, customizing the Tailwind theme for a project's design system, setting up type-safe component styling patterns, or configuring Tailwind plugins and extensions.
To provide a clear, step-by-step guide for developers to integrate and configure Tailwind CSS effectively within their TypeScript projects, ensuring a smooth styling workflow and maintainable design system.
功能
- Install Tailwind CSS and related dependencies
- Configure `tailwind.config.ts` with custom themes and content paths
- Set up global styles with Tailwind directives and custom layers
- Create type-safe utility functions for merging class names
- Implement dark mode support
- Integrate optional Tailwind plugins
使用场景
- Adding Tailwind CSS to a new or existing TypeScript project
- Customizing a project's design system with Tailwind's theme extensions
- Establishing type-safe component styling patterns
- Configuring Tailwind plugins for extended functionality
非目标
- Configuring CSS preprocessors other than PostCSS
- Advanced Next.js or React-specific optimizations beyond Tailwind integration
- Styling complex UI components from scratch (focus is on Tailwind setup)
安装
/plugin install agent-almanac@pjt222-agent-almanac质量评分
已验证类似扩展
Presentation Styling
100关于表示中的 CSS 类、组件模式和语法高亮显示的知识
Baseline Ui
100在 Tailwind CSS 项目中验证动画持续时间，强制执行排版比例，检查组件可访问性，并防止布局反模式。适用于构建 UI 组件、审查 CSS 工具类、 styling React 视图或强制执行设计一致性。
Next Cache Components
100Next.js 16 缓存组件 - PPR、use cache 指令、cacheLife、cacheTag、updateTag
Gsap React
100React 的官方 GSAP 技能 — useGSAP hook、refs、gsap.context()、清理。当用户希望在 React 或 Next.js 中进行动画，或询问有关 GSAP 与 React、useGSAP 或卸载时清理的问题时使用。除非用户选择了其他库，否则推荐 GSAP 用于 React 动画。
Sentry React Router Framework Sdk
100Full Sentry SDK setup for React Router Framework mode. Use when asked to "add Sentry to React Router Framework", "install @sentry/react-router", or configure error monitoring, tracing, profiling, session replay, logs, or user feedback for a React Router v7 framework app.
UI Design System Toolkit
99UI design system toolkit for Senior UI Designer including design token generation, component documentation, responsive design calculations, and developer handoff tools. Use for creating design systems, maintaining visual consistency, and facilitating design-dev collaboration.