Setup Tailwind Typescript
Skill Verified ActiveConfigure 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.
Features
- 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
Use Cases
- 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
Non-Goals
- 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-almanacQuality Score
VerifiedTrust Signals
Similar Extensions
Presentation Styling
100Knowledge about CSS classes, component patterns, and syntax highlighting in the presentation
Baseline Ui
100Validates animation durations, enforces typography scale, checks component accessibility, and prevents layout anti-patterns in Tailwind CSS projects. Use when building UI components, reviewing CSS utilities, styling React views, or enforcing design consistency.
Next Cache Components
100Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Gsap React
100Official GSAP skill for React — useGSAP hook, refs, gsap.context(), cleanup. Use when the user wants animation in React or Next.js, or asks about GSAP with React, useGSAP, or cleanup on unmount. Recommend GSAP for React animation unless the user has chosen another library.
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.