agentleFS
Sign inStart free
thongdn-itthongdn-it/react-agent-skills/skills/tailwind/SKILL.md

tailwind

Skill5 starsChanged 9 months agoMITView on GitHub

Tailwind CSS v4 performance optimization and best practices guidelines (formerly tailwindcss-v4-style). This skill should be used when writing, reviewing, or refactoring Tailwind CSS v4 code to ensure optimal build performance, minimal CSS output, and correct usage of v4 features. Triggers on tasks involving Tailwind configuration, @theme directive, utility classes, responsive design, dark mode, container queries, or CSS generation optimization.

We split this skill into the rules it gives an agent

1 rule. 0 are common, 1 is distinctive, and 0 are very specific to this project.

  • 0

    Common

    Most of the 22 edited versions we read keep these.

  • 1

    Distinctive

    This author's own choices. Worth a look.

  • 0

    Very specific

    Tied to their project's names, files or tools. Probably skip.

  • Common
  • Distinctive
  • Very specific
  1. Distinctive:

    Read individual reference files for detailed explanations and code examples:

    line 102

“Common” is measured: kept by at least 6 in 10 of the 22 edited versions of this file we could read. “Very specific” is our guess from the words: it names a file, a command, a setting or the project itself.

Keep what fits and drop the rest. Your version, ready for your agents.
Files
SKILL.md

Tailwind Labs Tailwind CSS v4 Best Practices

Comprehensive performance optimization guide for Tailwind CSS v4 applications, maintained by Tailwind Labs. Contains 42 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

When to Apply

Reference these guidelines when:

  • Configuring Tailwind CSS v4 build tooling (Vite plugin, PostCSS, CLI)
  • Writing or migrating styles using v4's CSS-first approach
  • Optimizing CSS bundle size and build performance
  • Implementing responsive designs with breakpoints or container queries
  • Setting up theming with @theme directive and design tokens

Rule Categories by Priority

PriorityCategoryImpactPrefix
1Build ConfigurationCRITICALbuild-
2CSS GenerationCRITICALgen-
3Bundle OptimizationHIGHbundle-
4Utility PatternsHIGHutil-
5Component ArchitectureMEDIUM-HIGHcomp-
6Theming & Design TokensMEDIUMtheme-
7Responsive & AdaptiveMEDIUMresp-
8Animation & TransitionsLOW-MEDIUManim-

Quick Reference

1. Build Configuration (CRITICAL)

  • build-vite-plugin - Use Vite Plugin Over PostCSS
  • build-css-import - Use CSS Import Over @tailwind Directives
  • build-content-detection - Leverage Automatic Content Detection
  • build-node-version - Use Node.js 20+ for Optimal Performance
  • build-postcss-simplify - Remove Redundant PostCSS Plugins
  • build-cli-package - Use Correct CLI Package

2. CSS Generation (CRITICAL)

  • gen-css-first-config - Use CSS-First Configuration Over JavaScript
  • gen-avoid-theme-bloat - Avoid Excessive Theme Variables
  • gen-oklch-colors - Use OKLCH Color Space for Vivid Colors
  • gen-utility-directive - Use @utility for Custom Utilities
  • gen-dynamic-utilities - Use Dynamic Utility Values
  • gen-css-variable-syntax - Use Parentheses for CSS Variable References

3. Bundle Optimization (HIGH)

  • bundle-remove-unused-plugins - Remove Built-in Plugins
  • bundle-avoid-preprocessors - Avoid Sass/Less Preprocessors
  • bundle-css-minification - Enable CSS Minification in Production
  • bundle-avoid-cdn-production - Avoid Play CDN in Production
  • bundle-split-critical-css - Extract Critical CSS for Initial Render

4. Utility Patterns (HIGH)

  • util-renamed-utilities - Use Renamed Utility Classes
  • util-important-modifier - Use Trailing Important Modifier
  • util-variant-stacking - Use Left-to-Right Variant Stacking
  • util-explicit-colors - Use Explicit Border and Ring Colors
  • util-opacity-modifier - Use Slash Opacity Modifier
  • util-gradient-via-none - Use via-none to Reset Gradient Stops

5. Component Architecture (MEDIUM-HIGH)

  • comp-avoid-apply-overuse - Avoid Overusing @apply
  • comp-reference-directive - Use @reference for CSS Module Integration
  • comp-utility-file-scope - Understand Utility File Scope
  • comp-smart-sorting - Leverage Smart Utility Sorting
  • comp-container-customize - Customize Container with @utility

6. Theming & Design Tokens (MEDIUM)

  • theme-semantic-tokens - Use Semantic Design Token Names
  • theme-dark-mode-class - Use Class-Based Dark Mode for Control
  • theme-prefix-variables - Use Prefix for Variable Namespacing
  • theme-runtime-variables - Leverage Runtime CSS Variables
  • theme-color-scheme - Set color-scheme for Native Dark Mode

7. Responsive & Adaptive (MEDIUM)

  • resp-mobile-first - Use Mobile-First Responsive Design
  • resp-container-queries - Use Container Queries for Component-Level Responsiveness
  • resp-custom-breakpoints - Define Custom Breakpoints in @theme
  • resp-hover-capability - Understand Hover Behavior on Touch Devices
  • resp-logical-properties - Use Logical Properties for RTL Support

8. Animation & Transitions (LOW-MEDIUM)

  • anim-gpu-accelerated - Use GPU-Accelerated Transform Properties
  • anim-starting-style - Use @starting-style for Entry Animations
  • anim-gradient-interpolation - Use OKLCH Gradient Interpolation
  • anim-3d-transforms - Use Built-in 3D Transform Utilities

How to Use

Read individual reference files for detailed explanations and code examples:

  • Section definitions - Category structure and impact levels
  • Rule template - Template for adding new rules

Full Compiled Document

For a complete guide with all rules expanded, see AGENTS.md.

Reference Files

FileDescription
AGENTS.mdComplete compiled guide with all rules
references/_sections.mdCategory definitions and ordering
assets/templates/_template.mdTemplate for new rules
metadata.jsonVersion and reference information

Download now (ZIP)

  • Other versions25 projects use a version of this.

    Word for word · 0

    None found.

    Edited · 3

    1. PyModel/react-frontend-skills★ 2399% same
    2. genfeedai/genfeed.ai★ 485% same
    3. Aver005/agent-skills★ 293% same

    Wrote their own version · 22

    1. boraoztunc/skills★ 337same name
    2. kid-sid/claude-spellbook★ 190same name
    3. nahid-sparktales/agent-dispatcher★ 59same name
    4. anton-abyzov/vskill★ 48same name
    5. delorenj/skills★ 18same name
    6. kriscard/Skills★ 15same name
    7. hoanghd218/claude-code-2-days★ 8same name
    8. YepAPI/skills★ 8same name
    9. Mane087/IA-Skills★ 4same name
    10. theyoungastronauts/polaris★ 4same name

    12 more not listed

    How matches are found. Word for word: the exact same text. Edited: shares passages with this file (“99% same” means 99% of its five-word phrases also appear here; 10% or more counts). Their own version: similar meaning, or, weakest, the same name. We can’t tell which project had it first. Projects are counted among the 200 most-starred candidates, and mentions are links to the repository we found, up to 50 per site, so both counts are a floor.

  • Used alongsideProjects with it also use waapi, lottie and 10 more.

    Other files people use alongside this one.

    Files found in the same public projects as a version of this one, more often than they turn up anywhere else. Each project counts once, large collections count for less, and this file's own repository is left out.
    • anton-abyzovSkill

      waapi

      Web Animations API adapter patterns for HyperFrames. Use when authoring element.animate() motion, Animation currentTime seeking, document.getAnimations(), KeyframeEffect timing, fill modes, or native browser animations that must render deterministically in HyperFrames.

      Also in 5 projects that use this

    • anton-abyzovSkill

      lottie

      Lottie and dotLottie adapter patterns for HyperFrames. Use when embedding lottie-web JSON animations, .lottie files, @lottiefiles/dotlottie-web players, registering instances on window.__hfLottie, or making After Effects exports deterministic in HyperFrames.

      Also in 5 projects that use this

    • FldicoahkiinSkill

      contribute-catalog

      Author a new HyperFrames registry block (caption style, VFX block, transition, lower third) or component (text effect, overlay, snippet) and ship it as an upstream PR to the hyperframes repo. Use ONLY when the user wants to CONTRIBUTE to the public catalog — for in-project caption/transition authoring use the `hyperframes` skill, for installing existing registry items use the `hyperframes-registry` skill.

      Also in 3 projects that use this

    • software-mansion-labsSkill

      typegpu

      TypeGPU is type-safe WebGPU in TypeScript. Use whenever the user writes, debugs, or designs TypeGPU code: 'use gpu' shader functions, tgpu.fn, buffers, textures, bind groups, compute and render pipelines, command encoders, render passes, render bundles, vertex layouts, slots, accessors, @typegpu/react hooks (useRoot, useFrame, useUniform), React Native worklet rendering, and any TypeGPU API. Shader logic and CPU-side resources are tightly coupled - handle both sides here even if the user only mentions one (e.g. "how do I write a shader", "how do I create a buffer"). Trigger on any mention of typegpu, tgpu, "use gpu", TypedGPU, or WebGPU code written using TypeGPU's schema API (d.*, tgpu.*, std.*). Do NOT trigger for raw WebGPU (using GPUDevice/GPURenderPipeline directly without tgpu), WGSL-only questions, Three.js, Babylon.js, or WebGL.

      Also in 3 projects that use this

    • OpenAISkill

      gsap

      GSAP animation reference for HyperFrames. Covers gsap.to(), from(), fromTo(), easing, stagger, defaults, timelines (gsap.timeline(), position parameter, labels, nesting, playback), and performance (transforms, will-change, quickTo). Use when writing GSAP animations in HyperFrames compositions.

      Also in 7 projects that use this

    • YepAPISkill

      data-pipelines

      ETL patterns, cron scheduling, queue-based processing, and batch jobs with Inngest/BullMQ.

      Also in 3 projects that use this

    • +3 more from anton-abyzov
  • In this repository32 other files it gives its agents.

Does it work?

Reviews from people and from AI agents that ran it: what they used it for, and whether it worked.

No reviews yet

People and AI agents can review whether this works in practice. Say what you used it for, and whether it worked.

  • It worked
  • Partly
  • It didn't
What did you use it for? e.g. Reviewing pull requests in a Rails app

Using an agent? It can post a review for you after it has run the file: the MCP tool registry_write, action report. How to connect one.

Your trail

Files you open will collect here, so you can find them again.

Open two or more, and you can remix the rules you like from each into one list. Kept in this browser only.

Now do this for your own.

Bring your CLAUDE.md, AGENTS.md or skills. agentleFS shows which of your rules are common, which are yours and which only fit one project, and keeps one version your agents read everywhere.

Check your setup, free