tailwind-css-patterns — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited tailwind-css-patterns (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
Expert guide for building modern, responsive user interfaces with Tailwind CSS utility-first framework. Covers v4.1+ features including CSS-first configuration, custom utilities, and enhanced developer experience.
Provides actionable patterns for responsive, accessible UIs with Tailwind CSS v4.1+. Covers utility composition, dark mode, component patterns, and performance optimization.
| Prefix | Min Width | Description |
|---|---|---|
sm: | 640px | Small screens |
md: | 768px | Tablets |
lg: | 1024px | Desktops |
xl: | 1280px | Large screens |
2xl: | 1536px | Extra large |
<!-- Center content -->
<div class="flex items-center justify-center min-h-screen">Content</div>
<!-- Responsive grid -->
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Items -->
</div>
<!-- Card component -->
<div class="bg-white rounded-lg shadow-lg p-6">
<h3 class="text-xl font-bold">Title</h3>
<p class="text-gray-600">Description</p>
</div>sm:, md:, lg:) for larger screenstailwind.config.js or using @themefunction ProductCard({ product }: { product: Product }) {
return (
<div className="bg-white rounded-lg shadow-lg overflow-hidden sm:flex">
<img className="h-48 w-full object-cover sm:h-auto sm:w-48" src={product.image} />
<div className="p-6">
<h3 className="text-lg font-semibold">{product.name}</h3>
<button className="mt-4 px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700">
Add to Cart
</button>
</div>
</div>
);
}<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
<h1 class="dark:text-white">Title</h1>
</div><input
class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
placeholder="[email protected]"
/>@apply for maintainabilitycontent: [] in confignpm run build to regenerate purged CSSnpx tailwindcss -o with --watch flag for live updatesmd:flex not flex md:flex)darkMode: 'class' or 'media' is set correctlydocument.documentElement.classList.toggle('dark') for class strategydark class to <html> before body renders@apply with complex selectorsclass or media strategy)~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.