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

tapforce-tailwindcss