Does it include custom CSS animations?

Yes, it provides pre-configured keyframes and utility classes for common UI transitions like fade-in, slide-up, and slide-down.

Does this skill support Next.js App Router?

Yes, the patterns include specific configurations and implementation examples for Next.js App Router layout files and client components.

Can I customize the brand colors?

Absolutely; the skill provides a tailwind.config.ts template with a customizable brand color scale ranging from 50 to 900.

Is a mobile navigation menu included?

Yes, the skill includes a complete responsive header component featuring a mobile-friendly toggle menu and desktop navigation links.

Tailwind CSS UI Patterns

Name: Tailwind CSS UI Patterns
Author: AmplifyAutomation

byAmplifyAutomation

0•

Herramientas de Diseño

Accelerates React and Next.js development with standardized Tailwind CSS design patterns, responsive layouts, and accessible UI components.

This skill provides a comprehensive toolkit for styling modern web applications using Tailwind CSS and React/Next.js. It offers pre-configured theme settings for brand colors, typography, and animations, alongside mobile-first responsive design patterns. By implementing standardized dark mode support and a library of common UI components like headers, hero sections, and pricing grids, it ensures developers can build consistent, high-performance interfaces quickly while adhering to modern frontend best practices.

Características Principales

01Optimized Tailwind configuration with custom brand colors and animations

020 GitHub stars

03Mobile-first responsive design patterns for layouts and typography

04Ready-to-use responsive navigation and header implementations

05Reusable React component templates for Hero, Features, and Pricing sections

06Built-in dark mode support with system-preference detection

Casos de Uso

01Building professional marketing landing pages for SaaS products with Next.js

02Adding dark mode and mobile-responsive breakpoints to existing web projects

03Implementing a consistent design system across a React-based web dashboard

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add amplifyautomation/amplify-plugin-marketplace tailwind-ui

For use in Claude.ai and ChatGPT

Download Skill