fusengine/tailwindcss-custom-styles
plugins/tailwindcss/skills/tailwindcss-custom-styles/SKILL.md
Custom CSS authoring in Tailwind CSS v4.1 via @utility, @variant, @custom-variant, @apply, and @layer directives. Use when: creating a new named utility class, writing conditional/dark-mode variants, defining a custom variant selector, or applying utility classes inside custom CSS rules.
$ install --global
skillsauthnpx skillsauth add fusengine/agents tailwindcss-custom-stylesInstall this skill globally with one command. Works with Claude Code, Cursor, and Windsurf.
Security Scan Results
3 of 9 scanners reported clean
Some scanners were skipped, did not run, or reported a non-clean status. Review each row below.
3
Scanners Passed
9
Scanners in report
Clean
TrivyContainer and dependency vulnerability scanner
95%
Clean
SemgrepStatic code analysis for vulnerabilities
95%
Clean
mcp-scan (Snyk)Model Context Protocol security validation
95%
Skipped
Snyk (dep)Open source security scanning
50%
Skipped
Socket.devSupply chain security analysis
50%
Skipped
VirusTotalMulti-engine malware detection
50%
Skipped
CrowdStrikeAdvanced threat intelligence
50%
Skipped
OSV-ScannerOpen Source Vulnerability database check
50%
Skipped
OWASP Dep-Check
50%
Last scanned: Jul 17, 2026, 2:44 AM115.8s1 file scanned
SKILL.md
- name:
- tailwindcss-custom-styles
- description:
- Custom CSS authoring in Tailwind CSS v4.1 via @utility, @variant, @custom-variant, @apply, and @layer directives. Use when: creating a new named utility class, writing conditional/dark-mode variants, defining a custom variant selector, or applying utility classes inside custom CSS rules.
- user-invocable:
- false
Custom Styles
@utility - Create a utility
@utility glass-effect {
backdrop-filter: blur(10px);
background: rgba(255, 255, 255, 0.1);
}
/* Usage: class="glass-effect hover:glass-effect" */
@variant - Conditional style
.card {
background: white;
@variant dark { background: #1a1a2e; }
@variant hover { transform: scale(1.05); }
}
@custom-variant - New variant
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
/* Usage: theme-midnight:bg-black */
@apply - Inline utilities
.btn-primary {
@apply bg-blue-500 text-white px-4 py-2 rounded-lg;
}
@layer - CSS organization
@layer components {
.card { @apply bg-white shadow-md rounded-xl p-4; }
}
Related Skills
fusengine/ux-copy
testing
VerifiedTrustedCommunity
Copy self-audit and ban-lists — filler verbs/hype adjectives, slop placeholder names, fake-precise numbers, Title Case headlines, humor in error copy ('Oops!'), em-dash crutch, one copy register per page.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-webapp
development
VerifiedTrustedCommunity
Logged-in web apps — dashboards, auth flows, settings, onboarding, data tables, command palettes, modals, toasts. Register `product`: density and glance-speed over marketing polish, no hero/CTA-tricks, every data surface covers empty/loading/error explicitly, tables and dataviz follow preattentive-processing rules.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-web
development
VerifiedTrustedCommunity
Marketing sites, landing pages, campaign pages — register `brand` (design IS the product). Structure comes from the register's POV + a macrostructure pick, never from copying an inspiration site's section flow. Hero discipline, deviated section order, asymmetric grids, and a silhouette lookalike-test gate before ship.
20SKILL.mdUpdated Jul 15, 2026
fusengine/design-system
development
VerifiedTrustedCommunity
Token-strategy core — OKLCH color rules, neutral tinting, accent-commitment levels, type scale, 8pt spacing grid, touch targets, and the canonical output format of design-system.md (the file the harness gates on). This is routing step 1 of design-method/SKILL.md — read it before design-web/design-webapp/design-ios/design-android, before picking or auditing a single color/type/spacing value.
20SKILL.mdUpdated Jul 13, 2026