tailwind-css-v4-mastery
Master Tailwind CSS V4 with AI-powered guidance
Tailwind CSS V4 introduces revolutionary changes with its Oxide engine and CSS-first configuration. This skill provides expert guidance to navigate migration, optimize performance, and build modern design systems.
下載技能 ZIP
在 Claude 中上傳
前往 設定 → 功能 → 技能 → 上傳技能
開啟並開始使用
測試它
正在使用「tailwind-css-v4-mastery」。 Help me migrate my v3 shadow utilities to v4
預期結果:
- v3 → v4 Shadow Migration:
- • .shadow → .shadow-sm (default shadow reduced)
- • .shadow-sm → .shadow-xs (small becomes extra-small)
- • .shadow-md → .shadow (medium is now default)
- • No changes for shadow-lg, shadow-xl, shadow-2xl
- Quick fix: Find/replace in your files:
- sed -i 's/\bshadow\b/shadow-sm/g' *.html
- sed -i 's/\bshadow-sm\b/shadow-xs/g' *.html
正在使用「tailwind-css-v4-mastery」。 Create a @theme configuration for my brand colors
預期結果:
- Add this to your CSS file:
- @import "tailwindcss";
- @theme {
- --color-brand-primary: oklch(0.6 0.15 250);
- --color-brand-secondary: oklch(0.7 0.12 180);
- --color-brand-accent: oklch(0.8 0.2 45);
- }
- Usage: bg-brand-primary, text-brand-accent, etc.
正在使用「tailwind-css-v4-mastery」。 Which V4 plugin should I use with Vite?
預期結果:
- Use @tailwindcss/vite for fastest performance:
- 1. npm install -D @tailwindcss/vite
- 2. Add to vite.config.ts:
- import tailwindcss from '@tailwindcss/vite';
- plugins: [react(), tailwindcss()]
- Expected improvement: 10-100x faster builds vs PostCSS
安全審計
安全This is a documentation-only skill containing Tailwind CSS V4 guides and one benign migration shell script. The static analyzer generated 435 false positives by misinterpreting markdown backticks as shell execution, documentation URLs as network threats, and text patterns like 'md' as weak cryptography. All findings are false positives - no cryptographic code, no credential access, no exfiltration patterns, no malicious behavior exists. The migration script only performs standard file backup and sed operations for CSS migration purposes.
低風險問題 (1)
風險因素
⚡ 包含腳本 (1)
🌐 網路存取 (1)
📁 檔案系統存取 (1)
品質評分
你能建構什麼
Migrate from Tailwind v3 to v4
Automated migration with breaking change detection, utility updates, and configuration conversion from JavaScript to CSS-first approach.
Build modern component libraries
Create scalable design systems with CSS variables, multi-theme support, and component-scoped styling using V4's architecture.
Optimize build performance
Achieve 10-100x faster builds with Oxide engine configuration, plugin selection, and CSS optimization patterns.
試試這些提示
I need to migrate my Tailwind v3 project to v4. Can you check what breaking changes affect my current setup? I use shadows, rounded corners, and opacity utilities extensively.
Help me design a button component system in Tailwind V4 with primary/secondary variants, sizes, and dark mode support using @theme configuration.
My Tailwind v4 builds are taking 2-3 seconds with PostCSS. How can I optimize this? I'm using Webpack in a Next.js project.
I need to support 5 different brand themes in our enterprise app. Show me how to set up CSS variables and theme switching with data attributes in Tailwind V4.
最佳實務
- Always use -- prefix in @theme blocks: --color-primary not color-primary
- Choose the right plugin for your build tool: @tailwindcss/vite for Vite, @tailwindcss/postcss for Webpack
- Test border colors and ring widths after migration - defaults changed significantly
避免
- Don't keep tailwind.config.js - V4 ignores it completely. Use @theme in CSS instead
- Avoid defining complete color palettes - override only what you need from defaults
- Never use opacity utilities - they're removed. Use color modifiers like bg-black/50 instead