ClineTailwind CSSCode Style

Tailwind CSS Cline Rules

Cline rules for Tailwind CSS: advanced patterns, animation, and scalable Tailwind architecture.

.clinerules

- Use Tailwind v4 with CSS-native configuration and @theme directive
- Apply @starting-style for enter animations without JavaScript
- Use anchor positioning (CSS Anchors) for tooltip and popover positioning
- Apply View Transitions API with Tailwind for page transition animations
- Use oklch color space in theme for perceptually uniform color palettes
- Apply @layer utilities for custom utilities that participate in Tailwind's purging
- Use postcss-import to split large CSS files into composable partials
- Apply Tailwind's JIT-only arbitrary properties for one-off values

How to use with Cline

Create a `.clinerules` file in your project root. Cline reads this file and applies the rules to all AI-assisted coding.

← All Cline rules All Tailwind CSS rules →

#tailwind#cline#css#animations#coding-rules

Related Rules

Python Cline Rules

ClinePython

Cline AI coding rules for Python: automated coding patterns and best practices for the Cline VS Code extension.

Code Style

python · clineCopy Ready

React Cline Rules

ClineReact

Cline rules for React: component patterns, performance, and modern React architecture.

Architecture

react · clineCopy Ready

Next.js Cline Rules

ClineNext.js

Cline rules for Next.js: full-stack patterns, deployment, and modern Next.js conventions.

Architecture

nextjs · clineCopy Ready

Docker Cline Rules

ClineDocker

Cline rules for Docker: container security, image optimization, and production container patterns.

Security

docker · clineCopy Ready