Tailwind CSS Utility Rules

18.2.1. Class Ordering Rules

Utility classes must be written in the following order.

Order	Category	Examples
1	Layout	flex, grid, block, hidden, relative, absolute
2	Box Model	w-, h-, p-, m-, gap-, border-
3	Typography	text-, font-, leading-, tracking-
4	Visual Effects	bg-, text-{color}, shadow-, opacity-, rounded-
5	Miscellaneous	transition-, cursor-, hover:, focus:

Class ordering must not be managed manually. prettier-plugin-tailwindcss must be installed for automatic sorting.

npm install -D prettier-plugin-tailwindcss

Register the plugin in .prettierrc.

{
  "plugins": ["prettier-plugin-tailwindcss"]
}

• This plugin automatically sorts classes according to the official Tailwind CSS recommended order.
• Auto-formatting is applied on save, so developers do not need to memorize the order.
• A Prettier check must be enforced in the CI pipeline to block unsorted classes.

---

18.2.2. @apply Usage Criteria

@apply is permitted only when the same class combination is repeated 3 or more times.

/* Allowed: Button base style reused in multiple places */
@layer components {
  .btn-primary {
    @apply inline-flex items-center justify-center rounded-md bg-brand-600
           px-4 py-2 text-sm font-medium text-white
           hover:bg-brand-700 focus:outline-none focus:ring-2;
  }
}

/* Prohibited: Style used in only one or two places */
@layer components {
  .my-special-card {
    @apply mt-4 rounded-lg p-6;
  }
}

• Excessive use of @apply undermines Tailwind's utility-first principle.
• If the repetition count is fewer than 3, utility classes must be written directly in the template.
• Classes extracted with @apply must be defined inside @layer components.

---

18.2.3. Custom Utilities

Project-specific design tokens must be defined in theme.extend within tailwind.config.ts.

// tailwind.config.ts
export default {
  theme: {
    extend: {
      colors: {
        brand: {
          50: '#f0f5ff',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
        },
        success: '#16a34a',
        warning: '#f59e0b',
        error: '#dc2626',
      },
      spacing: {
        '4.5': '1.125rem',
        '13': '3.25rem',
        '15': '3.75rem',
      },
      borderRadius: {
        '4xl': '2rem',
      },
    },
  },
} satisfies Config

• Colors, spacing, fonts, and other values defined in the design system must be registered in theme.extend.
• Arbitrary values ([32px], [#ff0000]) must not be used. Repeated values must be registered in the configuration file.
• One-off exceptional values may use arbitrary value syntax, but their registration in the configuration file should be reviewed during code review.

---

18.2.4. Inline Style Prohibition

style bindings must not be used in Vue templates. They must be replaced with Tailwind utility classes.

<!-- Prohibited: Inline style -->
<div :style="{ padding: '16px', backgroundColor: '#f5f5f5' }">
  Content
</div>

<!-- Correct: Tailwind utility -->
<div class="bg-gray-100 p-4">
  Content
</div>

Exception Conditions

:style bindings are permitted only in the following cases.

• Dynamically computed values at runtime (e.g., user-input-based width, drag position)
• Cases where CSS variables must be set dynamically

<!-- Exception allowed: Runtime dynamically computed value -->
<div
  class="absolute rounded-lg bg-white shadow-md"
  :style="{ top: `${popoverY}px`, left: `${popoverX}px` }"
>
  Popover content
</div>

• When exceptions are used, whether replacement with Tailwind utilities is possible must be reviewed during code review.
• Values corresponding to design tokens such as colors, fonts, and spacing must not be specified as inline styles.