{"enrichment":{"faq":[{"a":"tailwind-best-practices teaches 12 critical rules for v4 success. Key practices include using CSS @import statements instead of @tailwind directives, leveraging the @theme directive for CSS-first configuration, adopting modern opacity syntax (e.g., `text-red-500/50`), implementing container queries for responsive design, and avoiding v3 anti-patterns. The skill emphasizes proper PostCSS configuration and helps migrate from tailwind.config.js to CSS-first approaches while ensuring AI-generated code stays current.","q":"What are the tailwind css v4 best practices?"},{"a":"tailwind-best-practices guides you through converting v3 code for v4 compatibility. Replace deprecated utilities with their v4 equivalents, update opacity syntax from `opacity-50` modifiers to slash notation (`text-red-500/50`), switch @tailwind directives to @import statements, and adopt the @theme directive for configuration. The skill identifies renamed utilities and explains modern patterns like container queries that v3 didn't support, helping you modernize AI-generated or legacy code efficiently.","q":"How do I fix tailwind v3 code to work with v4?"},{"a":"tailwind-best-practices explains that the @theme directive is central to v4's CSS-first configuration approach. Instead of configuring everything in tailwind.config.js, you define design tokens directly in CSS using @theme blocks. This replaces the traditional JavaScript configuration pattern and gives you more control over your design system within stylesheets. The skill covers syntax, best practices for organizing themes, and how this approach integrates with modern PostCSS setups.","q":"What is the tailwind v4 @theme directive and how do I use it?"},{"a":"tailwind-best-practices documents v4's utility changes to help you migrate legacy code. The skill identifies which v3 utilities were renamed, removed, or replaced with modern equivalents. It covers opacity syntax updates, gradient changes, and other shifted utility names. Understanding these deprecations prevents broken styles when upgrading and ensures your codebase\u2014especially AI-generated code that may default to v3 patterns\u2014uses current, supported utilities.","q":"What utilities were renamed or deprecated in tailwind v4?"},{"a":"tailwind-best-practices covers container queries as a modern v4 feature for responsive design beyond viewport breakpoints. The skill explains the @container directive syntax, how to define container query sizes, and applying responsive utilities within container contexts. Container queries let you style elements based on their parent container's size rather than the viewport, enabling more modular and reusable component designs that v3 didn't natively support.","q":"How do I implement container queries in tailwind v4?"},{"a":"tailwind-best-practices identifies common v4 anti-patterns to keep your code clean and maintainable. Avoid mixing old @tailwind directives with new @import syntax, don't rely on v3 configuration patterns when @theme is available, and steer clear of deprecated utilities. The skill warns against improper PostCSS setup, incorrect opacity syntax, and misusing container queries. Learning what NOT to do\u2014especially for AI-generated code that may default to outdated patterns\u2014ensures your stylesheets remain performant and future-proof.","q":"What anti-patterns should I avoid when using tailwind v4?"}],"shadow_tags":["version-migration","syntax-modernization","css-first-approach","deprecated-removal","agent-training-gap","utility-renaming","responsive-design-patterns","configuration-evolution"],"summary_rewrite":"This skill corrects AI agents that generate outdated Tailwind v3 code by teaching v4 syntax and configuration patterns. It covers 12 critical rules including CSS @import statements, @theme directives, modern opacity syntax, container queries, and renamed utilities, plus anti-patterns to avoid."},"files":[{"bytes":6438,"path":"skills/tailwind-best-practices/SKILL.md","sha256":"c98e218582a468afe3dc3010babf4caa15bfbdc5b805d3c9a07a80f5d95b1c4d","url":"https://skillfed.io/files/ofershap/tailwind-best-practices/tailwind-best-practices/fb0187dd/SKILL.md"}],"id":"ofershap/tailwind-best-practices/tailwind-best-practices","links":{"html":"https://skillfed.io/ofershap/tailwind-best-practices/tailwind-best-practices","md":"https://skillfed.io/ofershap/tailwind-best-practices/tailwind-best-practices.md","repo":"https://github.com/ofershap/tailwind-best-practices"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":0,"language":"JavaScript","last_updated":"2026-02-20","license":"MIT","name":"tailwind-best-practices","publisher":"ofershap","stars":13},"relations":{"similar":[{"id":"a-tokyo/agent-skills/tailwind-v3-to-v4-migration"},{"id":"JosiahSiegel/claude-plugin-marketplace/tailwindcss-fundamentals-v4"},{"id":"rekryt/skill-tailwind/skill-tailwind"},{"id":"shipshitdev/skills/tailwind-validator"},{"id":"AsyrafHussin/agent-skills/tailwind-best-practices"},{"id":"xobotyi/cc-foundry/tailwindcss"},{"id":"alecs5am/ralphy/tailwind"},{"id":"nweii/agent-stuff/use-tailwind-v4"},{"id":"bytedance/agentkit-samples/byted-util-vite-react-tailwind"},{"id":"skills-il/localization/hebrew-tailwind-preset"}]},"slug":{"owner":"ofershap","repo":"tailwind-best-practices","skill":"tailwind-best-practices"},"version":"fb0187dd"}