source, @plugin & @utility in Tailwind CSS
From the Tailwind CSS cheat sheet · Customization · verified Jul 2026
@source, @plugin & @utility
Control source detection, load plugins, and define custom utilities — v4 CSS-first
css
/* @source — control which files Tailwind scans for classes */
@import "tailwindcss";
@source "../components";
@source "../node_modules/@my/ui";
@source not "./legacy/**";
/* @plugin — load a Tailwind plugin (replaces tailwind.config.js plugins array) */
@plugin "@tailwindcss/typography";
@plugin "@tailwindcss/forms";
/* @utility — define your own utility class */
@utility content-auto {
content-visibility: auto;
}
/* @custom-variant — define a custom variant */
@custom-variant pointer-coarse (@media (pointer: coarse));
/* Now usable as: */
/* class="content-auto pointer-coarse:p-6" */💡 @source adds extra scan paths; @source not excludes; @source inline safelists literals
⚡ @plugin loads plugins from CSS — no more JS config file just for plugins
📌 @utility makes custom utilities first-class and variant-aware automatically
🎯 @custom-variant + @reference round out the all-CSS authoring story
v4directivescustomization
Continue with Tailwind CSS
Save the full cheat sheet or work through every related task.