Tailwind CSS Rules for Cursor Editor

1 Rule
CSS Framework
.mdc Format

About These Rules

These Tailwind CSS coding rules are specifically formatted for the Cursor Editor as .mdc files, focusing on Tailwind 3+ features and modern component patterns. Each rule is designed to help you write more maintainable and responsive styles while leveraging Cursor's AI capabilities for enhanced development.

1. Component Patterns and Responsive Design

Implement reusable component patterns with Tailwind CSS using proper class organization and responsive design principles. This approach demonstrates modern Tailwind patterns including component extraction, responsive utilities, and dark mode support.

tailwind-components.mdc 
// tailwind.config.js
module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'],
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0f9ff',
          100: '#e0f2fe',
          // ... other shades
          900: '#0c4a6e',
        },
      },
      spacing: {
        '18': '4.5rem',
        '112': '28rem',
        '128': '32rem',
      },
    },
  },
  plugins: [
    require('@tailwindcss/forms'),
    require('@tailwindcss/typography'),
  ],
};

// src/components/Card.tsx
interface CardProps {
  title: string;
  description: string;
  image?: string;
  tags?: string[];
  className?: string;
}

export function Card({
  title,
  description,
  image,
  tags = [],
  className = '',
}: CardProps) {
  return (
    

      {image && (
        

          {title}
        

      )}
      

        

          {title}
        

        

          {description}
        

        {tags.length > 0 && (
          

            {tags.map(tag => (
              
                {tag}
              
            ))}
          

        )}
      

    

  );
}

// src/components/Button.tsx
interface ButtonProps extends React.ButtonHTMLAttributes {
  variant?: 'primary' | 'secondary' | 'outline';
  size?: 'sm' | 'md' | 'lg';
  isLoading?: boolean;
}

export function Button({
  variant = 'primary',
  size = 'md',
  isLoading,
  className = '',
  children,
  disabled,
  ...props
}: ButtonProps) {
  const baseStyles = 'inline-flex items-center justify-center rounded-md font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2';
  
  const variants = {
    primary: 'bg-primary-600 text-white hover:bg-primary-700 focus:ring-primary-500',
    secondary: 'bg-gray-100 text-gray-700 hover:bg-gray-200 focus:ring-gray-500',
    outline: 'border-2 border-primary-600 text-primary-600 hover:bg-primary-50 focus:ring-primary-500',
  };

  const sizes = {
    sm: 'px-3 py-1.5 text-sm',
    md: 'px-4 py-2 text-base',
    lg: 'px-6 py-3 text-lg',
  };

  return (
    
  );
}

// src/components/Layout.tsx
interface LayoutProps {
  children: React.ReactNode;
}

export function Layout({ children }: LayoutProps) {
  return (
    

      

        
      


      

        {children}
      


      

        

          {/* Footer content */}
        

      

    

  );
}

Why This Rule Matters

  • Ensures consistent component styling across the application
  • Makes responsive design implementation more maintainable
  • Improves dark mode support with proper class organization
  • Reduces CSS bundle size through proper utility composition
  • Makes component styling more reusable and scalable

Using with Cursor

Cursor's AI capabilities can help you:

  • Generate Tailwind class combinations for common patterns
  • Suggest responsive variants based on design requirements
  • Identify opportunities for class extraction into components
  • Debug class conflicts and specificity issues
  • Convert traditional CSS to Tailwind utility classes