القائمة
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>