メニュー
Best practices for mixing Ant Design Vue components with Tailwind CSS utility classes. Use this skill to keep styling consistent without custom CSS files.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Phoenix Channel patterns in landing_page_backend — real-time collaboration, WebSocket topics, broadcasting, and channel structure.
Guide to Context module patterns in landing_page_backend — Ecto queries, dynamic query building, Ecto.Multi, and Outbox messaging.
Guide to Phoenix Controller structure in landing_page_backend using FallbackController, tuple responses, and permission plugs.
Patterns for creating Oban background workers in landing_page_backend — queue configuration, job arguments, retry strategies, and dynamic query processing.
Custom Plug middleware patterns in landing_page_backend — authentication (JWT/Passport), authorization, permission checking, and rate limiting.
Guidelines for creating Ecto Schemas in landing_page_backend, including binary UUID primary keys, virtual fields, custom json/1 function, and multiple changeset patterns.
| name | vue-antdv-tailwind |
| description | Best practices for mixing Ant Design Vue components with Tailwind CSS utility classes. Use this skill to keep styling consistent without custom CSS files. |
| metadata | {"author":"Vũ Lưu","version":"2026.3.23","source":"Hand-written based on builderx_spa conventions"} |
BuilderX SPA mixes Ant Design Vue's robust component library with Tailwind CSS's utility engine.
| Topic | Description | Reference |
|---|---|---|
| Styling Rules | How to properly mix AntD and Tailwind | styling-rules |
<template>
<div class="flex items-center justify-between p-4 bg-white rounded shadow">
<h3 class="text-lg font-bold text-gray-800">Settings</h3>
<!-- Override/extend AntD with Tailwind -->
<a-button type="primary" class="bg-blue-600 hover:bg-blue-700">
Save
</a-button>
</div>
</template>