tailwind-react-guidelines

What problem does it solve?

This Skill unit provides a comprehensive guide to using TailwindCSS with React 19 in Vite Single Page Applications, simplifying component development and styling.

Core Features & Use Cases

• TailwindCSS Integration: Streamlined usage of Tailwind's utility classes within React components.
• Component Patterns: Best practices for building maintainable, scalable React components.
• Data Fetching & Form Handling: Guidance on using React Query and React Hook Form for efficient data handling and form validation.
• Testing: Recommendations for testing React components, hooks, and form logic using Vitest and React Testing Library.
• Performance Optimization: Tips for improving the performance of Vite-based applications.

Quick Start

Create a new React component using the Tailwind guidelines. Example:

npx create-react-app my-app
cd my-app
npm install tailwindcss @tailwindcss/react @tailwindcss/postcss7-plugin postcss autoprefixer
npx tailwindcss init -p

Follow the guidelines in the tailwind-react-guidelines directory for styling and component development.