tailwind-css
Tailwind CSS v4
Write modern, maintainable styles using Tailwind CSS v4's utility-first approach.
Quick Reference
Responsive: sm:, md:, lg:, xl:, 2xl: (mobile-first)
States: hover:, focus:, active:, disabled:, group-hover:, peer-checked:
Dark mode: dark:
Arbitrary values: top-[117px], bg-[#bada55]
CSS variables: bg-(--my-color) (v4 syntax)
Core Concepts
- Utility-First: Compose styles from single-purpose classes directly in HTML
- Mobile-First: Breakpoint prefixes apply at that width and above
- State Variants: Prefix utilities to apply conditionally
- Theme Variables: Define in
@theme { }as CSS custom properties
More from neversight/skills_feed
ai-image-generation
|
7react-best-practices
Provides React patterns for hooks, effects, refs, and component design. Covers escape hatches, anti-patterns, and correct effect usage. Must use when reading or writing React components (.tsx, .jsx files with React imports).
7ui-designer
Use when user needs visual UI design, interface creation, component systems, design systems, interaction patterns, or accessibility-focused user interfaces.
7python-env
Fast Python environment management with uv (10-100x faster than pip). Triggers on: uv, venv, pip, pyproject, python environment, install package, dependencies.
7typescript-best-practices
Provides TypeScript patterns for type-first development, making illegal states unrepresentable, exhaustive handling, and runtime validation. Must use when reading or writing TypeScript/JavaScript files.
6ai-marketing-videos
|
6