Lord1Egypt Tailwind Design
Overview
Tailwind CSS is a utility-first CSS framework packed with classes that can be composed to build any design.
When to Use This Skill
Use to construct highly responsive, modern dark-themed web page components visually.
Quick Start (with runnable code examples)
<!-- A beautiful card designed with Tailwind -->
<div class="max-w-md mx-auto bg-slate-900 border border-slate-800 rounded-xl shadow-lg overflow-hidden md:max-w-2xl p-6">
<div class="uppercase tracking-wide text-sm text-indigo-400 font-semibold">Metadata</div>
<p class="mt-2 text-slate-300">This is a sleek dark layout card styled with Tailwind CSS variables.</p>
<button class="mt-4 px-4 py-2 bg-emerald-600 hover:bg-emerald-500 text-white rounded-lg transition">Action</button>
</div>
Advanced Usage
Customize tailwind.config.js files, apply custom color palettes, and handle dynamic dark mode transitions.
Key References
Dependencies
- tailwindcss>=3.0.0