/context-load-tailwind

allowed-tools: WebFetch, Read, Bash(fd:*), Bash(rg:*), Bash(wc:*), mcp__context7__resolve-library-id, mcp__context7__get-library-docs
name: "Context Load Tailwind"
description: "Load comprehensive Tailwind CSS documentation context with adaptive framework integration and project-specific optimization"
author: "wcygan"
tags: ["context","web"]
version: "1.0.0"
created_at: "2025-07-14T00:00:00Z"
updated_at: "2025-07-14T00:00:00Z"

Context

• Session ID: !`gdate +%s%N`
• Current directory: !`pwd`
• Target: Tailwind CSS utility-first styling framework
• Project type detection: !`fd "(package\.json|deno\.json|Cargo\.toml|pom\.xml|requirements\.txt)$" . -d 2 | head -3 || echo "No config files"`
• Existing CSS/styling: !`fd "\.(css|scss|sass|less|styl)$" . | wc -l | tr -d ' ' || echo "0"`
• Framework indicators: !`rg "(react|vue|fresh|svelte|angular)" . --type json | head -3 | cut -d: -f3 | sort -u || echo "No framework detected"`
• Tailwind config exists: !`fd "tailwind\.config\.(js|ts|mjs|cjs)$" . | head -1 || echo "No Tailwind config found"`
• CSS build tools: !`rg "(postcss|webpack|vite|rollup|esbuild)" . --type json | head -2 | cut -d: -f3 | sort -u || echo "No build tools detected"`
• Fresh project: !`fd "fresh\.config\.(js|ts)$" . | head -1 || echo "Not a Fresh project"`

Your Task

STEP 1: Initialize comprehensive documentation loading session

• CREATE session state file: `/tmp/tailwind-context-$SESSION_ID.json`
• SET initial state:

  {
    "sessionId": "$SESSION_ID",
    "target": "tailwind-css",
    "framework": "auto-detect",
    "phase": "initialization",
    "sources_loaded": [],
    "integration_context": {},
    "optimization_recommendations": []
  }

STEP 2: Framework-specific context analysis

TRY:

IF Fresh project detected:

• SET framework = "fresh"
• FOCUS on Fresh 2.0 alpha integration patterns
• PRIORITIZE CSS fallback strategies for plugin reliability
• INCLUDE AppShell patterns and islands architecture

ELSE IF React/Preact indicators found:

• SET framework = "react"
• FOCUS on component-based utility composition
• PRIORITIZE conditional class application patterns
• INCLUDE props-based styling strategies

ELSE IF Vue indicators found:

• SET framework = "vue"
• FOCUS on SFC styling patterns
• PRIORITIZE dynamic class binding
• INCLUDE Vue-specific integration guides

ELSE:

• SET framework = "vanilla"
• FOCUS on general utility-first principles
• PRIORITIZE build tool integration
• INCLUDE framework-agnostic patterns

CATCH (detection_failed):

• LOG detection issues to session state
• CONTINUE with comprehensive general guidance
• PROVIDE multi-framework compatibility recommendations

STEP 3: Adaptive documentation loading strategy

IF Context7 MCP server available:

• USE mcp__context7__resolve-library-id with "tailwind-css"
• LOAD structured documentation via mcp__context7__get-library-docs
• FOCUS on framework-specific integration topics
• EXTRACT build configuration and optimization guidance

ELSE:

• EXECUTE comprehensive WebFetch strategy for key sources:

FOR EACH source IN core_documentation_urls:

1. **Utility-First Principles**: `https://tailwindcss.com/docs/styling-with-utility-classes`

• EXTRACT: Design system approach, composition patterns, maintainability benefits
• SYNTHESIZE: Framework-specific application strategies

2. **State Management**: `https://tailwindcss.com/docs/hover-focus-and-other-states`

• EXTRACT: Pseudo-class variants, interactive patterns, group/peer modifiers
• ANALYZE: Framework event handling integration

3. **Responsive Design**: `https://tailwindcss.com/docs/responsive-design`

• EXTRACT: Mobile-first methodology, breakpoint strategies, responsive utilities
• CORRELATE: With detected framework's responsive patterns

4. **Customization**: `https://tailwindcss.com/docs/adding-custom-styles`

• EXTRACT: Theme extension, arbitrary values, component extraction
• PRIORITIZE: Based on project complexity and requirements

5. **Performance**: `https://tailwindcss.com/docs/optimizing-for-production`

• EXTRACT: Build optimization, purging strategies, JIT compilation
• INTEGRATE: With detected build tools and framework setup

STEP 4: Framework integration synthesis

CASE detected_framework:

WHEN "fresh":

• SYNTHESIZE Fresh 2.0 specific integration:
• JSR imports and plugin configuration
• CSS fallback implementation in `static/styles.css`
• Islands architecture styling patterns
• AppShell component integration
• Docker build optimization for assets

WHEN "react":

• SYNTHESIZE React ecosystem integration:
• Component library development patterns
• Props-based conditional styling
• TypeScript integration for class validation
• CSS-in-JS migration strategies
• Testing patterns for styled components

WHEN "vue":

• SYNTHESIZE Vue ecosystem integration:
• SFC styling best practices
• Dynamic class binding patterns
• Composition API integration
• Vuetify/Quasar migration strategies
• Component library development

WHEN "vanilla":

• SYNTHESIZE general web integration:
• PostCSS configuration patterns
• Build tool integration (Webpack, Vite, esbuild)
• Legacy browser support strategies
• Progressive enhancement patterns
• Performance monitoring setup

STEP 5: Advanced optimization and best practices synthesis

• COMPILE framework-specific performance recommendations:
• Bundle size optimization for detected build tools
• Runtime performance patterns for detected framework
• Development experience enhancements
• Production deployment strategies

• GENERATE project-specific implementation guidance:
• Setup instructions for detected environment
• Migration strategies from existing CSS
• Integration with detected styling approach
• Testing and quality assurance patterns

STEP 6: State management and artifact creation

• UPDATE session state with loaded documentation sources
• CREATE framework-specific integration guide: `/tmp/tailwind-cont