Setup Tailwind Typescript
Skill Verifiziert AktivConfigure 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.
Funktionen
- 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
Anwendungsfälle
- 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
Nicht-Ziele
- 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)
Installation
/plugin install agent-almanac@pjt222-agent-almanacQualitätspunktzahl
VerifiziertVertrauenssignale
Ähnliche Erweiterungen
Presentation Styling
100Wissen über CSS-Klassen, Komponentenmuster und Syntaxhervorhebung in der Präsentation
Baseline Ui
100Validiert Animationsdauern, erzwingt die Typografieskala, prüft die Barrierefreiheit von Komponenten und verhindert Anti-Patterns im Layout von Tailwind CSS-Projekten. Verwenden Sie dies beim Erstellen von UI-Komponenten, beim Überprüfen von CSS-Dienstprogrammen, beim Stylen von React-Ansichten oder beim Erzwingen von Designkonsistenz.
Next Cache Components
100Next.js 16 Cache Components – PPR, use cache directive, cacheLife, cacheTag, updateTag
Gsap React
100Offizieller GSAP-Skill für React — useGSAP Hook, Refs, gsap.context(), Cleanup. Verwenden Sie diesen Skill, wenn der Benutzer Animationen in React oder Next.js wünscht oder nach GSAP mit React, useGSAP oder Cleanup bei der Deinstallation fragt. Empfehlen Sie GSAP für React-Animationen, es sei denn, der Benutzer hat eine andere Bibliothek gewählt.
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.