Tapforce Tailwind CSS Skill
This skill provides best practices for setting up and developing UX/UI for projects using Tailwind CSS ^4.
When to Use
Use this skill when:
- Setting up a new project that needs Tailwind CSS support
- Working with projects that have Tailwind CSS installed
- Configuring Tailwind CSS ^4 for different project types
- Implementing UI components with Tailwind CSS utilities
Requirements
- Project uses Tailwind CSS ^4 or needs to start with Tailwind CSS
- Project must be supported by Tailwind CSS (see installation guides)
- Node.js ^20.0.0 environment
- Prefer pnpm ^10.0.0 as package manager
Project Validation
Check Existing Installation
If the project already has Tailwind CSS installed:
- Check version: Verify Tailwind CSS version is ^4.0.0
- Compatibility: Ensure project type supports Tailwind CSS ^4
- Configuration: Check for proper Tailwind CSS setup
If version doesn't match ^4.0.0, refuse to continue and recommend upgrade.
Project Type Support
Verify project type compatibility from official documentation:
- Vite: https://tailwindcss.com/docs/installation/using-vite
- PostCSS: https://tailwindcss.com/docs/installation/using-postcss
- Tailwind CLI: https://tailwindcss.com/docs/installation/tailwind-cli
- Framework guides: https://tailwindcss.com/docs/installation/framework-guides
- Play CDN: https://tailwindcss.com/docs/installation/play-cdn
Installation Setup
Preferred Project Setup
For best practices, projects should:
- Use Node.js as base
- Use pnpm as package manager
- Use popular JS frameworks (SvelteKit, Next.js, Nuxt.js, etc.)
- Default to SvelteKit if framework not decided
Installation by Project Type
See installation guide for detailed setup instructions based on project type.
Tailwind CSS ^4 Compatibility
Tailwind CSS ^4 has breaking changes compared to ^3. See compatibility guide for detailed information.
Core Concepts
Styling with Utility Classes
Use utility classes for styling instead of custom CSS. See styling guide for comprehensive examples.
Hover, Focus, and Other States
Implement interactive states using Tailwind's state variants. See states guide for patterns and examples.
Responsive Design
Create responsive layouts using Tailwind's breakpoint system. See responsive guide for implementation patterns.
Dark Mode
Implement dark mode support using Tailwind's dark mode utilities. See dark mode guide for setup strategies.
Theme and Colors
Customize themes and work with colors effectively. See theme guide for customization patterns.
Adding Custom Styles
Add custom CSS when utilities aren't sufficient. See custom styles guide for best practices.
Detecting Classes in Source Files
Understand how Tailwind detects classes in your source files. See detection guide for configuration.
Functions and Directives
Use Tailwind's CSS functions and directives. See functions guide for advanced usage.
Rules
This skill includes the following rules:
Utility-First Approach
- Rule: utility-first
- Description: Rules for preferring Tailwind utilities over custom CSS
Arbitrary Values
- Rule: arbitrary-values
- Description: Rules for using arbitrary values when built-in utilities are insufficient
CSS Organization
- Rule: css-organization
- Description: Rules for organizing CSS files and custom styles
Utility Directives
- Rule: utility-directives
- Description: Rules for defining custom utilities with @utility directive
Color Consistency
- Rule: color-consistency
- Description: Rules for maintaining consistent color value formats
Version Validation
- Rule: version-validation
- Description: Rules for validating Tailwind CSS ^4 installation and compatibility
Best Practices
- Always prefer Tailwind ^4 utility classes over custom CSS
- Use arbitrary values for custom styling when built-in classes are insufficient
- Centralize custom CSS variables in the root CSS file
- Use @utility directive for shared custom styles
- Maintain consistent color value formats (hsl() by default, oklch() for shadcn-svelte)
- Reference official documentation for framework-specific setup
- Test responsive designs across all breakpoints
- Implement proper dark mode support
- Use semantic HTML with Tailwind utilities for accessibility