unocss
Configurer et utiliser UnoCSS atomic CSS
UnoCSS est un moteur CSS atomique instantané qui fournit une alternative flexible et extensible à Tailwind CSS. Cette compétence aide les développeurs à configurer UnoCSS, à créer des règles utilitaires personnalisées et à utiliser les présélections comme Wind, Icons et Attributify.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「unocss」。 How do I configure a custom color palette in UnoCSS?
預期結果:
Define your colors in the theme.colors section of your uno.config.ts:
export default defineConfig({
theme: {
colors: {
primary: {
50: '#f0f9ff',
100: '#e0f2fe',
500: '#0ea5e9',
900: '#0c4a6e',
},
brand: '#ff4400',
}
}
});
Usage in HTML:
<div class="text-primary-500 bg-primary-100 text-brand">Colored element</div>
正在使用「unocss」。 How do I create a custom utility shortcut?
預期結果:
Add shortcuts to your configuration:
export default defineConfig({
shortcuts: [
['btn', 'px-4 py-2 rounded-lg font-semibold cursor-pointer transition-colors'],
['btn-primary', 'btn bg-blue-500 text-white hover:bg-blue-600'],
['card', 'bg-white rounded-xl shadow-lg p-6'],
]
});
Usage:
<button class="btn btn-primary">Click me</button>
<div class="card">Card content</div>
安全審計
安全Documentation-only skill providing reference material for UnoCSS configuration. All static findings are false positives - patterns detected in markdown documentation code blocks are not executable code. This skill contains no code that performs network requests, filesystem operations, or external command execution.
品質評分
你能建構什麼
Configurer UnoCSS pour un nouveau projet
Configurer une configuration UnoCSS complète avec des présélections, des règles personnalisées et une personnalisation du thème pour un nouveau projet web.
Créer des règles utilitaires personnalisées
Définir des règles utilitaires CSS personnalisées et des raccourcis pour étendre UnoCSS avec des modèles de style spécifiques au projet.
Choisir et configurer des présélections
Sélectionner et configurer les présélections UnoCSS appropriées pour un projet, comme Wind3 pour la compatibilité Tailwind ou Icons pour les bibliothèques d'icônes.
試試這些提示
Aidez-moi à configurer UnoCSS dans mon projet. Je veux configurer une configuration de base avec la présélection Wind3, des raccourcis personnalisés pour les modèles courants, et un thème personnalisé avec mes couleurs de marque.
Montrez-moi comment créer une règle utilitaire statique ou dynamique personnalisée dans UnoCSS. Je dois créer des utilitaires pour des exigences de conception spécifiques qui ne sont pas couvertes par les présélections par défaut.
Comment intégrer UnoCSS dans mon projet [Vite/Nuxt]? Quelles options de configuration dois-je configurer et comment m'assurer que le remplacement à chaud des modules fonctionne correctement?
Expliquez comment utiliser les transformateurs UnoCSS comme les directives @apply, les groupes de variantes et le mode attributify. Quand dois-je utiliser chaque fonctionnalité et quelles sont les implications en termes de performances?
最佳實務
- Utiliser le format de fichier uno.config.ts pour un meilleur support IDE, des indications TypeScript et le remplacement à chaud des modules
- Commencer avec une présélection (comme presetWind3 pour la compatibilité Tailwind) et ajouter des personnalisations progressivement
- Définir des raccourcis personnalisés pour les combinaisons de classes fréquemment utilisées afin de maintenir le HTML propre et maintenable
- Utiliser l'option safelist avec parcimonie - préférer l'extraction des utilitaires à partir du code source lorsque possible
避免
- Éviter de mettre trop de classes utilitaires directement dans le HTML - utiliser des raccourcis et des règles personnalisées à la place
- Ne pas utiliser le safelist complet comme remplacement pour une configuration d'extraction d'utilitaires appropriée
- Éviter les règles personnalisées profondément imbriquées qui pourraient entrer en conflit avec les utilitaires des présélections - tester les combinaisons
- Ne pas ignorer la configuration d'extraction - une extraction appropriée réduit considérablement la taille du bundle CSS