nweii/use-tailwind-v4
skills/use-tailwind-v4/SKILL.md
Tailwind CSS v4 syntax and v3→v4 migration reference. Use when the user mentions 'Tailwind v4', 'upgrade Tailwind', @theme, @utility, or @import 'tailwindcss', or is working in a project whose config indicates v4.
$ install --global
skillsauthnpx skillsauth add nweii/agent-stuff use-tailwind-v4Install 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: May 9, 2026, 7:36 AM165.9s2 files scanned
SKILL.md
- name:
- use-tailwind-v4
- description:
- Tailwind CSS v4 syntax and v3→v4 migration reference. Use when the user mentions 'Tailwind v4', 'upgrade Tailwind', @theme, @utility, or @import 'tailwindcss', or is working in a project whose config indicates v4.
Tailwind CSS v4
v4 Syntax At a Glance
Imports and Setup
/* v4 import (replaces @tailwind directives) */
@import "tailwindcss";
/* Custom utilities (replaces @layer utilities) */
@utility tab-4 {
tab-size: 4;
}
/* Loading JS config (if still needed) */
@config "../../tailwind.config.js";
CSS Variables for Theme
v4 exposes all theme values as CSS variables. Prefer these over theme():
background-color: var(--color-red-500);
font-family: var(--font-sans);
Quick Reference: v3 → v4 Changes
Renamed Utilities
| v3 | v4 | Notes |
|----|-----|-------|
| shadow-sm | shadow-xs | Scale shifted |
| shadow | shadow-sm | Scale shifted |
| drop-shadow-sm | drop-shadow-xs | Scale shifted |
| drop-shadow | drop-shadow-sm | Scale shifted |
| blur-sm | blur-xs | Scale shifted |
| blur | blur-sm | Scale shifted |
| backdrop-blur-sm | backdrop-blur-xs | Scale shifted |
| backdrop-blur | backdrop-blur-sm | Scale shifted |
| rounded-sm | rounded-xs | Scale shifted |
| rounded | rounded-sm | Scale shifted |
| outline-none | outline-hidden | outline-none now sets outline-style: none |
| ring | ring-3 | Default changed from 3px to 1px |
Deprecated Utilities (Use Opacity Modifiers)
<!-- v3: opacity utilities -->
<div class="bg-black bg-opacity-50">
<!-- v4: opacity modifiers -->
<div class="bg-black/50">
Also: flex-shrink-* → shrink-*, flex-grow-* → grow-*, overflow-ellipsis → text-ellipsis
Default Changes
| What | v3 Default | v4 Default |
|------|------------|------------|
| Border color | gray-200 | currentColor |
| Ring width | 3px | 1px |
| Ring color | blue-500 | currentColor |
| Button cursor | pointer | default |
Variant Stacking Order
Changed from right-to-left to left-to-right:
<!-- v3 -->
<ul class="first:*:pt-0">
<!-- v4 -->
<ul class="*:first:pt-0">
Variable Syntax in Arbitrary Values
<!-- v3: square brackets -->
<div class="bg-[--brand-color]">
<!-- v4: parentheses -->
<div class="bg-(--brand-color)">
Prefix Syntax
<!-- v4 prefixes are at the start, like variants -->
<div class="tw:flex tw:bg-red-500 tw:hover:bg-red-600">
Upgrading Projects
For project migrations, run the automated upgrade tool:
npx @tailwindcss/upgrade
Requires Node.js 20+. Run in a new branch and review changes.
For complete migration details (PostCSS/Vite/CLI config, custom utilities, framework-specific issues), see references/upgrade-guide.md.
Related Skills
nweii/obsidian-granola
development
VerifiedTrustedCommunity
Sync meetings from Granola to Obsidian — pulls notes and transcripts and imports them as formatted meeting/transcript notes. Use when the user says "sync my last granola meeting", "note for my last meeting", or asks to pull in a Granola transcript.
3SKILL.mdUpdated Apr 17, 2026
nweii/create-topic-note
tools
VerifiedTrustedCommunity
Create a topic note grouping related notes under a common theme, with automatic backlinking to source notes. Triggers: 'group these under a topic', 'create topic note for [[A]], [[B]], [[C]]'.
3SKILL.mdUpdated Apr 17, 2026
nweii/archive-to-brain
data-ai
VerifiedTrustedCommunity
Save an archival summary of an AI conversation to Nathan's Obsidian vault, using the Thinking note template and vault folder conventions to capture intellectual journeys, key insights, and technical logs. Use when archiving a chat session to the vault.
3SKILL.mdUpdated Apr 17, 2026
nweii/enrich-from-transcript
testing
VerifiedTrustedCommunity
Enrich an existing meeting/interview note from its transcript, or scaffold one when only a transcript exists. Captures granular narrative, exact phrases, mechanics, casual context, and implicit signals. Run on thin auto-summary notes or transcripts that warrant close reading.
2SKILL.mdUpdated May 15, 2026