tailwind

markhamsquareventures's avatarfrom markhamsquareventures

How to work effectively with Tailwind CSS, always use when styling frontend features

⭐0stars🔀0forks📁View on GitHub🕐Updated Jan 8, 2026
[Code Generation]

When & Why to Use This Skill

This Claude skill optimizes frontend development workflows by providing expert-level implementation of Tailwind CSS v4. It ensures clean, performant, and maintainable styling by enforcing modern CSS-first configurations, managing dark mode consistency, and automatically upgrading deprecated utility classes to current standards.

Use Cases

  • Developing new frontend features using Tailwind CSS v4's CSS-first configuration and @theme directives.
  • Refactoring legacy codebases by migrating deprecated Tailwind v3 utilities (e.g., bg-opacity, flex-grow) to their modern v4 equivalents.
  • Implementing comprehensive dark mode support across web components to ensure visual consistency and accessibility.
  • Optimizing layout structures by replacing redundant margins with modern flex and grid gap utilities for better spacing management.
  • Extracting repetitive styling patterns into reusable components (JSX, Vue, Blade) while maintaining project-specific design conventions.
nametailwind
descriptionHow to work effectively with Tailwind CSS, always use when styling frontend features

Tailwind

Instructions

  • Use Tailwind CSS classes to style HTML, check and use existing tailwind conventions within the project before writing your own.
  • Offer to extract repeated patterns into components that match the project's conventions (i.e. Blade, JSX, Vue, etc..)
  • Think through class placement, order, priority, and defaults - remove redundant classes, add classes to parent or child carefully to limit repetition, group elements logically
  • Always use Tailwind CSS v4 - do not use the deprecated utilities.
  • corePlugins is not supported in Tailwind v4.

Dark Mode

  • If existing pages and components support dark mode, new pages and components must support dark mode in a similar way, typically using dark:.

Examples

  • In Tailwind v4, configuration is CSS-first using the @theme directive — no separate tailwind.config.js file is needed.

    @theme { --color-brand: oklch(0.72 0.11 178); }

  • In Tailwind v4, you import Tailwind using a regular CSS @import statement, not using the @tailwind directives used in v3:

- @tailwind base; - @tailwind components; - @tailwind utilities; + @import "tailwindcss";

Replaced Utilities

  • Tailwind v4 removed deprecated utilities. Do not use the deprecated option - use the replacement.
  • Opacity values are still numeric.

| Deprecated | Replacement | |------------+--------------| | bg-opacity-_ | bg-black/_ | | text-opacity-_ | text-black/_ | | border-opacity-_ | border-black/_ | | divide-opacity-_ | divide-black/_ | | ring-opacity-_ | ring-black/_ | | placeholder-opacity-_ | placeholder-black/_ | | flex-shrink-_ | shrink-_ | | flex-grow-_ | grow-_ | | overflow-ellipsis | text-ellipsis | | decoration-slice | box-decoration-slice | | decoration-clone | box-decoration-clone |

Spacing

  • When listing items, use gap utilities for spacing, don't use margins.
Superior
Michigan
Erie