Cursor Rules for
Tailwind CSS

Tailwind CSS is a utility-first CSS framework that allows developers to build modern, responsive user interfaces efficiently. This rule provides guidance on Tailwind CSS conventions, utility classes, and best practices to help you create clean, maintainable UI code within your projects.

What this rule does

The Tailwind CSS rule serves as a quick reference guide for working with Tailwind in your projects. It covers key concepts including responsive design, state variants, component extraction, arbitrary values, and spacing utilities. By following these conventions, you can maintain consistency in your UI development and leverage Tailwind's powerful features effectively.

Tailwind CSS best practices

Responsive design

The rule emphasizes Tailwind's mobile-first approach to responsive design. Using responsive prefixes like md: and lg:, you can specify how elements should appear at different screen sizes:

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full width on mobile, half on medium, one-third on large screens -->
</div>

This approach lets you build interfaces that adapt seamlessly across devices without writing media queries.

Interactive states

Tailwind makes handling interactive states simple through variant prefixes. The rule demonstrates how to use hover: and focus: variants to enhance user experience:

<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2">
  Click me
</button>

These state variants help create intuitive, responsive UI elements that provide visual feedback.

Component extraction

For repeated patterns, the rule suggests using Tailwind's @apply directive to extract common utility combinations:

@layer components {
  .btn-primary {
    @apply px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600;
  }
}

This approach helps reduce repetition while maintaining the flexibility of utility classes.

Custom styling

The rule shows how to use arbitrary values for specific design requirements:

<div class="top-[117px] grid-cols-[1fr_2fr]">
  <!-- Custom positioning and grid layout -->
</div>

This feature allows you to work within the Tailwind system while addressing unique design needs.

Consistent spacing

The rule highlights Tailwind's spacing utilities for maintaining visual rhythm:

<div class="space-y-4">
  <div>Item 1</div>
  <div>Item 2</div>
</div>

These utilities help create consistent spacing without manual margin calculations.

Using Tailwind CSS in Cursor

The Tailwind CSS rule is stored in the file tailwind.mdc within your project's .cursor/rules directory. This rule provides context to the AI assistant in Cursor, giving it knowledge about Tailwind CSS conventions and best practices.

Since this rule has a glob pattern of *, it's likely set up as an "Auto Attached" rule. This means the rule is automatically activated when you're working with any file in your project, providing Tailwind CSS guidance whenever needed.

You can also manually invoke this rule by typing @tailwind in the chat or Cmd-K interface when you need specific assistance with Tailwind CSS. This can be particularly useful when:

• Creating new UI components
• Troubleshooting responsive design issues
• Seeking recommendations for Tailwind class combinations
• Converting traditional CSS to Tailwind utilities

Usage tips

• When working on responsive layouts, start with mobile styles (no prefixes) before adding md:, lg:, or other breakpoint variants.
• Use the Tailwind CSS rule to help you find the right utility classes for common UI patterns.
• When you find yourself repeating the same combinations of utility classes, consider using @apply to create reusable components.
• For complex layouts, combine Tailwind's grid and flexbox utilities rather than creating custom CSS.
• Ask the AI for help translating traditional CSS into equivalent Tailwind utility classes.

By leveraging this rule in Cursor, you can accelerate your Tailwind CSS development workflow and ensure you're following best practices throughout your project.