feat: add new OpenSpec skills for change management and onboarding
- Created `openspec-ff-change` skill for fast-forward artifact creation. - Introduced `openspec-new-change` skill for structured change creation. - Developed `openspec-onboard` skill for guided onboarding through OpenSpec workflow. - Added `openspec-sync-specs` skill for syncing delta specs to main specs. - Implemented `openspec-verify-change` skill for verifying implementation against change artifacts. - Updated `.gitignore` to exclude OpenSpec generated files. - Added `skills-lock.json` to manage skill dependencies.
This commit is contained in:
zguiyang
5
.agents/skills/tailwindcss/GENERATION.md
Normal file
5
.agents/skills/tailwindcss/GENERATION.md
Normal file
@@ -0,0 +1,5 @@
|
||||
# Generation Info
|
||||
|
||||
- **Source:** `sources/tailwindcss`
|
||||
- **Git SHA:** `148fcb26ab87892177ec9a7eba4b31e2ee960039`
|
||||
- **Generated:** 2026-01-28
|
||||
150
.agents/skills/tailwindcss/SKILL.md
Normal file
150
.agents/skills/tailwindcss/SKILL.md
Normal file
@@ -0,0 +1,150 @@
|
||||
---
|
||||
name: tailwindcss
|
||||
description: Tailwind CSS utility-first CSS framework. Use when styling web applications with utility classes, building responsive designs, or customizing design systems with theme variables.
|
||||
metadata:
|
||||
author: Hairyf
|
||||
version: "2026.2.2"
|
||||
source: Generated from https://github.com/tailwindlabs/tailwindcss.com, scripts located at https://github.com/hairyf/skills
|
||||
---
|
||||
|
||||
# Tailwind CSS
|
||||
|
||||
> The skill is based on Tailwind CSS v4.1.18, generated at 2026-01-28.
|
||||
|
||||
Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of writing custom CSS, you compose designs using utility classes directly in your markup. Tailwind v4 introduces CSS-first configuration with theme variables, making it easier to customize your design system.
|
||||
|
||||
## Core References
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Installation | Vite, PostCSS, CLI, and CDN setup | [core-installation](references/core-installation.md) |
|
||||
| Utility Classes | Understanding Tailwind's utility-first approach and styling elements | [core-utility-classes](references/core-utility-classes.md) |
|
||||
| Theme Variables | Design tokens, customizing theme, and theme variable namespaces | [core-theme](references/core-theme.md) |
|
||||
| Responsive Design | Mobile-first breakpoints, responsive variants, and container queries | [core-responsive](references/core-responsive.md) |
|
||||
| Variants | Applying utilities conditionally with state, pseudo-class, and media query variants | [core-variants](references/core-variants.md) |
|
||||
| Preflight | Tailwind's base styles and how to extend or disable them | [core-preflight](references/core-preflight.md) |
|
||||
|
||||
## Layout
|
||||
|
||||
### Display & Flexbox & Grid
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Display | flex, grid, block, inline, hidden, sr-only, flow-root, contents | [layout-display](references/layout-display.md) |
|
||||
| Flexbox | flex-direction, justify, items, gap, grow, shrink, wrap, order | [layout-flexbox](references/layout-flexbox.md) |
|
||||
| Grid | grid-cols, grid-rows, gap, place-items, col-span, row-span, subgrid | [layout-grid](references/layout-grid.md) |
|
||||
| Aspect Ratio | Controlling element aspect ratio for responsive media | [layout-aspect-ratio](references/layout-aspect-ratio.md) |
|
||||
| Columns | Multi-column layout for magazine-style or masonry layouts | [layout-columns](references/layout-columns.md) |
|
||||
|
||||
### Positioning
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Position | Controlling element positioning with static, relative, absolute, fixed, and sticky | [layout-position](references/layout-position.md) |
|
||||
| Inset | Controlling placement of positioned elements with top, right, bottom, left, and inset utilities | [layout-inset](references/layout-inset.md) |
|
||||
|
||||
### Sizing
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Width | Setting element width with spacing scale, fractions, container sizes, and viewport units | [layout-width](references/layout-width.md) |
|
||||
| Height | Setting element height with spacing scale, fractions, viewport units, and content-based sizing | [layout-height](references/layout-height.md) |
|
||||
| Min & Max Sizing | min-width, max-width, min-height, max-height constraints | [layout-min-max-sizing](references/layout-min-max-sizing.md) |
|
||||
|
||||
### Spacing
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Margin | Controlling element margins with spacing scale, negative values, logical properties, and space utilities | [layout-margin](references/layout-margin.md) |
|
||||
| Padding | Controlling element padding with spacing scale, logical properties, and directional utilities | [layout-padding](references/layout-padding.md) |
|
||||
|
||||
### Overflow
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Overflow | Controlling how elements handle content that overflows their container | [layout-overflow](references/layout-overflow.md) |
|
||||
|
||||
### Images & Replaced Elements
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Object Fit & Position | Controlling how images and video are resized and positioned | [layout-object-fit-position](references/layout-object-fit-position.md) |
|
||||
|
||||
### Tables
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Table Layout | border-collapse, table-auto, table-fixed | [layout-tables](references/layout-tables.md) |
|
||||
|
||||
## Transforms
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Transform Base | Base transform utilities for enabling transforms, hardware acceleration, and custom transform values | [transform-base](references/transform-base.md) |
|
||||
| Translate | Translating elements on x, y, and z axes with spacing scale, percentages, and custom values | [transform-translate](references/transform-translate.md) |
|
||||
| Rotate | Rotating elements in 2D and 3D space with degree values and custom rotations | [transform-rotate](references/transform-rotate.md) |
|
||||
| Scale | Scaling elements uniformly or on specific axes with percentage values | [transform-scale](references/transform-scale.md) |
|
||||
| Skew | Skewing elements on x and y axes with degree values | [transform-skew](references/transform-skew.md) |
|
||||
|
||||
## Typography
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Font & Text | Font size, weight, color, line-height, letter-spacing, decoration, truncate | [typography-font-text](references/typography-font-text.md) |
|
||||
| Text Align | Controlling text alignment with left, center, right, justify, and logical properties | [typography-text-align](references/typography-text-align.md) |
|
||||
| List Style | list-style-type, list-style-position for bullets and markers | [typography-list-style](references/typography-list-style.md) |
|
||||
|
||||
## Visual
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Background | Background color, gradient, image, size, position | [visual-background](references/visual-background.md) |
|
||||
| Border | Border width, color, radius, divide, ring | [visual-border](references/visual-border.md) |
|
||||
| Effects | Box shadow, opacity, mix-blend, backdrop-blur, filter | [visual-effects](references/visual-effects.md) |
|
||||
| SVG | fill, stroke, stroke-width for SVG and icon styling | [visual-svg](references/visual-svg.md) |
|
||||
|
||||
## Effects & Interactivity
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Transition & Animation | CSS transitions, animation keyframes, reduced motion | [effects-transition-animation](references/effects-transition-animation.md) |
|
||||
| Visibility & Interactivity | Visibility, cursor, pointer-events, user-select, z-index | [effects-visibility-interactivity](references/effects-visibility-interactivity.md) |
|
||||
| Form Controls | accent-color, appearance, caret-color, resize | [effects-form-controls](references/effects-form-controls.md) |
|
||||
| Scroll Snap | scroll-snap-type, scroll-snap-align for carousels | [effects-scroll-snap](references/effects-scroll-snap.md) |
|
||||
|
||||
## Features
|
||||
|
||||
### Dark Mode
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Dark Mode | Implementing dark mode with the dark variant and custom strategies | [features-dark-mode](references/features-dark-mode.md) |
|
||||
|
||||
### Migration
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Upgrade Guide | Migrating from v3 to v4, breaking changes, rename mappings | [features-upgrade](references/features-upgrade.md) |
|
||||
|
||||
### Customization
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Custom Styles | Adding custom styles, utilities, variants, and working with arbitrary values | [features-custom-styles](references/features-custom-styles.md) |
|
||||
| Functions & Directives | Tailwind's CSS directives and functions for working with your design system | [features-functions-directives](references/features-functions-directives.md) |
|
||||
| Content Detection | How Tailwind detects classes and how to customize content scanning | [features-content-detection](references/features-content-detection.md) |
|
||||
|
||||
## Best Practices
|
||||
|
||||
| Topic | Description | Reference |
|
||||
|-------|-------------|-----------|
|
||||
| Utility Patterns | Managing duplication, conflicts, important modifier, when to use components | [best-practices-utility-patterns](references/best-practices-utility-patterns.md) |
|
||||
|
||||
## Key Recommendations
|
||||
|
||||
- **Use utility classes directly in markup** - Compose designs by combining utilities
|
||||
- **Customize with theme variables** - Use `@theme` directive to define design tokens
|
||||
- **Mobile-first responsive design** - Use unprefixed utilities for mobile, prefixed for breakpoints
|
||||
- **Use complete class names** - Never construct classes dynamically with string interpolation
|
||||
- **Leverage variants** - Stack variants for complex conditional styling
|
||||
- **Prefer CSS-first configuration** - Use `@theme`, `@utility`, and `@custom-variant` over JavaScript configs
|
||||
@@ -0,0 +1,87 @@
|
||||
---
|
||||
name: best-practices-utility-patterns
|
||||
description: Managing duplication, conflicts, important modifier, and when to use components
|
||||
---
|
||||
|
||||
# Best Practices: Utility Patterns
|
||||
|
||||
Practical patterns when building with Tailwind utilities.
|
||||
|
||||
## Managing duplication
|
||||
|
||||
**Use components** for repeated UI: Extract into React/Vue/Svelte components or template partials.
|
||||
|
||||
```jsx
|
||||
function Button({ children, variant = 'primary' }) {
|
||||
const base = 'px-4 py-2 rounded-lg font-medium'
|
||||
const variants = {
|
||||
primary: 'bg-blue-500 hover:bg-blue-600 text-white',
|
||||
secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900',
|
||||
}
|
||||
return <button className={`${base} ${variants[variant]}`}>{children}</button>
|
||||
}
|
||||
```
|
||||
|
||||
**Use loops** when markup is repeated from data—the class list is written once.
|
||||
|
||||
**Multi-cursor editing** for localized duplication in a single file.
|
||||
|
||||
## Managing conflicts
|
||||
|
||||
When two utilities target the same property, the one **later in the stylesheet** wins. Avoid adding conflicting classes:
|
||||
|
||||
```html
|
||||
<!-- Bad -->
|
||||
<div class="flex grid">Conflict</div>
|
||||
|
||||
<!-- Good: conditional class -->
|
||||
<div class={gridLayout ? 'grid' : 'flex'}>
|
||||
```
|
||||
|
||||
## Important modifier
|
||||
|
||||
Add `!` suffix to force `!important`:
|
||||
|
||||
```html
|
||||
<div class="bg-teal-500 bg-red-500!">Red wins</div>
|
||||
```
|
||||
|
||||
Use sparingly; prefer fixing specificity properly.
|
||||
|
||||
## Important flag (global)
|
||||
|
||||
```css
|
||||
@import "tailwindcss" important;
|
||||
```
|
||||
|
||||
Makes all utilities `!important`. Useful when integrating into existing high-specificity CSS.
|
||||
|
||||
## Prefix option
|
||||
|
||||
```css
|
||||
@import "tailwindcss" prefix(tw);
|
||||
```
|
||||
|
||||
Generates `tw:text-red-500` etc. Use when project class names conflict with Tailwind.
|
||||
|
||||
## When to use inline styles
|
||||
|
||||
- Values from API/database (e.g. brand colors)
|
||||
- Dynamic values that change at runtime
|
||||
- Complex arbitrary values hard to read as class names
|
||||
- Pattern: set CSS variables via inline style, reference with `bg-(--my-var)`
|
||||
|
||||
## Key Points
|
||||
|
||||
- Extract repeated patterns into components
|
||||
- Never add two conflicting utilities—use conditional classes
|
||||
- `!` suffix = single utility `!important`
|
||||
- `important` flag = all utilities `!important`
|
||||
- `prefix(tw)` = prefix all utilities
|
||||
- Use inline styles for dynamic values; utilities for static design
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/utility-first#managing-duplication
|
||||
- https://tailwindcss.com/docs/utility-first#managing-style-conflicts
|
||||
-->
|
||||
89
.agents/skills/tailwindcss/references/core-installation.md
Normal file
89
.agents/skills/tailwindcss/references/core-installation.md
Normal file
@@ -0,0 +1,89 @@
|
||||
---
|
||||
name: core-installation
|
||||
description: Installing Tailwind CSS with Vite, PostCSS, CLI, or CDN
|
||||
---
|
||||
|
||||
# Installation
|
||||
|
||||
How to add Tailwind CSS to a project.
|
||||
|
||||
## Vite (Recommended)
|
||||
|
||||
```bash
|
||||
npm install tailwindcss @tailwindcss/vite
|
||||
```
|
||||
|
||||
```ts
|
||||
// vite.config.ts
|
||||
import { defineConfig } from 'vite'
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
|
||||
export default defineConfig({
|
||||
plugins: [tailwindcss()],
|
||||
})
|
||||
```
|
||||
|
||||
```css
|
||||
/* style.css */
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
## PostCSS
|
||||
|
||||
```bash
|
||||
npm install tailwindcss @tailwindcss/postcss postcss
|
||||
```
|
||||
|
||||
```js
|
||||
// postcss.config.js
|
||||
export default {
|
||||
plugins: {
|
||||
'@tailwindcss/postcss': {},
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
## Tailwind CLI
|
||||
|
||||
```bash
|
||||
npx @tailwindcss/cli -i ./src/input.css -o ./dist/output.css --watch
|
||||
```
|
||||
|
||||
```css
|
||||
/* input.css */
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
## Play CDN (Development only)
|
||||
|
||||
```html
|
||||
<script src="https://cdn.tailwindcss.com"></script>
|
||||
```
|
||||
|
||||
Not for production: no purging, larger payload.
|
||||
|
||||
## Framework guides
|
||||
|
||||
- **Nuxt**: `@nuxtjs/tailwindcss` module or `@tailwindcss/vite`
|
||||
- **Next.js**: Use Vite or PostCSS with `tailwind.config.js` if needed
|
||||
- **React Router / SvelteKit / SolidJS**: Use `@tailwindcss/vite`
|
||||
|
||||
## Key Points
|
||||
|
||||
- Vite: `@tailwindcss/vite` plugin + `@import "tailwindcss"`
|
||||
- PostCSS: `@tailwindcss/postcss`
|
||||
- CLI: `npx @tailwindcss/cli`
|
||||
- v4 uses CSS-first config; no `tailwind.config.js` required for basics
|
||||
- Use `@theme` in CSS to customize design tokens
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/installation/using-vite
|
||||
- https://tailwindcss.com/docs/installation/using-postcss
|
||||
- https://tailwindcss.com/docs/installation/tailwind-cli
|
||||
- https://tailwindcss.com/docs/installation/play-cdn
|
||||
-->
|
||||
200
.agents/skills/tailwindcss/references/core-preflight.md
Normal file
200
.agents/skills/tailwindcss/references/core-preflight.md
Normal file
@@ -0,0 +1,200 @@
|
||||
---
|
||||
name: core-preflight
|
||||
description: Understanding Tailwind's Preflight base styles and how to extend or disable them
|
||||
---
|
||||
|
||||
# Preflight
|
||||
|
||||
Preflight is Tailwind's opinionated set of base styles that smooth over cross-browser inconsistencies.
|
||||
|
||||
## Overview
|
||||
|
||||
Built on top of modern-normalize, Preflight is automatically injected when you import `tailwindcss`:
|
||||
|
||||
```css
|
||||
@layer theme, base, components, utilities;
|
||||
|
||||
@import "tailwindcss/theme.css" layer(theme);
|
||||
@import "tailwindcss/preflight.css" layer(base);
|
||||
@import "tailwindcss/utilities.css" layer(utilities);
|
||||
```
|
||||
|
||||
## Key Resets
|
||||
|
||||
### Margins Removed
|
||||
|
||||
All default margins are removed from headings, paragraphs, blockquotes, etc:
|
||||
|
||||
```css
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
```
|
||||
|
||||
This prevents accidentally relying on browser default margins that aren't part of your spacing scale.
|
||||
|
||||
### Border Styles Reset
|
||||
|
||||
Borders are reset to make adding borders easier:
|
||||
|
||||
```css
|
||||
*,
|
||||
::after,
|
||||
::before {
|
||||
box-sizing: border-box;
|
||||
border: 0 solid;
|
||||
}
|
||||
```
|
||||
|
||||
Since the `border` utility only sets `border-width`, this ensures adding `border` always creates a solid `1px` border using `currentColor`.
|
||||
|
||||
### Headings Unstyled
|
||||
|
||||
All headings are unstyled by default:
|
||||
|
||||
```css
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
```
|
||||
|
||||
**Reasons:**
|
||||
- Avoids deviating from your type scale
|
||||
- In UI development, headings should often be visually de-emphasized
|
||||
|
||||
### Lists Unstyled
|
||||
|
||||
Ordered and unordered lists have no bullets or numbers:
|
||||
|
||||
```css
|
||||
ol, ul, menu {
|
||||
list-style: none;
|
||||
}
|
||||
```
|
||||
|
||||
Style lists using utilities:
|
||||
|
||||
```html
|
||||
<ul class="list-inside list-disc">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
**Accessibility:** Add `role="list"` for screen readers when keeping lists unstyled:
|
||||
|
||||
```html
|
||||
<ul role="list">
|
||||
<li>One</li>
|
||||
<li>Two</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Images Are Block-Level
|
||||
|
||||
Images and replaced elements are `display: block`:
|
||||
|
||||
```css
|
||||
img, svg, video, canvas, audio, iframe, embed, object {
|
||||
display: block;
|
||||
vertical-align: middle;
|
||||
}
|
||||
```
|
||||
|
||||
Use `inline` utility if needed:
|
||||
|
||||
```html
|
||||
<img class="inline" src="..." alt="..." />
|
||||
```
|
||||
|
||||
### Images Are Constrained
|
||||
|
||||
Images and videos are constrained to parent width:
|
||||
|
||||
```css
|
||||
img, video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
```
|
||||
|
||||
Override with `max-w-none`:
|
||||
|
||||
```html
|
||||
<img class="max-w-none" src="..." alt="..." />
|
||||
```
|
||||
|
||||
### Hidden Attribute
|
||||
|
||||
Elements with `hidden` attribute stay hidden:
|
||||
|
||||
```css
|
||||
[hidden]:where(:not([hidden="until-found"])) {
|
||||
display: none !important;
|
||||
}
|
||||
```
|
||||
|
||||
## Extending Preflight
|
||||
|
||||
Add base styles to the `base` layer:
|
||||
|
||||
```css
|
||||
@layer base {
|
||||
h1 {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-blue-600);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Disabling Preflight
|
||||
|
||||
Import Tailwind components individually, omitting Preflight:
|
||||
|
||||
```css
|
||||
@layer theme, base, components, utilities;
|
||||
|
||||
@import "tailwindcss/theme.css" layer(theme);
|
||||
/* @import "tailwindcss/preflight.css" layer(base); */ /* Omitted */
|
||||
@import "tailwindcss/utilities.css" layer(utilities);
|
||||
```
|
||||
|
||||
## Working Around Third-Party Libraries
|
||||
|
||||
Some libraries may conflict with Preflight. Override Preflight styles:
|
||||
|
||||
```css
|
||||
@layer base {
|
||||
.google-map * {
|
||||
border-style: none;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Preflight normalizes cross-browser inconsistencies
|
||||
- Margins, borders, headings, and lists are reset
|
||||
- Images are block-level and constrained by default
|
||||
- Extend Preflight with `@layer base`
|
||||
- Disable by omitting the preflight import
|
||||
- Override Preflight styles when needed for third-party libraries
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/preflight
|
||||
-->
|
||||
163
.agents/skills/tailwindcss/references/core-responsive.md
Normal file
163
.agents/skills/tailwindcss/references/core-responsive.md
Normal file
@@ -0,0 +1,163 @@
|
||||
---
|
||||
name: core-responsive
|
||||
description: Building responsive designs with Tailwind's mobile-first breakpoint system and container queries
|
||||
---
|
||||
|
||||
# Responsive Design
|
||||
|
||||
Every utility class in Tailwind can be applied conditionally at different breakpoints using responsive variants.
|
||||
|
||||
## Mobile-First Breakpoints
|
||||
|
||||
Tailwind uses a mobile-first approach. Unprefixed utilities apply to all screen sizes, while prefixed utilities apply at that breakpoint and above.
|
||||
|
||||
```html
|
||||
<!-- Center text on mobile, left align on sm screens and up -->
|
||||
<div class="text-center sm:text-left">Content</div>
|
||||
```
|
||||
|
||||
## Default Breakpoints
|
||||
|
||||
| Breakpoint | Minimum Width | CSS |
|
||||
|------------|---------------|-----|
|
||||
| `sm` | 40rem (640px) | `@media (width >= 40rem)` |
|
||||
| `md` | 48rem (768px) | `@media (width >= 48rem)` |
|
||||
| `lg` | 64rem (1024px) | `@media (width >= 64rem)` |
|
||||
| `xl` | 80rem (1280px) | `@media (width >= 80rem)` |
|
||||
| `2xl` | 96rem (1536px) | `@media (width >= 96rem)` |
|
||||
|
||||
## Usage
|
||||
|
||||
Prefix any utility with a breakpoint name:
|
||||
|
||||
```html
|
||||
<!-- Width of 16 by default, 32 on medium screens, 48 on large screens -->
|
||||
<img class="w-16 md:w-32 lg:w-48" src="..." />
|
||||
```
|
||||
|
||||
## Example: Responsive Card
|
||||
|
||||
```html
|
||||
<div class="mx-auto max-w-md md:max-w-2xl">
|
||||
<div class="md:flex">
|
||||
<div class="md:shrink-0">
|
||||
<img class="h-48 w-full object-cover md:h-full md:w-48" src="..." />
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<h2 class="text-lg font-semibold">Title</h2>
|
||||
<p class="text-gray-500">Description</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Targeting Mobile Screens
|
||||
|
||||
Use unprefixed utilities for mobile, not `sm:`. Think of `sm:` as "at the small breakpoint", not "on small screens".
|
||||
|
||||
```html
|
||||
<!-- ❌ Only centers on screens 640px+, not mobile -->
|
||||
<div class="sm:text-center"></div>
|
||||
|
||||
<!-- ✅ Centers on mobile, left aligns on 640px+ -->
|
||||
<div class="text-center sm:text-left"></div>
|
||||
```
|
||||
|
||||
## Breakpoint Ranges
|
||||
|
||||
Target a specific breakpoint range by stacking responsive variants with `max-*` variants:
|
||||
|
||||
```html
|
||||
<!-- Only applies between md and xl -->
|
||||
<div class="md:max-xl:flex">Content</div>
|
||||
```
|
||||
|
||||
## Max-Width Variants
|
||||
|
||||
Tailwind generates `max-*` variants for each breakpoint:
|
||||
|
||||
| Variant | Media Query |
|
||||
|---------|-------------|
|
||||
| `max-sm` | `@media (width < 40rem)` |
|
||||
| `max-md` | `@media (width < 48rem)` |
|
||||
| `max-lg` | `@media (width < 64rem)` |
|
||||
| `max-xl` | `@media (width < 80rem)` |
|
||||
| `max-2xl` | `@media (width < 96rem)` |
|
||||
|
||||
## Custom Breakpoints
|
||||
|
||||
Add custom breakpoints using `--breakpoint-*` theme variables:
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--breakpoint-xs: 30rem;
|
||||
--breakpoint-3xl: 120rem;
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="xs:grid-cols-2 3xl:grid-cols-6">Content</div>
|
||||
```
|
||||
|
||||
## Arbitrary Breakpoints
|
||||
|
||||
Use arbitrary values for one-off breakpoints:
|
||||
|
||||
```html
|
||||
<div class="min-[320px]:text-center max-[600px]:bg-sky-300">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Container Queries
|
||||
|
||||
Style elements based on parent container size instead of viewport:
|
||||
|
||||
```html
|
||||
<!-- Mark container -->
|
||||
<div class="@container">
|
||||
<!-- Style based on container size -->
|
||||
<div class="flex flex-col @md:flex-row">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Container Query Variants
|
||||
|
||||
| Variant | Minimum Width |
|
||||
|---------|---------------|
|
||||
| `@3xs` | 16rem (256px) |
|
||||
| `@xs` | 20rem (320px) |
|
||||
| `@sm` | 24rem (384px) |
|
||||
| `@md` | 28rem (448px) |
|
||||
| `@lg` | 32rem (512px) |
|
||||
| `@xl` | 36rem (576px) |
|
||||
| `@2xl` | 42rem (672px) |
|
||||
| `@3xl` | 48rem (768px) |
|
||||
| ... up to `@7xl` | 80rem (1280px) |
|
||||
|
||||
### Named Containers
|
||||
|
||||
Name containers to target specific ones in nested structures:
|
||||
|
||||
```html
|
||||
<div class="@container/main">
|
||||
<div class="flex flex-row @sm/main:flex-col">
|
||||
Content
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Mobile-first: unprefixed = mobile, prefixed = breakpoint and up
|
||||
- Use unprefixed utilities for mobile, not `sm:`
|
||||
- Stack variants for complex responsive behavior
|
||||
- Container queries enable component-based responsive design
|
||||
- Customize breakpoints with theme variables
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/responsive-design
|
||||
-->
|
||||
108
.agents/skills/tailwindcss/references/core-theme.md
Normal file
108
.agents/skills/tailwindcss/references/core-theme.md
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
name: core-theme
|
||||
description: Understanding theme variables, design tokens, and customizing Tailwind's default theme
|
||||
---
|
||||
|
||||
# Theme Variables
|
||||
|
||||
Theme variables are special CSS variables defined using the `@theme` directive that influence which utility classes exist in your project.
|
||||
|
||||
## Overview
|
||||
|
||||
Theme variables store design tokens like colors, fonts, spacing, shadows, and breakpoints. They're defined using the `@theme` directive:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--color-mint-500: oklch(0.72 0.11 178);
|
||||
--font-display: "Satoshi", "sans-serif";
|
||||
--breakpoint-3xl: 120rem;
|
||||
}
|
||||
```
|
||||
|
||||
Now utilities like `bg-mint-500`, `font-display`, and `3xl:grid-cols-6` become available.
|
||||
|
||||
## Why @theme Instead of :root?
|
||||
|
||||
Theme variables aren't just CSS variables - they also instruct Tailwind to create new utility classes. Using `@theme` makes this explicit and ensures variables are defined top-level.
|
||||
|
||||
Use `@theme` for design tokens that map to utilities. Use `:root` for regular CSS variables that shouldn't have corresponding utilities.
|
||||
|
||||
## Theme Variable Namespaces
|
||||
|
||||
Theme variables are organized into namespaces that map to utility classes:
|
||||
|
||||
| Namespace | Utility Classes |
|
||||
|-----------|----------------|
|
||||
| `--color-*` | `bg-red-500`, `text-sky-300`, `border-indigo-600`, etc. |
|
||||
| `--font-*` | `font-sans`, `font-serif`, `font-mono` |
|
||||
| `--breakpoint-*` | Responsive variants like `md:`, `lg:`, `xl:` |
|
||||
| `--spacing-*` | Spacing scale for padding, margin, gap utilities |
|
||||
| `--shadow-*` | `shadow-sm`, `shadow-md`, `shadow-lg` |
|
||||
| `--ease-*` | Transition timing functions |
|
||||
|
||||
## Extending the Default Theme
|
||||
|
||||
Add new theme variables to extend the default theme:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
/* Add new color */
|
||||
--color-brand-500: oklch(0.65 0.2 250);
|
||||
|
||||
/* Add new breakpoint */
|
||||
--breakpoint-3xl: 120rem;
|
||||
|
||||
/* Add new font */
|
||||
--font-display: "Satoshi", "sans-serif";
|
||||
}
|
||||
```
|
||||
|
||||
## Using Theme Variables
|
||||
|
||||
Tailwind generates CSS variables for your theme variables, so you can reference them:
|
||||
|
||||
```html
|
||||
<!-- Use utility classes -->
|
||||
<div class="bg-brand-500 text-display">Content</div>
|
||||
|
||||
<!-- Reference CSS variables directly -->
|
||||
<div style="background-color: var(--color-brand-500)">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Default Theme
|
||||
|
||||
When you import `tailwindcss`, it includes default theme variables:
|
||||
|
||||
```css
|
||||
@layer theme, base, components, utilities;
|
||||
|
||||
@import "./theme.css" layer(theme);
|
||||
@import "./preflight.css" layer(base);
|
||||
@import "./utilities.css" layer(utilities);
|
||||
```
|
||||
|
||||
The default theme includes:
|
||||
- Color palette (red, blue, green, etc. with 50-950 shades)
|
||||
- Font families (sans, serif, mono)
|
||||
- Spacing scale
|
||||
- Shadows
|
||||
- Breakpoints (sm, md, lg, xl, 2xl)
|
||||
|
||||
## Key Points
|
||||
|
||||
- Theme variables define which utilities exist in your project
|
||||
- Use `@theme` directive to define design tokens
|
||||
- Variables must be defined top-level, not nested
|
||||
- Tailwind generates both utilities and CSS variables
|
||||
- Default theme provides a solid starting point
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/theme
|
||||
-->
|
||||
@@ -0,0 +1,59 @@
|
||||
---
|
||||
name: core-utility-classes
|
||||
description: Understanding Tailwind's utility-first approach and how to style elements with utility classes
|
||||
---
|
||||
|
||||
# Utility Classes
|
||||
|
||||
Tailwind CSS uses a utility-first approach where you style elements by combining many single-purpose utility classes directly in your markup.
|
||||
|
||||
## Overview
|
||||
|
||||
Instead of writing custom CSS, you compose designs using utility classes:
|
||||
|
||||
```html
|
||||
<div class="mx-auto flex max-w-sm items-center gap-x-4 rounded-xl bg-white p-6 shadow-lg">
|
||||
<img class="size-12 shrink-0" src="/logo.svg" alt="Logo" />
|
||||
<div>
|
||||
<div class="text-xl font-medium text-black">ChitChat</div>
|
||||
<p class="text-gray-500">You have a new message!</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Benefits
|
||||
|
||||
- **Faster development** - No need to come up with class names or switch between HTML and CSS files
|
||||
- **Safer changes** - Adding or removing utilities only affects that element
|
||||
- **Easier maintenance** - Find the element and change classes, no need to remember custom CSS
|
||||
- **More portable** - Copy entire UI chunks between projects easily
|
||||
- **Smaller CSS** - Utilities are reusable, so CSS doesn't grow linearly
|
||||
|
||||
## Why Not Inline Styles?
|
||||
|
||||
Utility classes have important advantages over inline styles:
|
||||
|
||||
- **Design constraints** - Choose from a predefined design system instead of magic numbers
|
||||
- **State variants** - Target hover, focus, and other states with variants like `hover:bg-blue-600`
|
||||
- **Responsive design** - Use responsive variants like `md:flex` for media queries
|
||||
|
||||
## Utility Class Structure
|
||||
|
||||
Utility classes follow consistent naming patterns:
|
||||
|
||||
- **Property-value**: `bg-blue-500`, `text-lg`, `rounded-xl`
|
||||
- **Responsive**: `md:flex`, `lg:text-center`
|
||||
- **State variants**: `hover:bg-blue-600`, `focus:outline-2`
|
||||
- **Arbitrary values**: `top-[117px]`, `bg-[#bada55]`
|
||||
|
||||
## Key Points
|
||||
|
||||
- Every utility class is single-purpose and composable
|
||||
- Utilities can be combined with variants for conditional styling
|
||||
- Use complete class names - Tailwind scans your files as plain text
|
||||
- Avoid dynamically constructing class names with string interpolation
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/styling-with-utility-classes
|
||||
-->
|
||||
156
.agents/skills/tailwindcss/references/core-variants.md
Normal file
156
.agents/skills/tailwindcss/references/core-variants.md
Normal file
@@ -0,0 +1,156 @@
|
||||
---
|
||||
name: core-variants
|
||||
description: Using variants to apply utilities conditionally based on states, pseudo-classes, and media queries
|
||||
---
|
||||
|
||||
# Variants
|
||||
|
||||
Variants let you apply utility classes conditionally based on states, pseudo-classes, pseudo-elements, media queries, and more.
|
||||
|
||||
## Overview
|
||||
|
||||
Add a variant prefix to any utility class to apply it conditionally:
|
||||
|
||||
```html
|
||||
<!-- Apply bg-sky-700 only on hover -->
|
||||
<button class="bg-sky-500 hover:bg-sky-700">Save</button>
|
||||
```
|
||||
|
||||
Variants can be stacked to target specific situations:
|
||||
|
||||
```html
|
||||
<!-- Dark mode, medium breakpoint, on hover -->
|
||||
<button class="dark:md:hover:bg-fuchsia-600">Save</button>
|
||||
```
|
||||
|
||||
## Pseudo-Class Variants
|
||||
|
||||
### Interactive States
|
||||
|
||||
```html
|
||||
<button class="bg-violet-500 hover:bg-violet-600 focus:outline-2 focus:outline-violet-500 active:bg-violet-700">
|
||||
Save changes
|
||||
</button>
|
||||
```
|
||||
|
||||
Common interactive variants:
|
||||
- `hover:` - `:hover` pseudo-class
|
||||
- `focus:` - `:focus` pseudo-class
|
||||
- `active:` - `:active` pseudo-class
|
||||
- `focus-visible:` - `:focus-visible`
|
||||
- `focus-within:` - `:focus-within`
|
||||
- `visited:` - `:visited`
|
||||
|
||||
### Structural Variants
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li class="py-4 first:pt-0 last:pb-0">Item 1</li>
|
||||
<li class="py-4 first:pt-0 last:pb-0">Item 2</li>
|
||||
<li class="py-4 first:pt-0 last:pb-0">Item 3</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
Common structural variants:
|
||||
- `first:` - `:first-child`
|
||||
- `last:` - `:last-child`
|
||||
- `odd:` - `:nth-child(odd)`
|
||||
- `even:` - `:nth-child(even)`
|
||||
- `only:` - `:only-child`
|
||||
|
||||
### Form States
|
||||
|
||||
```html
|
||||
<input class="border-gray-300 required:border-red-500 invalid:border-red-500" />
|
||||
```
|
||||
|
||||
Common form variants:
|
||||
- `required:` - `:required`
|
||||
- `optional:` - `:optional`
|
||||
- `invalid:` - `:invalid`
|
||||
- `valid:` - `:valid`
|
||||
- `disabled:` - `:disabled`
|
||||
- `enabled:` - `:enabled`
|
||||
- `checked:` - `:checked`
|
||||
|
||||
## Pseudo-Element Variants
|
||||
|
||||
```html
|
||||
<input class="placeholder:text-gray-400 before:content-['*'] after:content-['required']" />
|
||||
```
|
||||
|
||||
Common pseudo-element variants:
|
||||
- `before:` - `::before`
|
||||
- `after:` - `::after`
|
||||
- `placeholder:` - `::placeholder`
|
||||
- `selection:` - `::selection`
|
||||
- `first-line:` - `::first-line`
|
||||
- `first-letter:` - `::first-letter`
|
||||
|
||||
## Media Query Variants
|
||||
|
||||
### Responsive Variants
|
||||
|
||||
```html
|
||||
<div class="text-sm md:text-base lg:text-lg">Responsive text</div>
|
||||
```
|
||||
|
||||
### Dark Mode
|
||||
|
||||
```html
|
||||
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
By default uses `prefers-color-scheme`, but can be customized to use a class or data attribute.
|
||||
|
||||
### Reduced Motion
|
||||
|
||||
```html
|
||||
<div class="transition-all motion-reduce:transition-none">
|
||||
Animated content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Attribute Selector Variants
|
||||
|
||||
```html
|
||||
<!-- RTL support -->
|
||||
<div class="text-left rtl:text-right">Content</div>
|
||||
|
||||
<!-- Open state -->
|
||||
<details class="[&[open]]:bg-gray-100">Details</details>
|
||||
```
|
||||
|
||||
## Arbitrary Variants
|
||||
|
||||
Use arbitrary variants for custom selectors:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li class="lg:[&:nth-child(-n+3)]:hover:underline">Item</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Child Selector Variants
|
||||
|
||||
```html
|
||||
<div class="[&>*]:mb-4 [&>*:last-child]:mb-0">
|
||||
<p>Paragraph 1</p>
|
||||
<p>Paragraph 2</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Variants prefix utilities to apply them conditionally
|
||||
- Variants can be stacked: `dark:md:hover:bg-blue-600`
|
||||
- Use variants for states, pseudo-classes, media queries, and more
|
||||
- Arbitrary variants enable custom selector patterns
|
||||
- Child selector variants target descendant elements
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/hover-focus-and-other-states
|
||||
-->
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
name: effects-form-controls
|
||||
description: Form control styling with accent-color, appearance, caret-color, and resize
|
||||
---
|
||||
|
||||
# Form Controls & Input Styling
|
||||
|
||||
Utilities for styling form controls: accent color, native appearance, caret color, and resize behavior.
|
||||
|
||||
## Usage
|
||||
|
||||
### Accent color
|
||||
|
||||
Control the accent color of checkboxes, radio buttons, range inputs, and progress:
|
||||
|
||||
```html
|
||||
<input type="checkbox" class="accent-pink-500" checked />
|
||||
<input type="radio" class="accent-rose-500" name="opt" />
|
||||
<input type="range" class="accent-indigo-500" />
|
||||
|
||||
<!-- Opacity modifier -->
|
||||
<input type="checkbox" class="accent-purple-500/75" />
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
Remove native form control styling for custom designs:
|
||||
|
||||
```html
|
||||
<!-- Custom select with overlay icon -->
|
||||
<div class="grid">
|
||||
<select class="col-start-1 row-start-1 appearance-none bg-gray-50 ...">
|
||||
<option>Yes</option>
|
||||
</select>
|
||||
<svg class="pointer-events-none col-start-1 row-start-1 ...">...</svg>
|
||||
</div>
|
||||
|
||||
<!-- Restore default in forced-colors mode (accessibility) -->
|
||||
<input type="checkbox" class="appearance-none forced-colors:appearance-auto" />
|
||||
```
|
||||
|
||||
### Caret color
|
||||
|
||||
Set the text input cursor color:
|
||||
|
||||
```html
|
||||
<textarea class="caret-pink-500">Focus to see caret</textarea>
|
||||
<input class="caret-blue-500" />
|
||||
```
|
||||
|
||||
### Resize
|
||||
|
||||
Control textarea resize behavior:
|
||||
|
||||
```html
|
||||
<textarea class="resize-y">Vertical only</textarea>
|
||||
<textarea class="resize-x">Horizontal only</textarea>
|
||||
<textarea class="resize">Both directions</textarea>
|
||||
<textarea class="resize-none">No resize handle</textarea>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `accent-*` - theme colors for checkboxes, radio, range; use `accent-[#hex]` or `accent-(--var)` for custom
|
||||
- `appearance-none` - remove native styling (custom selects, checkboxes)
|
||||
- `appearance-auto` - restore default (e.g. for `forced-colors: active`)
|
||||
- `caret-*` - theme colors for input cursor; matches text color patterns
|
||||
- `resize` - both; `resize-x` - horizontal; `resize-y` - vertical; `resize-none` - no handle
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/accent-color
|
||||
- https://tailwindcss.com/docs/appearance
|
||||
- https://tailwindcss.com/docs/caret-color
|
||||
- https://tailwindcss.com/docs/resize
|
||||
-->
|
||||
59
.agents/skills/tailwindcss/references/effects-scroll-snap.md
Normal file
59
.agents/skills/tailwindcss/references/effects-scroll-snap.md
Normal file
@@ -0,0 +1,59 @@
|
||||
---
|
||||
name: effects-scroll-snap
|
||||
description: CSS scroll snap for carousels and scroll containers
|
||||
---
|
||||
|
||||
# Scroll Snap
|
||||
|
||||
Utilities for scroll snap behavior in overflow containers. Use for carousels, horizontal galleries, or paged scroll.
|
||||
|
||||
## Usage
|
||||
|
||||
### Container
|
||||
|
||||
```html
|
||||
<!-- Horizontal snap (carousel) -->
|
||||
<div class="snap-x snap-mandatory overflow-x-auto flex gap-4">
|
||||
<div class="snap-center shrink-0 w-80">Slide 1</div>
|
||||
<div class="snap-center shrink-0 w-80">Slide 2</div>
|
||||
<div class="snap-center shrink-0 w-80">Slide 3</div>
|
||||
</div>
|
||||
|
||||
<!-- Vertical snap -->
|
||||
<div class="snap-y snap-mandatory overflow-y-auto h-screen">
|
||||
<div class="snap-start h-screen">Section 1</div>
|
||||
<div class="snap-start h-screen">Section 2</div>
|
||||
</div>
|
||||
|
||||
<!-- Both axes -->
|
||||
<div class="snap-both overflow-auto">...</div>
|
||||
```
|
||||
|
||||
### Strictness
|
||||
|
||||
- `snap-mandatory` - always rest on a snap point
|
||||
- `snap-proximity` - snap only when close to a point (default)
|
||||
|
||||
### Child alignment
|
||||
|
||||
```html
|
||||
<div class="snap-x overflow-x-auto">
|
||||
<div class="snap-center">Center snap</div>
|
||||
<div class="snap-start">Start snap</div>
|
||||
<div class="snap-end">End snap</div>
|
||||
<div class="snap-align-none">No snap</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `snap-x` - horizontal; `snap-y` - vertical; `snap-both` - both; `snap-none` - disable
|
||||
- `snap-mandatory` / `snap-proximity` - strictness
|
||||
- Child: `snap-center`, `snap-start`, `snap-end`, `snap-align-none`
|
||||
- Requires overflow (e.g. `overflow-x-auto`) and scroll on container
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/scroll-snap-type
|
||||
- https://tailwindcss.com/docs/scroll-snap-align
|
||||
-->
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
name: effects-transition-animation
|
||||
description: CSS transitions, animation keyframes, and reduced motion support
|
||||
---
|
||||
|
||||
# Transition & Animation
|
||||
|
||||
Utilities for CSS transitions and animations.
|
||||
|
||||
## Usage
|
||||
|
||||
### Transition property
|
||||
|
||||
```html
|
||||
<button class="transition hover:bg-blue-600">Transitions common properties</button>
|
||||
<button class="transition-all hover:scale-110">All properties</button>
|
||||
<button class="transition-colors hover:bg-indigo-500">Colors only</button>
|
||||
<button class="transition-opacity hover:opacity-75">Opacity only</button>
|
||||
<button class="transition-transform hover:translate-y-1">Transform only</button>
|
||||
<button class="transition-none">No transition</button>
|
||||
```
|
||||
|
||||
### Transition duration and delay
|
||||
|
||||
```html
|
||||
<button class="transition duration-150">150ms (default)</button>
|
||||
<button class="transition duration-300">300ms</button>
|
||||
<button class="transition duration-500">500ms</button>
|
||||
<button class="transition delay-150">Delay 150ms</button>
|
||||
<button class="transition duration-300 delay-100">Both</button>
|
||||
```
|
||||
|
||||
### Transition timing
|
||||
|
||||
```html
|
||||
<button class="transition ease-linear">Linear</button>
|
||||
<button class="transition ease-in">Ease in</button>
|
||||
<button class="transition ease-out">Ease out</button>
|
||||
<button class="transition ease-in-out">Ease in-out (default)</button>
|
||||
<button class="transition ease-[cubic-bezier(0.4,0,0.2,1)]">Arbitrary</button>
|
||||
```
|
||||
|
||||
### Animation keyframes
|
||||
|
||||
```html
|
||||
<div class="animate-spin">Spinning</div>
|
||||
<div class="animate-ping">Ping effect</div>
|
||||
<div class="animate-pulse">Pulse</div>
|
||||
<div class="animate-bounce">Bounce</div>
|
||||
```
|
||||
|
||||
Built-in: `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`. Use `@keyframes` in custom CSS for more.
|
||||
|
||||
### Reduced motion
|
||||
|
||||
```html
|
||||
<button class="transition hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
|
||||
Respects prefers-reduced-motion
|
||||
</button>
|
||||
<div class="animate-spin motion-reduce:animate-none">Spinner hidden when reduced motion</div>
|
||||
```
|
||||
|
||||
Use `motion-reduce:` to disable or simplify animations when user prefers reduced motion.
|
||||
|
||||
## Key Points
|
||||
|
||||
- Transition: `transition`, `transition-all`, `transition-colors`, `transition-opacity`, `transition-transform`
|
||||
- Duration: `duration-{75,100,150,200,300,500,700,1000}`
|
||||
- Delay: `delay-{75,100,150,200,300,500,700,1000}`
|
||||
- Timing: `ease-{linear,in,in-out,out}`
|
||||
- Animation: `animate-spin`, `animate-ping`, `animate-pulse`, `animate-bounce`
|
||||
- Always consider `motion-reduce:` for accessibility
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/transition-property
|
||||
- https://tailwindcss.com/docs/transition-duration
|
||||
- https://tailwindcss.com/docs/transition-timing-function
|
||||
- https://tailwindcss.com/docs/animation
|
||||
-->
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
name: effects-visibility-interactivity
|
||||
description: Visibility, cursor, pointer-events, user-select, and z-index
|
||||
---
|
||||
|
||||
# Visibility & Interactivity
|
||||
|
||||
Utilities for visibility, cursor, pointer-events, user-select, and stacking.
|
||||
|
||||
## Usage
|
||||
|
||||
### Visibility
|
||||
|
||||
```html
|
||||
<div class="visible">Visible (default)</div>
|
||||
<div class="invisible">Hidden but in layout</div>
|
||||
<div class="collapse">Table collapse</div>
|
||||
```
|
||||
|
||||
Use `invisible` when you need to keep layout space; use `hidden` (display:none) to remove from flow.
|
||||
|
||||
### Cursor
|
||||
|
||||
```html
|
||||
<button class="cursor-pointer">Pointer</button>
|
||||
<div class="cursor-not-allowed">Disabled</div>
|
||||
<div class="cursor-wait">Loading</div>
|
||||
<div class="cursor-move">Draggable</div>
|
||||
<div class="cursor-grab">Grab</div>
|
||||
<div class="cursor-grabbing">Grabbing</div>
|
||||
<div class="cursor-text">Text select</div>
|
||||
<div class="cursor-default">Default</div>
|
||||
<div class="cursor-none">No cursor</div>
|
||||
```
|
||||
|
||||
### Pointer events
|
||||
|
||||
```html
|
||||
<div class="pointer-events-none">Ignore all pointer events</div>
|
||||
<div class="pointer-events-auto">Default behavior</div>
|
||||
```
|
||||
|
||||
Useful for overlays: make overlay `pointer-events-none` so clicks pass through, or `pointer-events-none` on disabled elements.
|
||||
|
||||
### User select
|
||||
|
||||
```html
|
||||
<p class="select-none">Cannot select</p>
|
||||
<p class="select-text">Select text (default)</p>
|
||||
<p class="select-all">Select all on click</p>
|
||||
<p class="select-auto">Browser default</p>
|
||||
```
|
||||
|
||||
### Z-index
|
||||
|
||||
```html
|
||||
<div class="z-0">0</div>
|
||||
<div class="z-10">10</div>
|
||||
<div class="z-20">20</div>
|
||||
<div class="z-50">50</div>
|
||||
<div class="z-auto">Auto</div>
|
||||
<div class="z-[100]">Arbitrary</div>
|
||||
```
|
||||
|
||||
Common: `z-0` (base), `z-10` (dropdowns), `z-20` (fixed nav), `z-50` (modal), `z-40` (overlay).
|
||||
|
||||
## Key Points
|
||||
|
||||
- Visibility: `visible`, `invisible`, `collapse`
|
||||
- Cursor: `cursor-{pointer,not-allowed,wait,move,grab,text,default,none}`
|
||||
- Pointer events: `pointer-events-none`, `pointer-events-auto`
|
||||
- User select: `select-none`, `select-text`, `select-all`
|
||||
- Z-index: `z-{0,10,20,30,40,50,auto}`, `z-[n]`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/visibility
|
||||
- https://tailwindcss.com/docs/cursor
|
||||
- https://tailwindcss.com/docs/pointer-events
|
||||
- https://tailwindcss.com/docs/user-select
|
||||
- https://tailwindcss.com/docs/z-index
|
||||
-->
|
||||
@@ -0,0 +1,175 @@
|
||||
---
|
||||
name: features-content-detection
|
||||
description: How Tailwind detects classes in source files and how to customize content scanning
|
||||
---
|
||||
|
||||
# Detecting Classes in Source Files
|
||||
|
||||
Tailwind scans your project for utility classes and generates CSS based on what you've actually used.
|
||||
|
||||
## How Classes Are Detected
|
||||
|
||||
Tailwind treats all source files as plain text and looks for tokens that could be class names:
|
||||
|
||||
```jsx
|
||||
export function Button({ color, children }) {
|
||||
const colors = {
|
||||
black: "bg-black text-white",
|
||||
blue: "bg-blue-500 text-white",
|
||||
};
|
||||
|
||||
return (
|
||||
<button className={`${colors[color]} rounded-full px-2 py-1.5`}>
|
||||
{children}
|
||||
</button>
|
||||
);
|
||||
}
|
||||
```
|
||||
|
||||
Tailwind detects `bg-black`, `text-white`, `bg-blue-500`, `rounded-full`, `px-2`, and `py-1.5` from this file.
|
||||
|
||||
## Dynamic Class Names
|
||||
|
||||
Tailwind scans files as plain text, so it can't understand string concatenation or interpolation.
|
||||
|
||||
### ❌ Don't Construct Classes Dynamically
|
||||
|
||||
```html
|
||||
<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
|
||||
```
|
||||
|
||||
The strings `text-red-600` and `text-green-600` don't exist in the file, so Tailwind won't generate them.
|
||||
|
||||
### ✅ Use Complete Class Names
|
||||
|
||||
```html
|
||||
<div class="{{ error ? 'text-red-600' : 'text-green-600' }}">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
### ❌ Don't Build Classes from Props
|
||||
|
||||
```jsx
|
||||
function Button({ color, children }) {
|
||||
return <button className={`bg-${color}-600 hover:bg-${color}-500`}>{children}</button>;
|
||||
}
|
||||
```
|
||||
|
||||
### ✅ Map Props to Static Classes
|
||||
|
||||
```jsx
|
||||
function Button({ color, children }) {
|
||||
const colorVariants = {
|
||||
blue: "bg-blue-600 hover:bg-blue-500",
|
||||
red: "bg-red-600 hover:bg-red-500",
|
||||
};
|
||||
|
||||
return <button className={`${colorVariants[color]} ...`}>{children}</button>;
|
||||
}
|
||||
```
|
||||
|
||||
## Which Files Are Scanned
|
||||
|
||||
Tailwind scans every file in your project except:
|
||||
|
||||
- Files in `.gitignore`
|
||||
- Files in `node_modules`
|
||||
- Binary files (images, videos, zip files)
|
||||
- CSS files
|
||||
- Common package manager lock files
|
||||
|
||||
## Explicitly Registering Sources
|
||||
|
||||
Use `@source` to explicitly register source paths:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@source "../node_modules/@acmecorp/ui-lib";
|
||||
```
|
||||
|
||||
This is useful for external libraries built with Tailwind that are in `.gitignore`.
|
||||
|
||||
## Setting Base Path
|
||||
|
||||
Set the base path for source detection:
|
||||
|
||||
```css
|
||||
@import "tailwindcss" source("../src");
|
||||
```
|
||||
|
||||
Useful in monorepos where build commands run from the root.
|
||||
|
||||
## Ignoring Specific Paths
|
||||
|
||||
Use `@source not` to ignore paths:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@source not "../src/components/legacy";
|
||||
```
|
||||
|
||||
## Disabling Automatic Detection
|
||||
|
||||
Use `source(none)` to disable automatic detection:
|
||||
|
||||
```css
|
||||
@import "tailwindcss" source(none);
|
||||
|
||||
@source "../admin";
|
||||
@source "../shared";
|
||||
```
|
||||
|
||||
Useful for projects with multiple Tailwind stylesheets.
|
||||
|
||||
## Safelisting Utilities
|
||||
|
||||
Force Tailwind to generate specific classes with `@source inline()`:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@source inline("underline");
|
||||
```
|
||||
|
||||
### Safelisting with Variants
|
||||
|
||||
Generate classes with variants:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@source inline("{hover:,focus:,}underline");
|
||||
```
|
||||
|
||||
### Safelisting with Ranges
|
||||
|
||||
Use brace expansion to generate multiple classes:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
|
||||
```
|
||||
|
||||
This generates `bg-red-50` through `bg-red-950` with hover variants.
|
||||
|
||||
## Explicitly Excluding Classes
|
||||
|
||||
Use `@source not inline()` to prevent specific classes from being generated:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Tailwind scans files as plain text
|
||||
- Always use complete class names, never construct them dynamically
|
||||
- Map props/state to static class names
|
||||
- Use `@source` to explicitly register or ignore paths
|
||||
- Use `@source inline()` to safelist utilities
|
||||
- Brace expansion works in inline sources for ranges
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/detecting-classes-in-source-files
|
||||
-->
|
||||
203
.agents/skills/tailwindcss/references/features-custom-styles.md
Normal file
203
.agents/skills/tailwindcss/references/features-custom-styles.md
Normal file
@@ -0,0 +1,203 @@
|
||||
---
|
||||
name: features-custom-styles
|
||||
description: Adding custom styles, utilities, variants, and working with arbitrary values
|
||||
---
|
||||
|
||||
# Adding Custom Styles
|
||||
|
||||
Tailwind is designed to be extensible. This guide covers customizing your theme, using arbitrary values, adding custom CSS, and extending the framework.
|
||||
|
||||
## Customizing Your Theme
|
||||
|
||||
Add custom design tokens using `@theme`:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme {
|
||||
--font-display: "Satoshi", "sans-serif";
|
||||
--breakpoint-3xl: 120rem;
|
||||
--color-brand-500: oklch(0.65 0.2 250);
|
||||
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
|
||||
}
|
||||
```
|
||||
|
||||
## Arbitrary Values
|
||||
|
||||
Use square bracket notation for one-off values that don't belong in your theme:
|
||||
|
||||
```html
|
||||
<!-- Arbitrary values -->
|
||||
<div class="top-[117px] bg-[#bada55] text-[22px]">
|
||||
Content
|
||||
</div>
|
||||
|
||||
<!-- With variants -->
|
||||
<div class="top-[117px] lg:top-[344px]">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS Variables as Arbitrary Values
|
||||
|
||||
Reference CSS variables:
|
||||
|
||||
```html
|
||||
<div class="fill-(--my-brand-color)">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
This is shorthand for `fill-[var(--my-brand-color)]`.
|
||||
|
||||
## Arbitrary Properties
|
||||
|
||||
Use square brackets for CSS properties Tailwind doesn't have utilities for:
|
||||
|
||||
```html
|
||||
<div class="[mask-type:luminance]">
|
||||
Content
|
||||
</div>
|
||||
|
||||
<!-- With variants -->
|
||||
<div class="[mask-type:luminance] hover:[mask-type:alpha]">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
### CSS Variables
|
||||
|
||||
Set CSS variables with arbitrary properties:
|
||||
|
||||
```html
|
||||
<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Arbitrary Variants
|
||||
|
||||
Create custom selectors on the fly:
|
||||
|
||||
```html
|
||||
<ul>
|
||||
<li class="lg:[&:nth-child(-n+3)]:hover:underline">Item</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
## Handling Whitespace
|
||||
|
||||
Use underscores for spaces in arbitrary values:
|
||||
|
||||
```html
|
||||
<div class="grid-cols-[1fr_500px_2fr]">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
Tailwind converts underscores to spaces, except in contexts where underscores are valid (like URLs).
|
||||
|
||||
## Custom Utilities
|
||||
|
||||
Add custom utilities with `@utility`:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@utility tab-4 {
|
||||
tab-size: 4;
|
||||
}
|
||||
```
|
||||
|
||||
Now you can use `tab-4` utility class, and it works with variants:
|
||||
|
||||
```html
|
||||
<div class="tab-4 hover:tab-8">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Custom Variants
|
||||
|
||||
Add custom variants with `@custom-variant`:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
|
||||
```
|
||||
|
||||
Now you can use `theme-midnight:` variant:
|
||||
|
||||
```html
|
||||
<div class="theme-midnight:bg-black theme-midnight:text-white">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Using Variants in CSS
|
||||
|
||||
Apply Tailwind variants to custom CSS with `@variant`:
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
background: white;
|
||||
|
||||
@variant dark {
|
||||
background: black;
|
||||
}
|
||||
|
||||
@variant hover {
|
||||
background: gray;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Base Styles
|
||||
|
||||
Add base styles to the `base` layer:
|
||||
|
||||
```css
|
||||
@layer base {
|
||||
h1 {
|
||||
font-size: var(--text-2xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: var(--text-xl);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-blue-600);
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Component Styles
|
||||
|
||||
Add component styles to the `components` layer:
|
||||
|
||||
```css
|
||||
@layer components {
|
||||
.btn-primary {
|
||||
@apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Use `@theme` to customize design tokens
|
||||
- Arbitrary values with `[]` for one-off values
|
||||
- Arbitrary properties for CSS properties without utilities
|
||||
- `@utility` for custom utilities
|
||||
- `@custom-variant` for custom variants
|
||||
- `@layer` for organizing base and component styles
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/adding-custom-styles
|
||||
-->
|
||||
137
.agents/skills/tailwindcss/references/features-dark-mode.md
Normal file
137
.agents/skills/tailwindcss/references/features-dark-mode.md
Normal file
@@ -0,0 +1,137 @@
|
||||
---
|
||||
name: features-dark-mode
|
||||
description: Implementing dark mode with Tailwind's dark variant and custom dark mode strategies
|
||||
---
|
||||
|
||||
# Dark Mode
|
||||
|
||||
Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled.
|
||||
|
||||
## Overview
|
||||
|
||||
Use the `dark:` variant to apply styles in dark mode:
|
||||
|
||||
```html
|
||||
<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Default Behavior
|
||||
|
||||
By default, the `dark` variant uses the `prefers-color-scheme` CSS media feature:
|
||||
|
||||
```css
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:bg-gray-800 {
|
||||
background-color: rgb(31 41 55);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## Manual Toggle with Class
|
||||
|
||||
Override the `dark` variant to use a class selector:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
```
|
||||
|
||||
Now dark mode utilities apply when the `dark` class is present:
|
||||
|
||||
```html
|
||||
<html class="dark">
|
||||
<body>
|
||||
<div class="bg-white dark:bg-black">Content</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Manual Toggle with Data Attribute
|
||||
|
||||
Use a data attribute instead:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
|
||||
@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
|
||||
```
|
||||
|
||||
```html
|
||||
<html data-theme="dark">
|
||||
<body>
|
||||
<div class="bg-white dark:bg-black">Content</div>
|
||||
</body>
|
||||
</html>
|
||||
```
|
||||
|
||||
## Three-Way Theme Toggle
|
||||
|
||||
Support light mode, dark mode, and system preference:
|
||||
|
||||
```js
|
||||
// On page load
|
||||
document.documentElement.classList.toggle(
|
||||
"dark",
|
||||
localStorage.theme === "dark" ||
|
||||
(!("theme" in localStorage) &&
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches)
|
||||
);
|
||||
|
||||
// Set light mode
|
||||
localStorage.theme = "light";
|
||||
document.documentElement.classList.remove("dark");
|
||||
|
||||
// Set dark mode
|
||||
localStorage.theme = "dark";
|
||||
document.documentElement.classList.add("dark");
|
||||
|
||||
// Respect system preference
|
||||
localStorage.removeItem("theme");
|
||||
document.documentElement.classList.toggle(
|
||||
"dark",
|
||||
window.matchMedia("(prefers-color-scheme: dark)").matches
|
||||
);
|
||||
```
|
||||
|
||||
## Common Patterns
|
||||
|
||||
### Cards
|
||||
|
||||
```html
|
||||
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none">
|
||||
<h2 class="text-gray-900 dark:text-white">Title</h2>
|
||||
<p class="text-gray-500 dark:text-gray-400">Description</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Borders
|
||||
|
||||
```html
|
||||
<div class="border border-gray-200 dark:border-gray-700">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
### Buttons
|
||||
|
||||
```html
|
||||
<button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white">
|
||||
Button
|
||||
</button>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Use `dark:` variant for dark mode styles
|
||||
- Default uses `prefers-color-scheme` media query
|
||||
- Override with `@custom-variant` for manual toggles
|
||||
- Can use class or data attribute selectors
|
||||
- Combine with responsive variants: `dark:md:bg-gray-800`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/dark-mode
|
||||
-->
|
||||
@@ -0,0 +1,241 @@
|
||||
---
|
||||
name: features-functions-directives
|
||||
description: Tailwind's CSS directives (@import, @theme, @utility, @variant) and functions (--alpha, --spacing)
|
||||
---
|
||||
|
||||
# Functions and Directives
|
||||
|
||||
Tailwind provides custom CSS directives and functions for working with your design system.
|
||||
|
||||
## Directives
|
||||
|
||||
Directives are custom Tailwind-specific at-rules that offer special functionality.
|
||||
|
||||
### @import
|
||||
|
||||
Import CSS files, including Tailwind:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
### @theme
|
||||
|
||||
Define your project's design tokens:
|
||||
|
||||
```css
|
||||
@theme {
|
||||
--font-display: "Satoshi", "sans-serif";
|
||||
--breakpoint-3xl: 120rem;
|
||||
--color-brand-500: oklch(0.65 0.2 250);
|
||||
--ease-fluid: cubic-bezier(0.3, 0, 0, 1);
|
||||
}
|
||||
```
|
||||
|
||||
### @source
|
||||
|
||||
Explicitly specify source files for class detection:
|
||||
|
||||
```css
|
||||
@import "tailwindcss";
|
||||
@source "../node_modules/@my-company/ui-lib";
|
||||
```
|
||||
|
||||
### @utility
|
||||
|
||||
Add custom utilities:
|
||||
|
||||
```css
|
||||
@utility tab-4 {
|
||||
tab-size: 4;
|
||||
}
|
||||
```
|
||||
|
||||
Custom utilities work with variants:
|
||||
|
||||
```html
|
||||
<div class="tab-4 hover:tab-8">Content</div>
|
||||
```
|
||||
|
||||
### @variant
|
||||
|
||||
Apply Tailwind variants to styles in your CSS:
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
background: white;
|
||||
|
||||
@variant dark {
|
||||
background: black;
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
### @custom-variant
|
||||
|
||||
Add custom variants:
|
||||
|
||||
```css
|
||||
@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
|
||||
```
|
||||
|
||||
```html
|
||||
<div class="theme-midnight:bg-black">Content</div>
|
||||
```
|
||||
|
||||
### @apply
|
||||
|
||||
Inline existing utility classes into custom CSS:
|
||||
|
||||
```css
|
||||
.select2-dropdown {
|
||||
@apply rounded-b-lg shadow-md;
|
||||
}
|
||||
|
||||
.select2-search {
|
||||
@apply rounded border border-gray-300;
|
||||
}
|
||||
```
|
||||
|
||||
### @reference
|
||||
|
||||
Import stylesheet for reference without including styles (useful for Vue/Svelte components):
|
||||
|
||||
```html
|
||||
<style>
|
||||
@reference "../../app.css";
|
||||
|
||||
h1 {
|
||||
@apply text-2xl font-bold text-red-500;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
Or reference Tailwind directly:
|
||||
|
||||
```html
|
||||
<style>
|
||||
@reference "tailwindcss";
|
||||
|
||||
h1 {
|
||||
@apply text-2xl font-bold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
### Subpath Imports
|
||||
|
||||
Directives support subpath imports (like TypeScript path aliases):
|
||||
|
||||
```json
|
||||
{
|
||||
"imports": {
|
||||
"#app.css": "./src/css/app.css"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
```html
|
||||
<style>
|
||||
@reference "#app.css";
|
||||
|
||||
h1 {
|
||||
@apply text-2xl font-bold;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
## Functions
|
||||
|
||||
Tailwind provides build-time functions for working with colors and spacing.
|
||||
|
||||
### --alpha()
|
||||
|
||||
Adjust the opacity of a color:
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
color: --alpha(var(--color-lime-300) / 50%);
|
||||
}
|
||||
```
|
||||
|
||||
Compiles to:
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
color: color-mix(in oklab, var(--color-lime-300) 50%, transparent);
|
||||
}
|
||||
```
|
||||
|
||||
### --spacing()
|
||||
|
||||
Generate spacing values based on your theme:
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
margin: --spacing(4);
|
||||
}
|
||||
```
|
||||
|
||||
Compiles to:
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
margin: calc(var(--spacing) * 4);
|
||||
}
|
||||
```
|
||||
|
||||
Useful in arbitrary values with `calc()`:
|
||||
|
||||
```html
|
||||
<div class="py-[calc(--spacing(4)-1px)]">
|
||||
Content
|
||||
</div>
|
||||
```
|
||||
|
||||
## Compatibility Directives
|
||||
|
||||
For compatibility with Tailwind CSS v3.x:
|
||||
|
||||
### @config
|
||||
|
||||
Load a legacy JavaScript-based configuration:
|
||||
|
||||
```css
|
||||
@config "../../tailwind.config.js";
|
||||
```
|
||||
|
||||
### @plugin
|
||||
|
||||
Load a legacy JavaScript-based plugin:
|
||||
|
||||
```css
|
||||
@plugin "@tailwindcss/typography";
|
||||
```
|
||||
|
||||
### theme()
|
||||
|
||||
Access theme values using dot notation (deprecated):
|
||||
|
||||
```css
|
||||
.my-element {
|
||||
margin: theme(spacing.12);
|
||||
}
|
||||
```
|
||||
|
||||
**Note:** Prefer using CSS theme variables instead.
|
||||
|
||||
## Key Points
|
||||
|
||||
- Directives are Tailwind-specific at-rules
|
||||
- `@theme` defines design tokens
|
||||
- `@utility` creates custom utilities
|
||||
- `@custom-variant` creates custom variants
|
||||
- `@apply` inlines utilities into CSS
|
||||
- `--alpha()` and `--spacing()` are build-time functions
|
||||
- Compatibility directives support v3.x configs
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/functions-and-directives
|
||||
-->
|
||||
91
.agents/skills/tailwindcss/references/features-upgrade.md
Normal file
91
.agents/skills/tailwindcss/references/features-upgrade.md
Normal file
@@ -0,0 +1,91 @@
|
||||
---
|
||||
name: features-upgrade
|
||||
description: Migrating from Tailwind CSS v3 to v4
|
||||
---
|
||||
|
||||
# Upgrade Guide (v3 → v4)
|
||||
|
||||
Key changes when upgrading from Tailwind CSS v3 to v4. Use the automated upgrade tool when possible.
|
||||
|
||||
## Upgrade Tool
|
||||
|
||||
```bash
|
||||
npx @tailwindcss/upgrade
|
||||
```
|
||||
|
||||
Requires Node.js 20+. Run in a new branch, review diff, test. Handles most migration automatically.
|
||||
|
||||
## Installation Changes
|
||||
|
||||
- **PostCSS**: Use `@tailwindcss/postcss`; remove `postcss-import` and `autoprefixer` (handled by v4)
|
||||
- **Vite**: Prefer `@tailwindcss/vite` over PostCSS
|
||||
- **CLI**: Use `npx @tailwindcss/cli` instead of `npx tailwindcss`
|
||||
|
||||
## Import Change
|
||||
|
||||
```css
|
||||
/* v3 */
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
/* v4 */
|
||||
@import "tailwindcss";
|
||||
```
|
||||
|
||||
## Renamed Utilities
|
||||
|
||||
| v3 | v4 |
|
||||
|----|-----|
|
||||
| `shadow-sm` | `shadow-xs` |
|
||||
| `shadow` | `shadow-sm` |
|
||||
| `rounded-sm` | `rounded-xs` |
|
||||
| `rounded` | `rounded-sm` |
|
||||
| `blur-sm` | `blur-xs` |
|
||||
| `blur` | `blur-sm` |
|
||||
| `outline-none` | `outline-hidden` |
|
||||
| `ring` | `ring-3` |
|
||||
|
||||
## Removed / Replaced
|
||||
|
||||
- `bg-opacity-*`, `text-opacity-*`, etc. → use `bg-black/50`, `text-black/50`
|
||||
- `flex-shrink-*` → `shrink-*`
|
||||
- `flex-grow-*` → `grow-*`
|
||||
- `overflow-ellipsis` → `text-ellipsis`
|
||||
|
||||
## Important Modifier
|
||||
|
||||
```html
|
||||
<!-- v3: ! at start -->
|
||||
<div class="!bg-red-500">
|
||||
|
||||
<!-- v4: ! at end -->
|
||||
<div class="bg-red-500!">
|
||||
```
|
||||
|
||||
## Ring & Border Defaults
|
||||
|
||||
- `ring` width: 3px → 1px; use `ring-3` for v3 behavior
|
||||
- `ring` / `border` default color: `currentColor` (was gray-200 / blue-500)
|
||||
- Always specify color: `ring-3 ring-blue-500`, `border border-gray-200`
|
||||
|
||||
## Other Breaking Changes
|
||||
|
||||
- **Space/divide selectors**: Changed from `:not([hidden]) ~ :not([hidden])` to `:not(:last-child)`; may affect layout
|
||||
- **Variant stacking**: Left-to-right in v4 (was right-to-left)
|
||||
- **Transform reset**: `transform-none` no longer resets rotate/scale/translate; use `scale-none`, `rotate-none`, etc.
|
||||
- **Hover on mobile**: `hover` only applies when device supports hover; override with `@custom-variant hover (&:hover)` if needed
|
||||
- **Arbitrary values**: Use `bg-(--var)` not `bg-[--var]` for CSS variables
|
||||
- **theme()**: Use `theme(--breakpoint-xl)` not `theme(screens.xl)`
|
||||
- **@layer utilities/components**: Use `@utility` directive instead
|
||||
- **corePlugins, safelist, separator**: Not supported; use `@source inline()` for safelisting
|
||||
- **Sass/Less/Stylus**: v4 not designed for use with CSS preprocessors
|
||||
|
||||
## Browser Support
|
||||
|
||||
v4 targets Safari 16.4+, Chrome 111+, Firefox 128+. For older browsers, stay on v3.4.
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/upgrade-guide
|
||||
-->
|
||||
39
.agents/skills/tailwindcss/references/layout-aspect-ratio.md
Normal file
39
.agents/skills/tailwindcss/references/layout-aspect-ratio.md
Normal file
@@ -0,0 +1,39 @@
|
||||
---
|
||||
name: layout-aspect-ratio
|
||||
description: Controlling element aspect ratio for responsive media
|
||||
---
|
||||
|
||||
# Aspect Ratio
|
||||
|
||||
Utilities for controlling the aspect ratio of an element (e.g. video, images).
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<!-- 16:9 video container -->
|
||||
<div class="aspect-video">
|
||||
<iframe src="..."></iframe>
|
||||
</div>
|
||||
|
||||
<!-- 4:3 -->
|
||||
<div class="aspect-[4/3]">Content</div>
|
||||
|
||||
<!-- Square -->
|
||||
<div class="aspect-square">1:1</div>
|
||||
|
||||
<!-- Auto (intrinsic) -->
|
||||
<div class="aspect-auto">Natural ratio</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `aspect-video` - 16:9
|
||||
- `aspect-square` - 1:1
|
||||
- `aspect-auto` - browser default (intrinsic)
|
||||
- `aspect-[4/3]` - arbitrary ratio
|
||||
- Useful for responsive video embeds and image containers
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/aspect-ratio
|
||||
-->
|
||||
80
.agents/skills/tailwindcss/references/layout-columns.md
Normal file
80
.agents/skills/tailwindcss/references/layout-columns.md
Normal file
@@ -0,0 +1,80 @@
|
||||
---
|
||||
name: layout-columns
|
||||
description: Multi-column layout with columns utility for masonry-like or newspaper layouts
|
||||
---
|
||||
|
||||
# Columns
|
||||
|
||||
Utilities for CSS multi-column layout. Content flows into multiple columns within a single element.
|
||||
|
||||
## Usage
|
||||
|
||||
### By number of columns
|
||||
|
||||
```html
|
||||
<div class="columns-3 gap-8">
|
||||
<img class="aspect-3/2" src="1.jpg" />
|
||||
<img class="aspect-square" src="2.jpg" />
|
||||
<!-- Content flows into 3 columns -->
|
||||
</div>
|
||||
```
|
||||
|
||||
### By column width
|
||||
|
||||
Use container scale for ideal column width; column count adjusts automatically:
|
||||
|
||||
```html
|
||||
<div class="columns-3xs gap-4">...</div>
|
||||
<div class="columns-sm gap-6">...</div>
|
||||
<div class="columns-md">...</div>
|
||||
```
|
||||
|
||||
### Column gap
|
||||
|
||||
Use `gap-*` utilities for space between columns:
|
||||
|
||||
```html
|
||||
<div class="columns-3 gap-8">...</div>
|
||||
```
|
||||
|
||||
### Responsive
|
||||
|
||||
```html
|
||||
<div class="columns-2 gap-4 sm:columns-3 sm:gap-8">...</div>
|
||||
```
|
||||
|
||||
### Custom value
|
||||
|
||||
```html
|
||||
<div class="columns-[30vw]">...</div>
|
||||
<div class="columns-(--my-columns)">...</div>
|
||||
```
|
||||
|
||||
### Column / page breaks
|
||||
|
||||
Use with multi-column or print layouts:
|
||||
|
||||
```html
|
||||
<div class="columns-2">
|
||||
<p>Content...</p>
|
||||
<p class="break-after-column">Force break after this</p>
|
||||
<p>Next column...</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `break-after-column` / `break-before-column` - column break
|
||||
- `break-after-page` / `break-before-page` - page break (print)
|
||||
- `break-after-avoid` / `break-inside-avoid` - avoid breaking
|
||||
|
||||
## Key Points
|
||||
|
||||
- `columns-<n>` - fixed number of columns (e.g. `columns-3`)
|
||||
- `columns-3xs` through `columns-7xl` - column width from container scale
|
||||
- `columns-auto` - auto columns
|
||||
- `gap-*` controls column gap (same as flex/grid gap)
|
||||
- Use for magazine-style layouts, image galleries, long text
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/columns
|
||||
-->
|
||||
110
.agents/skills/tailwindcss/references/layout-display.md
Normal file
110
.agents/skills/tailwindcss/references/layout-display.md
Normal file
@@ -0,0 +1,110 @@
|
||||
---
|
||||
name: layout-display
|
||||
description: Controlling element display type including flex, grid, block, inline, hidden, and sr-only
|
||||
---
|
||||
|
||||
# Display
|
||||
|
||||
Utilities for controlling the display box type of an element.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic display types
|
||||
|
||||
```html
|
||||
<span class="inline">display: inline</span>
|
||||
<span class="inline-block">display: inline-block</span>
|
||||
<div class="block">display: block</div>
|
||||
```
|
||||
|
||||
### Flex and Grid containers
|
||||
|
||||
```html
|
||||
<!-- Flex container -->
|
||||
<div class="flex items-center gap-4">Flex layout</div>
|
||||
<span class="inline-flex items-baseline">Inline flex with text</span>
|
||||
|
||||
<!-- Grid container -->
|
||||
<div class="grid grid-cols-3 gap-4">Grid layout</div>
|
||||
<span class="inline-grid grid-cols-3 gap-4">Inline grid</span>
|
||||
```
|
||||
|
||||
### Flow root
|
||||
|
||||
Use `flow-root` to create a block-level element with its own block formatting context (fixes margin collapse):
|
||||
|
||||
```html
|
||||
<div class="flow-root">
|
||||
<div class="my-4">Content with isolated BFC</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Contents
|
||||
|
||||
Use `contents` for a "phantom" container whose children act like direct children of the parent:
|
||||
|
||||
```html
|
||||
<div class="flex">
|
||||
<div class="flex-1">01</div>
|
||||
<div class="contents">
|
||||
<div class="flex-1">02</div>
|
||||
<div class="flex-1">03</div>
|
||||
</div>
|
||||
<div class="flex-1">04</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Table display
|
||||
|
||||
```html
|
||||
<div class="table w-full">
|
||||
<div class="table-header-group bg-gray-100">
|
||||
<div class="table-row">
|
||||
<div class="table-cell p-2">Header 1</div>
|
||||
<div class="table-cell p-2">Header 2</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="table-row-group">
|
||||
<div class="table-row">
|
||||
<div class="table-cell p-2">Cell 1</div>
|
||||
<div class="table-cell p-2">Cell 2</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Hidden
|
||||
|
||||
```html
|
||||
<div class="hidden">Removed from document flow</div>
|
||||
<div class="md:block hidden">Visible only on md+</div>
|
||||
```
|
||||
|
||||
For visual-only hiding while keeping in DOM, use `invisible` or `opacity-0` instead.
|
||||
|
||||
### Screen reader only
|
||||
|
||||
```html
|
||||
<a href="#">
|
||||
<svg><!-- icon --></svg>
|
||||
<span class="sr-only">Settings</span>
|
||||
</a>
|
||||
```
|
||||
|
||||
Use `not-sr-only` to undo: `<span class="sr-only sm:not-sr-only">Settings</span>`
|
||||
|
||||
## Key Points
|
||||
|
||||
- `flex` / `inline-flex` - Flexbox layout
|
||||
- `grid` / `inline-grid` - CSS Grid layout
|
||||
- `block` / `inline` / `inline-block` - Basic flow
|
||||
- `hidden` - `display: none` (removes from flow)
|
||||
- `sr-only` - Visually hidden but accessible to screen readers
|
||||
- `contents` - Children participate in parent's layout
|
||||
- `flow-root` - Establishes new BFC
|
||||
- Table utilities: `table`, `table-row`, `table-cell`, `table-header-group`, etc.
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/display
|
||||
-->
|
||||
110
.agents/skills/tailwindcss/references/layout-flexbox.md
Normal file
110
.agents/skills/tailwindcss/references/layout-flexbox.md
Normal file
@@ -0,0 +1,110 @@
|
||||
---
|
||||
name: layout-flexbox
|
||||
description: Flexbox layout utilities including flex-direction, justify, items, gap, grow, shrink, and wrap
|
||||
---
|
||||
|
||||
# Flexbox
|
||||
|
||||
Utilities for building flex layouts: direction, alignment, gap, and item sizing.
|
||||
|
||||
## Usage
|
||||
|
||||
### Flex direction and wrap
|
||||
|
||||
```html
|
||||
<div class="flex flex-row">Horizontal (default)</div>
|
||||
<div class="flex flex-row-reverse">Reversed</div>
|
||||
<div class="flex flex-col">Vertical</div>
|
||||
<div class="flex flex-col-reverse">Vertical reversed</div>
|
||||
|
||||
<div class="flex flex-wrap">Wrap when needed</div>
|
||||
<div class="flex flex-nowrap">No wrap (default)</div>
|
||||
<div class="flex flex-wrap-reverse">Wrap reversed</div>
|
||||
```
|
||||
|
||||
### Justify content
|
||||
|
||||
```html
|
||||
<div class="flex justify-start">Start</div>
|
||||
<div class="flex justify-end">End</div>
|
||||
<div class="flex justify-center">Center</div>
|
||||
<div class="flex justify-between">Space between</div>
|
||||
<div class="flex justify-around">Space around</div>
|
||||
<div class="flex justify-evenly">Space evenly</div>
|
||||
```
|
||||
|
||||
### Align items
|
||||
|
||||
```html
|
||||
<div class="flex items-start">Align start</div>
|
||||
<div class="flex items-end">Align end</div>
|
||||
<div class="flex items-center">Center (common)</div>
|
||||
<div class="flex items-baseline">Baseline</div>
|
||||
<div class="flex items-stretch">Stretch (default)</div>
|
||||
```
|
||||
|
||||
### Align self (on flex children)
|
||||
|
||||
```html
|
||||
<div class="flex">
|
||||
<div class="self-auto">Auto</div>
|
||||
<div class="self-start">Start</div>
|
||||
<div class="self-center">Center</div>
|
||||
<div class="self-stretch">Stretch</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Gap
|
||||
|
||||
```html
|
||||
<div class="flex gap-4">gap-4 (1rem)</div>
|
||||
<div class="flex gap-x-2 gap-y-4">Different x/y gap</div>
|
||||
<div class="flex gap-0">No gap</div>
|
||||
```
|
||||
|
||||
### Flex grow, shrink, basis
|
||||
|
||||
```html
|
||||
<div class="flex">
|
||||
<div class="w-14 flex-none">Fixed</div>
|
||||
<div class="flex-1">Grows and shrinks</div>
|
||||
<div class="flex-initial">Shrink only</div>
|
||||
<div class="flex-auto">Grow/shrink with initial size</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
- `flex-1` = `flex: 1 1 0%` - equal distribution
|
||||
- `flex-initial` = `flex: 0 1 auto` - shrink, don't grow
|
||||
- `flex-auto` = `flex: 1 1 auto` - grow/shrink from content size
|
||||
- `flex-none` = `flex: none` - no grow or shrink
|
||||
|
||||
### Order
|
||||
|
||||
```html
|
||||
<div class="flex">
|
||||
<div class="order-2">Second</div>
|
||||
<div class="order-1">First</div>
|
||||
<div class="order-last">Last</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Use `flex` or `inline-flex` as container (see layout-display)
|
||||
- Direction: `flex-row`, `flex-col`, `flex-row-reverse`, `flex-col-reverse`
|
||||
- Justify: `justify-start`, `justify-center`, `justify-between`, `justify-evenly`
|
||||
- Align: `items-center`, `items-start`, `items-stretch`
|
||||
- Gap: `gap-{n}`, `gap-x-{n}`, `gap-y-{n}` (spacing scale)
|
||||
- Item sizing: `flex-1`, `flex-none`, `flex-auto`, `flex-initial`
|
||||
- Self alignment: `self-center`, `self-start`, etc.
|
||||
- Order: `order-{n}`, `order-first`, `order-last`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/flex-direction
|
||||
- https://tailwindcss.com/docs/justify-content
|
||||
- https://tailwindcss.com/docs/align-items
|
||||
- https://tailwindcss.com/docs/gap
|
||||
- https://tailwindcss.com/docs/flex
|
||||
- https://tailwindcss.com/docs/order
|
||||
-->
|
||||
87
.agents/skills/tailwindcss/references/layout-grid.md
Normal file
87
.agents/skills/tailwindcss/references/layout-grid.md
Normal file
@@ -0,0 +1,87 @@
|
||||
---
|
||||
name: layout-grid
|
||||
description: CSS Grid utilities including grid-cols, grid-rows, gap, place-items, and grid placement
|
||||
---
|
||||
|
||||
# Grid
|
||||
|
||||
Utilities for CSS Grid layouts: columns, rows, gap, and item placement.
|
||||
|
||||
## Usage
|
||||
|
||||
### Grid columns and rows
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-3 gap-4">3 equal columns</div>
|
||||
<div class="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">Responsive</div>
|
||||
<div class="grid grid-cols-none">No explicit tracks</div>
|
||||
|
||||
<div class="grid grid-rows-3 gap-2">3 rows</div>
|
||||
<div class="grid grid-rows-[auto_1fr_auto]">Custom rows</div>
|
||||
```
|
||||
|
||||
### Custom grid template
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-[200px_minmax(900px,1fr)_100px]">Custom template</div>
|
||||
<div class="grid grid-cols-(--my-cols)">CSS variable</div>
|
||||
```
|
||||
|
||||
### Subgrid
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div>01</div><div>02</div><div>03</div><div>04</div>
|
||||
<div>05</div>
|
||||
<div class="col-span-3 grid grid-cols-subgrid gap-4">
|
||||
<div class="col-start-2">06</div>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Gap
|
||||
|
||||
```html
|
||||
<div class="grid gap-4">Uniform gap</div>
|
||||
<div class="grid gap-x-2 gap-y-4">Different x/y</div>
|
||||
```
|
||||
|
||||
### Place items (align + justify)
|
||||
|
||||
```html
|
||||
<div class="grid place-items-center">Center both</div>
|
||||
<div class="grid place-items-start">Start both</div>
|
||||
<div class="grid items-center justify-center">Equivalent</div>
|
||||
```
|
||||
|
||||
### Grid placement (col/row span and start)
|
||||
|
||||
```html
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="col-span-2">Spans 2 columns</div>
|
||||
<div class="col-start-3">Starts at col 3</div>
|
||||
<div class="row-span-2">Spans 2 rows</div>
|
||||
<div class="col-span-full">Full width</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `grid` / `inline-grid` - Grid container (see layout-display)
|
||||
- Columns: `grid-cols-{n}`, `grid-cols-none`, `grid-cols-subgrid`, `grid-cols-[...]`
|
||||
- Rows: `grid-rows-{n}`, `grid-rows-[...]`
|
||||
- Gap: `gap-{n}`, `gap-x-{n}`, `gap-y-{n}`
|
||||
- Placement: `col-span-{n}`, `col-start-{n}`, `row-span-{n}`, `row-start-{n}`
|
||||
- `col-span-full` / `row-span-full` - span all
|
||||
- `place-items-*` - shorthand for align + justify
|
||||
- Use `grid-cols-[...]` for custom templates like `minmax()` or `repeat()`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/grid-template-columns
|
||||
- https://tailwindcss.com/docs/grid-template-rows
|
||||
- https://tailwindcss.com/docs/gap
|
||||
- https://tailwindcss.com/docs/place-items
|
||||
- https://tailwindcss.com/docs/grid-column
|
||||
- https://tailwindcss.com/docs/grid-row
|
||||
-->
|
||||
97
.agents/skills/tailwindcss/references/layout-height.md
Normal file
97
.agents/skills/tailwindcss/references/layout-height.md
Normal file
@@ -0,0 +1,97 @@
|
||||
---
|
||||
name: layout-height
|
||||
description: Setting element height with spacing scale, fractions, viewport units, and content-based sizing
|
||||
---
|
||||
|
||||
# Height
|
||||
|
||||
Utilities for setting the height of an element.
|
||||
|
||||
## Usage
|
||||
|
||||
### Spacing scale
|
||||
|
||||
Use `h-<number>` utilities based on the spacing scale:
|
||||
|
||||
```html
|
||||
<div class="h-24">h-24</div>
|
||||
<div class="h-48">h-48</div>
|
||||
<div class="h-64">h-64</div>
|
||||
```
|
||||
|
||||
### Percentage heights
|
||||
|
||||
Use `h-full` or `h-<fraction>` for percentage-based heights:
|
||||
|
||||
```html
|
||||
<div class="h-full">100%</div>
|
||||
<div class="h-1/2">50%</div>
|
||||
<div class="h-3/4">75%</div>
|
||||
<div class="h-9/10">90%</div>
|
||||
```
|
||||
|
||||
### Viewport units
|
||||
|
||||
Use `h-screen` for full viewport height, or dynamic viewport units:
|
||||
|
||||
```html
|
||||
<div class="h-screen">Full viewport height (100vh)</div>
|
||||
<div class="h-dvh">Dynamic viewport height</div>
|
||||
<div class="h-svh">Small viewport height</div>
|
||||
<div class="h-lvh">Large viewport height</div>
|
||||
```
|
||||
|
||||
### Content-based heights
|
||||
|
||||
Use `h-auto`, `h-fit`, `h-min`, `h-max` for content-based sizing:
|
||||
|
||||
```html
|
||||
<div class="h-auto">Auto height</div>
|
||||
<div class="h-fit">Fit content</div>
|
||||
<div class="h-min">Min content</div>
|
||||
<div class="h-max">Max content</div>
|
||||
```
|
||||
|
||||
### Line height
|
||||
|
||||
Use `h-lh` to match line height:
|
||||
|
||||
```html
|
||||
<div class="h-lh">Matches line height</div>
|
||||
```
|
||||
|
||||
### Size utility
|
||||
|
||||
Use `size-<number>` to set both width and height:
|
||||
|
||||
```html
|
||||
<div class="size-16">16x16</div>
|
||||
<div class="size-24">24x24</div>
|
||||
<div class="size-full">100% x 100%</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom heights:
|
||||
|
||||
```html
|
||||
<div class="h-[117px]">Custom pixel height</div>
|
||||
<div class="h-[50vh]">Custom viewport height</div>
|
||||
<div class="h-[calc(100vh-2rem)]">Custom calculation</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Spacing scale: `h-0` through `h-96` (and beyond)
|
||||
- Fractions: `h-1/2`, `h-1/3`, `h-2/3`, `h-1/4`, `h-3/4`, `h-9/10`
|
||||
- Viewport units: `h-screen` (100vh), `h-dvh`, `h-svh`, `h-lvh`
|
||||
- `h-dvh` adapts to browser UI (address bar, etc.)
|
||||
- `h-svh` uses smallest viewport height
|
||||
- `h-lvh` uses largest viewport height
|
||||
- `size-*` utilities set both width and height simultaneously
|
||||
- Use `h-auto` to reset height at specific breakpoints
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/height
|
||||
-->
|
||||
91
.agents/skills/tailwindcss/references/layout-inset.md
Normal file
91
.agents/skills/tailwindcss/references/layout-inset.md
Normal file
@@ -0,0 +1,91 @@
|
||||
---
|
||||
name: layout-inset
|
||||
description: Controlling placement of positioned elements with top, right, bottom, left, and inset utilities
|
||||
---
|
||||
|
||||
# Top / Right / Bottom / Left
|
||||
|
||||
Utilities for controlling the placement of positioned elements.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic positioning
|
||||
|
||||
Use `top-<number>`, `right-<number>`, `bottom-<number>`, `left-<number>` to position elements:
|
||||
|
||||
```html
|
||||
<!-- Pin to top left corner -->
|
||||
<div class="relative size-32">
|
||||
<div class="absolute top-0 left-0 size-16">01</div>
|
||||
</div>
|
||||
|
||||
<!-- Span top edge -->
|
||||
<div class="relative size-32">
|
||||
<div class="absolute inset-x-0 top-0 h-16">02</div>
|
||||
</div>
|
||||
|
||||
<!-- Fill entire parent -->
|
||||
<div class="relative size-32">
|
||||
<div class="absolute inset-0">05</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Inset utilities
|
||||
|
||||
Use `inset-<number>` for all sides, `inset-x-<number>` for horizontal, `inset-y-<number>` for vertical:
|
||||
|
||||
```html
|
||||
<div class="absolute inset-0">Fill parent</div>
|
||||
<div class="absolute inset-x-0 top-0">Span top</div>
|
||||
<div class="absolute inset-y-0 left-0">Span left</div>
|
||||
```
|
||||
|
||||
### Negative values
|
||||
|
||||
Prefix with a dash for negative values:
|
||||
|
||||
```html
|
||||
<div class="relative size-32">
|
||||
<div class="absolute -top-4 -left-4 size-14"></div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Logical properties
|
||||
|
||||
Use `start-<number>` and `end-<number>` for RTL-aware positioning:
|
||||
|
||||
```html
|
||||
<div dir="ltr">
|
||||
<div class="absolute start-0 top-0">Left in LTR</div>
|
||||
</div>
|
||||
<div dir="rtl">
|
||||
<div class="absolute start-0 top-0">Right in RTL</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Percentage and custom values
|
||||
|
||||
Use fractions for percentages or arbitrary values:
|
||||
|
||||
```html
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
Centered
|
||||
</div>
|
||||
<div class="absolute top-[117px] left-[20%]">
|
||||
Custom position
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `inset-0` sets all sides to 0 (equivalent to `top-0 right-0 bottom-0 left-0`)
|
||||
- `inset-x-0` sets left and right to 0
|
||||
- `inset-y-0` sets top and bottom to 0
|
||||
- Use `start`/`end` for logical properties that adapt to text direction
|
||||
- Negative values use dash prefix: `-top-4`, `-left-8`
|
||||
- Combine with `position` utilities (`absolute`, `fixed`, `relative`, `sticky`)
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/top-right-bottom-left
|
||||
-->
|
||||
126
.agents/skills/tailwindcss/references/layout-margin.md
Normal file
126
.agents/skills/tailwindcss/references/layout-margin.md
Normal file
@@ -0,0 +1,126 @@
|
||||
---
|
||||
name: layout-margin
|
||||
description: Controlling element margins with spacing scale, negative values, logical properties, and space utilities
|
||||
---
|
||||
|
||||
# Margin
|
||||
|
||||
Utilities for controlling an element's margin.
|
||||
|
||||
## Usage
|
||||
|
||||
### All sides
|
||||
|
||||
Use `m-<number>` to set margin on all sides:
|
||||
|
||||
```html
|
||||
<div class="m-4">Margin on all sides</div>
|
||||
<div class="m-8">Larger margin</div>
|
||||
```
|
||||
|
||||
### Individual sides
|
||||
|
||||
Use `mt-<number>`, `mr-<number>`, `mb-<number>`, `ml-<number>`:
|
||||
|
||||
```html
|
||||
<div class="mt-6">Top margin</div>
|
||||
<div class="mr-4">Right margin</div>
|
||||
<div class="mb-8">Bottom margin</div>
|
||||
<div class="ml-2">Left margin</div>
|
||||
```
|
||||
|
||||
### Horizontal and vertical
|
||||
|
||||
Use `mx-<number>` for horizontal, `my-<number>` for vertical:
|
||||
|
||||
```html
|
||||
<div class="mx-8">Horizontal margin</div>
|
||||
<div class="my-8">Vertical margin</div>
|
||||
```
|
||||
|
||||
### Negative margins
|
||||
|
||||
Prefix with dash for negative values:
|
||||
|
||||
```html
|
||||
<div class="-mt-8">Negative top margin</div>
|
||||
<div class="-mx-4">Negative horizontal margin</div>
|
||||
```
|
||||
|
||||
### Auto margins
|
||||
|
||||
Use `m-auto` or directional auto margins for centering:
|
||||
|
||||
```html
|
||||
<div class="mx-auto">Centered horizontally</div>
|
||||
<div class="ml-auto">Pushed to right</div>
|
||||
```
|
||||
|
||||
### Logical properties
|
||||
|
||||
Use `ms-<number>` (margin-inline-start) and `me-<number>` (margin-inline-end) for RTL support:
|
||||
|
||||
```html
|
||||
<div dir="ltr">
|
||||
<div class="ms-8">Left margin in LTR</div>
|
||||
<div class="me-8">Right margin in LTR</div>
|
||||
</div>
|
||||
<div dir="rtl">
|
||||
<div class="ms-8">Right margin in RTL</div>
|
||||
<div class="me-8">Left margin in RTL</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Space between children
|
||||
|
||||
Use `space-x-<number>` or `space-y-<number>` to add margin between children:
|
||||
|
||||
```html
|
||||
<div class="flex space-x-4">
|
||||
<div>01</div>
|
||||
<div>02</div>
|
||||
<div>03</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col space-y-8">
|
||||
<div>01</div>
|
||||
<div>02</div>
|
||||
<div>03</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Reversing space
|
||||
|
||||
Use `space-x-reverse` or `space-y-reverse` with reversed flex directions:
|
||||
|
||||
```html
|
||||
<div class="flex flex-row-reverse space-x-4 space-x-reverse">
|
||||
<div>01</div>
|
||||
<div>02</div>
|
||||
<div>03</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom margins:
|
||||
|
||||
```html
|
||||
<div class="m-[5px]">Custom margin</div>
|
||||
<div class="mx-[calc(50%-1rem)]">Custom calculation</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Spacing scale: `m-0` through `m-96` (and beyond)
|
||||
- Negative: prefix with dash (`-m-4`, `-mt-8`, `-mx-4`)
|
||||
- Auto: `m-auto`, `mx-auto`, `my-auto`, `mt-auto`, etc.
|
||||
- Logical: `ms-*` (start), `me-*` (end) adapt to text direction
|
||||
- Space utilities: `space-x-*`, `space-y-*` add margin to all children except last
|
||||
- Space reverse: `space-x-reverse`, `space-y-reverse` for reversed flex layouts
|
||||
- Limitations: Space utilities don't work well with grids or complex layouts - use `gap` utilities instead
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/margin
|
||||
-->
|
||||
@@ -0,0 +1,63 @@
|
||||
---
|
||||
name: layout-min-max-sizing
|
||||
description: Setting minimum and maximum width and height with min-w, max-w, min-h, max-h
|
||||
---
|
||||
|
||||
# Min & Max Sizing
|
||||
|
||||
Utilities for constraining element dimensions with minimum and maximum width/height.
|
||||
|
||||
## Usage
|
||||
|
||||
### Min width
|
||||
|
||||
```html
|
||||
<!-- Spacing scale -->
|
||||
<div class="min-w-24">min-w-24</div>
|
||||
<div class="min-w-64">min-w-64</div>
|
||||
|
||||
<!-- Percentage -->
|
||||
<div class="min-w-full">min-w-full</div>
|
||||
<div class="min-w-3/4">min-w-3/4</div>
|
||||
|
||||
<!-- Container scale -->
|
||||
<div class="min-w-sm">min-w-sm</div>
|
||||
<div class="min-w-xl">min-w-xl</div>
|
||||
|
||||
<!-- Content-based -->
|
||||
<div class="min-w-min">min-content</div>
|
||||
<div class="min-w-max">max-content</div>
|
||||
<div class="min-w-fit">fit-content</div>
|
||||
<div class="min-w-auto">auto</div>
|
||||
|
||||
<!-- Custom -->
|
||||
<div class="min-w-[220px]">Custom</div>
|
||||
```
|
||||
|
||||
### Max width
|
||||
|
||||
Use `max-w-<value>` with similar scales: spacing numbers, fractions (`max-w-1/2`), container sizes (`max-w-md`), `max-w-full`, `max-w-screen`, `max-w-min`, `max-w-max`, `max-w-fit`, `max-w-none`.
|
||||
|
||||
### Min / Max height
|
||||
|
||||
```html
|
||||
<div class="min-h-screen">At least full viewport height</div>
|
||||
<div class="min-h-0">Allow shrinking in flex</div>
|
||||
<div class="max-h-96 overflow-y-auto">Scrollable with max height</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- min-w: spacing scale, fractions, container scale (3xs–7xl), `full`, `screen`, `min`, `max`, `fit`, `auto`
|
||||
- max-w: same options plus `none`
|
||||
- min-h / max-h: similar scales; `min-h-0` important for flex children to shrink
|
||||
- Viewport units: `min-w-screen`, `min-w-dvw`, `min-w-svw`, `min-w-lvw`
|
||||
- Container scale: `min-w-3xs` through `min-w-7xl` map to `--container-*` variables
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/min-width
|
||||
- https://tailwindcss.com/docs/max-width
|
||||
- https://tailwindcss.com/docs/min-height
|
||||
- https://tailwindcss.com/docs/max-height
|
||||
-->
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
name: layout-object-fit-position
|
||||
description: Controlling how replaced elements (images, video) are resized and positioned within their container
|
||||
---
|
||||
|
||||
# Object Fit & Object Position
|
||||
|
||||
Utilities for controlling how replaced elements like `<img>` and `<video>` are resized and positioned within their container.
|
||||
|
||||
## Usage
|
||||
|
||||
### Object fit
|
||||
|
||||
```html
|
||||
<!-- Cover container, may crop -->
|
||||
<img class="h-48 w-96 object-cover" src="photo.jpg" />
|
||||
|
||||
<!-- Contain within, may letterbox -->
|
||||
<img class="h-48 w-96 object-contain" src="photo.jpg" />
|
||||
|
||||
<!-- Stretch to fill -->
|
||||
<img class="h-48 w-96 object-fill" src="photo.jpg" />
|
||||
|
||||
<!-- Scale down only if needed, else original size -->
|
||||
<img class="h-48 w-96 object-scale-down" src="photo.jpg" />
|
||||
|
||||
<!-- Original size, ignore container -->
|
||||
<img class="h-48 w-96 object-none" src="photo.jpg" />
|
||||
```
|
||||
|
||||
### Object position
|
||||
|
||||
```html
|
||||
<!-- Named positions -->
|
||||
<img class="size-24 object-cover object-top-left" src="photo.jpg" />
|
||||
<img class="size-24 object-cover object-center" src="photo.jpg" />
|
||||
<img class="size-24 object-cover object-bottom-right" src="photo.jpg" />
|
||||
|
||||
<!-- Custom value -->
|
||||
<img class="object-cover object-[25%_75%]" src="photo.jpg" />
|
||||
<img class="object-(--my-object)" src="photo.jpg" />
|
||||
```
|
||||
|
||||
### Responsive
|
||||
|
||||
```html
|
||||
<img class="object-contain md:object-cover object-center md:object-top" src="photo.jpg" />
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `object-contain` - maintain aspect ratio, fit inside container
|
||||
- `object-cover` - maintain aspect ratio, cover container (may crop)
|
||||
- `object-fill` - stretch to fill container
|
||||
- `object-scale-down` - like `contain` but never upscale
|
||||
- `object-none` - original size, ignore container
|
||||
- Position: `object-top-left`, `object-top`, `object-top-right`, `object-left`, `object-center`, `object-right`, `object-bottom-left`, `object-bottom`, `object-bottom-right`
|
||||
- Custom: `object-[25%_75%]`, `object-(--custom-property)`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/object-fit
|
||||
- https://tailwindcss.com/docs/object-position
|
||||
-->
|
||||
57
.agents/skills/tailwindcss/references/layout-overflow.md
Normal file
57
.agents/skills/tailwindcss/references/layout-overflow.md
Normal file
@@ -0,0 +1,57 @@
|
||||
---
|
||||
name: layout-overflow
|
||||
description: Controlling how elements handle content that overflows their container
|
||||
---
|
||||
|
||||
# Overflow
|
||||
|
||||
Utilities for controlling how an element handles content that is too large for the container.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic overflow
|
||||
|
||||
Use `overflow-auto`, `overflow-hidden`, `overflow-visible`, `overflow-scroll`:
|
||||
|
||||
```html
|
||||
<div class="overflow-auto">Scrolls if needed</div>
|
||||
<div class="overflow-hidden">Clips overflow</div>
|
||||
<div class="overflow-visible">Shows overflow</div>
|
||||
<div class="overflow-scroll">Always shows scrollbars</div>
|
||||
```
|
||||
|
||||
### Axis-specific overflow
|
||||
|
||||
Use `overflow-x-*` or `overflow-y-*` for horizontal/vertical control:
|
||||
|
||||
```html
|
||||
<div class="overflow-x-auto overflow-y-hidden">
|
||||
Horizontal scroll, vertical clip
|
||||
</div>
|
||||
<div class="overflow-x-scroll overflow-y-auto">
|
||||
Horizontal always scrolls, vertical scrolls if needed
|
||||
</div>
|
||||
```
|
||||
|
||||
### Overflow clip
|
||||
|
||||
Use `overflow-clip` for clip behavior (similar to hidden but different scroll behavior):
|
||||
|
||||
```html
|
||||
<div class="overflow-clip">Clips without creating scroll container</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `overflow-auto` - shows scrollbars only when needed
|
||||
- `overflow-hidden` - clips content that overflows
|
||||
- `overflow-visible` - allows content to overflow (default for most elements)
|
||||
- `overflow-scroll` - always shows scrollbars
|
||||
- `overflow-clip` - clips without creating scroll container
|
||||
- Use `overflow-x-*` and `overflow-y-*` for axis-specific control
|
||||
- Common pattern: `overflow-hidden` for images, `overflow-auto` for scrollable content
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/overflow
|
||||
-->
|
||||
77
.agents/skills/tailwindcss/references/layout-padding.md
Normal file
77
.agents/skills/tailwindcss/references/layout-padding.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
name: layout-padding
|
||||
description: Controlling element padding with spacing scale, logical properties, and directional utilities
|
||||
---
|
||||
|
||||
# Padding
|
||||
|
||||
Utilities for controlling an element's padding.
|
||||
|
||||
## Usage
|
||||
|
||||
### All sides
|
||||
|
||||
Use `p-<number>` to set padding on all sides:
|
||||
|
||||
```html
|
||||
<div class="p-4">Padding on all sides</div>
|
||||
<div class="p-8">Larger padding</div>
|
||||
```
|
||||
|
||||
### Individual sides
|
||||
|
||||
Use `pt-<number>`, `pr-<number>`, `pb-<number>`, `pl-<number>`:
|
||||
|
||||
```html
|
||||
<div class="pt-6">Top padding</div>
|
||||
<div class="pr-4">Right padding</div>
|
||||
<div class="pb-8">Bottom padding</div>
|
||||
<div class="pl-2">Left padding</div>
|
||||
```
|
||||
|
||||
### Horizontal and vertical
|
||||
|
||||
Use `px-<number>` for horizontal, `py-<number>` for vertical:
|
||||
|
||||
```html
|
||||
<div class="px-8">Horizontal padding</div>
|
||||
<div class="py-8">Vertical padding</div>
|
||||
```
|
||||
|
||||
### Logical properties
|
||||
|
||||
Use `ps-<number>` (padding-inline-start) and `pe-<number>` (padding-inline-end) for RTL support:
|
||||
|
||||
```html
|
||||
<div dir="ltr">
|
||||
<div class="ps-8">Left padding in LTR</div>
|
||||
<div class="pe-8">Right padding in LTR</div>
|
||||
</div>
|
||||
<div dir="rtl">
|
||||
<div class="ps-8">Right padding in RTL</div>
|
||||
<div class="pe-8">Left padding in RTL</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom padding:
|
||||
|
||||
```html
|
||||
<div class="p-[5px]">Custom padding</div>
|
||||
<div class="px-[calc(50%-1rem)]">Custom calculation</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Spacing scale: `p-0` through `p-96` (and beyond)
|
||||
- Individual: `pt-*`, `pr-*`, `pb-*`, `pl-*` for specific sides
|
||||
- Axes: `px-*` (horizontal), `py-*` (vertical)
|
||||
- Logical: `ps-*` (start), `pe-*` (end) adapt to text direction
|
||||
- No negative padding - padding cannot be negative in CSS
|
||||
- Common patterns: `p-4`, `px-6`, `py-8`, `pt-2`, `pb-4`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/padding
|
||||
-->
|
||||
85
.agents/skills/tailwindcss/references/layout-position.md
Normal file
85
.agents/skills/tailwindcss/references/layout-position.md
Normal file
@@ -0,0 +1,85 @@
|
||||
---
|
||||
name: layout-position
|
||||
description: Controlling element positioning with static, relative, absolute, fixed, and sticky utilities
|
||||
---
|
||||
|
||||
# Position
|
||||
|
||||
Utilities for controlling how an element is positioned in the document.
|
||||
|
||||
## Usage
|
||||
|
||||
### Static positioning
|
||||
|
||||
Use `static` to position an element according to the normal flow. Offsets are ignored and it won't act as a position reference for absolutely positioned children:
|
||||
|
||||
```html
|
||||
<div class="static">
|
||||
<p>Static parent</p>
|
||||
<div class="absolute bottom-0 left-0">
|
||||
<p>Absolute child</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Relative positioning
|
||||
|
||||
Use `relative` to position an element in normal flow. Offsets are calculated relative to the element's normal position, and it acts as a position reference for absolutely positioned children:
|
||||
|
||||
```html
|
||||
<div class="relative">
|
||||
<p>Relative parent</p>
|
||||
<div class="absolute bottom-0 left-0">
|
||||
<p>Absolute child</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Absolute positioning
|
||||
|
||||
Use `absolute` to position an element outside the normal flow. Neighboring elements act as if it doesn't exist. Offsets are calculated relative to the nearest positioned parent:
|
||||
|
||||
```html
|
||||
<div class="relative">
|
||||
<div class="absolute top-0 right-0">
|
||||
<p>Absolute child</p>
|
||||
</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Fixed positioning
|
||||
|
||||
Use `fixed` to position an element relative to the browser window. Offsets are calculated relative to the viewport:
|
||||
|
||||
```html
|
||||
<div class="fixed top-0 right-0 left-0">
|
||||
<p>Fixed header</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sticky positioning
|
||||
|
||||
Use `sticky` to position an element as `relative` until it crosses a threshold, then treat it as `fixed` until its parent is off screen:
|
||||
|
||||
```html
|
||||
<div>
|
||||
<div class="sticky top-0">
|
||||
<p>Sticky header</p>
|
||||
</div>
|
||||
<div>Content...</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `static` is the default - elements flow normally
|
||||
- `relative` maintains normal flow but allows offsets and becomes a positioning context
|
||||
- `absolute` removes from flow and positions relative to nearest positioned ancestor
|
||||
- `fixed` positions relative to viewport, stays in place when scrolling
|
||||
- `sticky` combines relative and fixed behavior based on scroll position
|
||||
- Always use with offset utilities like `top-0`, `right-0`, `inset-0`, etc.
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/position
|
||||
-->
|
||||
67
.agents/skills/tailwindcss/references/layout-tables.md
Normal file
67
.agents/skills/tailwindcss/references/layout-tables.md
Normal file
@@ -0,0 +1,67 @@
|
||||
---
|
||||
name: layout-tables
|
||||
description: Table layout and border behavior with border-collapse, table-layout
|
||||
---
|
||||
|
||||
# Table Layout
|
||||
|
||||
Utilities for controlling table display, border behavior, and layout algorithm.
|
||||
|
||||
## Usage
|
||||
|
||||
### Border collapse
|
||||
|
||||
```html
|
||||
<!-- Collapsed: adjacent borders merge into single border -->
|
||||
<table class="border-collapse border border-gray-400">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="border border-gray-300 p-2">State</th>
|
||||
<th class="border border-gray-300 p-2">City</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td class="border border-gray-300 p-2">Indiana</td>
|
||||
<td class="border border-gray-300 p-2">Indianapolis</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<!-- Separate: each cell has its own borders -->
|
||||
<table class="border-separate border border-gray-400">...</table>
|
||||
```
|
||||
|
||||
### Table layout
|
||||
|
||||
```html
|
||||
<!-- Auto: columns sized to content -->
|
||||
<table class="table-auto">...</table>
|
||||
|
||||
<!-- Fixed: columns use first row widths -->
|
||||
<table class="table-fixed">...</table>
|
||||
```
|
||||
|
||||
### Table display (from layout-display)
|
||||
|
||||
Combine with `table`, `table-row`, `table-cell`, `table-header-group`, etc. for semantic table structure.
|
||||
|
||||
### Responsive
|
||||
|
||||
```html
|
||||
<table class="border-collapse md:border-separate">...</table>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `border-collapse` - adjacent borders merge (single border between cells)
|
||||
- `border-separate` - each cell displays its own borders
|
||||
- `table-auto` - column widths from content
|
||||
- `table-fixed` - fixed layout; first row sets column widths
|
||||
- In v4, `border-*` and `divide-*` default to `currentColor`; specify a color (e.g. `border-gray-200`) explicitly
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/border-collapse
|
||||
- https://tailwindcss.com/docs/table-layout
|
||||
-->
|
||||
102
.agents/skills/tailwindcss/references/layout-width.md
Normal file
102
.agents/skills/tailwindcss/references/layout-width.md
Normal file
@@ -0,0 +1,102 @@
|
||||
---
|
||||
name: layout-width
|
||||
description: Setting element width with spacing scale, fractions, container sizes, and viewport units
|
||||
---
|
||||
|
||||
# Width
|
||||
|
||||
Utilities for setting the width of an element.
|
||||
|
||||
## Usage
|
||||
|
||||
### Spacing scale
|
||||
|
||||
Use `w-<number>` utilities based on the spacing scale:
|
||||
|
||||
```html
|
||||
<div class="w-24">w-24</div>
|
||||
<div class="w-48">w-48</div>
|
||||
<div class="w-64">w-64</div>
|
||||
```
|
||||
|
||||
### Percentage widths
|
||||
|
||||
Use `w-full` or `w-<fraction>` for percentage-based widths:
|
||||
|
||||
```html
|
||||
<div class="flex">
|
||||
<div class="w-1/2">50%</div>
|
||||
<div class="w-1/2">50%</div>
|
||||
</div>
|
||||
<div class="flex">
|
||||
<div class="w-2/5">40%</div>
|
||||
<div class="w-3/5">60%</div>
|
||||
</div>
|
||||
<div class="w-full">100%</div>
|
||||
```
|
||||
|
||||
### Container scale
|
||||
|
||||
Use container size utilities like `w-sm`, `w-md`, `w-lg`:
|
||||
|
||||
```html
|
||||
<div class="w-sm">Small container</div>
|
||||
<div class="w-md">Medium container</div>
|
||||
<div class="w-xl">Extra large container</div>
|
||||
```
|
||||
|
||||
### Viewport units
|
||||
|
||||
Use `w-screen` for full viewport width, or dynamic viewport units:
|
||||
|
||||
```html
|
||||
<div class="w-screen">Full viewport width</div>
|
||||
<div class="w-dvw">Dynamic viewport width</div>
|
||||
<div class="w-svw">Small viewport width</div>
|
||||
<div class="w-lvw">Large viewport width</div>
|
||||
```
|
||||
|
||||
### Content-based widths
|
||||
|
||||
Use `w-auto`, `w-fit`, `w-min`, `w-max` for content-based sizing:
|
||||
|
||||
```html
|
||||
<div class="w-auto">Auto width</div>
|
||||
<div class="w-fit">Fit content</div>
|
||||
<div class="w-min">Min content</div>
|
||||
<div class="w-max">Max content</div>
|
||||
```
|
||||
|
||||
### Size utility
|
||||
|
||||
Use `size-<number>` to set both width and height:
|
||||
|
||||
```html
|
||||
<div class="size-16">16x16</div>
|
||||
<div class="size-24">24x24</div>
|
||||
<div class="size-full">100% x 100%</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom widths:
|
||||
|
||||
```html
|
||||
<div class="w-[117px]">Custom pixel width</div>
|
||||
<div class="w-[50%]">Custom percentage</div>
|
||||
<div class="w-[calc(100%-2rem)]">Custom calculation</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Spacing scale: `w-0` through `w-96` (and beyond)
|
||||
- Fractions: `w-1/2`, `w-1/3`, `w-2/3`, `w-1/4`, `w-3/4`, `w-1/5`, `w-4/5`, `w-1/6`, `w-5/6`
|
||||
- Container sizes: `w-3xs`, `w-2xs`, `w-xs`, `w-sm`, `w-md`, `w-lg`, `w-xl`, `w-2xl`, `w-3xl`, `w-4xl`, `w-5xl`, `w-6xl`, `w-7xl`
|
||||
- Viewport units: `w-screen` (100vw), `w-dvw`, `w-svw`, `w-lvw`
|
||||
- `size-*` utilities set both width and height simultaneously
|
||||
- Use `w-auto` to reset width at specific breakpoints
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/width
|
||||
-->
|
||||
68
.agents/skills/tailwindcss/references/transform-base.md
Normal file
68
.agents/skills/tailwindcss/references/transform-base.md
Normal file
@@ -0,0 +1,68 @@
|
||||
---
|
||||
name: transform-base
|
||||
description: Base transform utilities for enabling transforms, hardware acceleration, and custom transform values
|
||||
---
|
||||
|
||||
# Transform
|
||||
|
||||
Base utilities for transforming elements.
|
||||
|
||||
## Usage
|
||||
|
||||
### Hardware acceleration
|
||||
|
||||
Use `transform-gpu` to force GPU acceleration for better performance:
|
||||
|
||||
```html
|
||||
<div class="scale-150 transform-gpu">
|
||||
GPU-accelerated transform
|
||||
</div>
|
||||
```
|
||||
|
||||
### CPU rendering
|
||||
|
||||
Use `transform-cpu` to force CPU rendering if needed:
|
||||
|
||||
```html
|
||||
<div class="scale-150 transform-cpu">
|
||||
CPU-rendered transform
|
||||
</div>
|
||||
```
|
||||
|
||||
### Removing transforms
|
||||
|
||||
Use `transform-none` to remove all transforms:
|
||||
|
||||
```html
|
||||
<div class="skew-y-3 md:transform-none">
|
||||
Skewed on mobile, normal on desktop
|
||||
</div>
|
||||
```
|
||||
|
||||
### Custom transforms
|
||||
|
||||
Use arbitrary values for custom transform functions:
|
||||
|
||||
```html
|
||||
<div class="transform-[matrix(1,2,3,4,5,6)]">
|
||||
Custom matrix transform
|
||||
</div>
|
||||
<div class="transform-[perspective(1000px)_rotateX(45deg)]">
|
||||
Custom 3D transform
|
||||
</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `transform-gpu` enables hardware acceleration with `translateZ(0)`
|
||||
- `transform-cpu` forces CPU rendering (removes GPU acceleration)
|
||||
- `transform-none` removes all transforms at once
|
||||
- Use `transform-gpu` for better animation performance
|
||||
- Custom transforms use arbitrary values: `transform-[...]`
|
||||
- Transform utilities (translate, rotate, scale, skew) automatically enable transform
|
||||
- Hardware acceleration is usually beneficial for animations
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/transform
|
||||
-->
|
||||
70
.agents/skills/tailwindcss/references/transform-rotate.md
Normal file
70
.agents/skills/tailwindcss/references/transform-rotate.md
Normal file
@@ -0,0 +1,70 @@
|
||||
---
|
||||
name: transform-rotate
|
||||
description: Rotating elements in 2D and 3D space with degree values and custom rotations
|
||||
---
|
||||
|
||||
# Rotate
|
||||
|
||||
Utilities for rotating elements.
|
||||
|
||||
## Usage
|
||||
|
||||
### 2D rotation
|
||||
|
||||
Use `rotate-<number>` to rotate by degrees:
|
||||
|
||||
```html
|
||||
<div class="rotate-45">45 degrees</div>
|
||||
<div class="rotate-90">90 degrees</div>
|
||||
<div class="-rotate-45">-45 degrees (counterclockwise)</div>
|
||||
```
|
||||
|
||||
### 3D rotation
|
||||
|
||||
Use `rotate-x-<number>`, `rotate-y-<number>`, `rotate-z-<number>` for 3D rotation:
|
||||
|
||||
```html
|
||||
<div class="rotate-x-50 rotate-z-45">3D rotation</div>
|
||||
<div class="rotate-y-25 rotate-z-30">Combined 3D rotation</div>
|
||||
```
|
||||
|
||||
### Common rotations
|
||||
|
||||
```html
|
||||
<div class="rotate-90">Quarter turn</div>
|
||||
<div class="rotate-180">Half turn</div>
|
||||
<div class="rotate-270">Three-quarter turn</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom rotations:
|
||||
|
||||
```html
|
||||
<div class="rotate-[3.142rad]">Custom radian rotation</div>
|
||||
<div class="rotate-[45deg]">Explicit degree rotation</div>
|
||||
```
|
||||
|
||||
### Removing rotation
|
||||
|
||||
Use `rotate-none` to remove rotation:
|
||||
|
||||
```html
|
||||
<div class="rotate-45 md:rotate-none">Rotated on mobile only</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `rotate-*` rotates in 2D plane (around z-axis)
|
||||
- `rotate-x-*` rotates around x-axis (3D)
|
||||
- `rotate-y-*` rotates around y-axis (3D)
|
||||
- `rotate-z-*` rotates around z-axis (3D, same as `rotate-*`)
|
||||
- Negative values rotate counterclockwise: `-rotate-45`
|
||||
- Common values: `45`, `90`, `180`, `270` degrees
|
||||
- Can combine multiple axes: `rotate-x-50 rotate-y-30 rotate-z-45`
|
||||
- Use `rotate-none` to remove all rotations
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/rotate
|
||||
-->
|
||||
83
.agents/skills/tailwindcss/references/transform-scale.md
Normal file
83
.agents/skills/tailwindcss/references/transform-scale.md
Normal file
@@ -0,0 +1,83 @@
|
||||
---
|
||||
name: transform-scale
|
||||
description: Scaling elements uniformly or on specific axes with percentage values
|
||||
---
|
||||
|
||||
# Scale
|
||||
|
||||
Utilities for scaling elements.
|
||||
|
||||
## Usage
|
||||
|
||||
### Uniform scaling
|
||||
|
||||
Use `scale-<number>` to scale on both axes (number represents percentage):
|
||||
|
||||
```html
|
||||
<div class="scale-75">75% size</div>
|
||||
<div class="scale-100">100% size (default)</div>
|
||||
<div class="scale-125">125% size</div>
|
||||
<div class="scale-150">150% size</div>
|
||||
```
|
||||
|
||||
### Axis-specific scaling
|
||||
|
||||
Use `scale-x-<number>` or `scale-y-<number>` to scale on one axis:
|
||||
|
||||
```html
|
||||
<div class="scale-x-75">75% width</div>
|
||||
<div class="scale-y-125">125% height</div>
|
||||
```
|
||||
|
||||
### Negative scaling
|
||||
|
||||
Use negative values to mirror and scale:
|
||||
|
||||
```html
|
||||
<div class="-scale-x-100">Mirrored horizontally</div>
|
||||
<div class="-scale-y-100">Mirrored vertically</div>
|
||||
<div class="-scale-100">Mirrored both axes</div>
|
||||
```
|
||||
|
||||
### Hover effects
|
||||
|
||||
Common pattern for interactive scaling:
|
||||
|
||||
```html
|
||||
<div class="scale-95 hover:scale-100 transition-transform">
|
||||
Grows on hover
|
||||
</div>
|
||||
```
|
||||
|
||||
### Removing scale
|
||||
|
||||
Use `scale-none` to remove scaling:
|
||||
|
||||
```html
|
||||
<div class="scale-125 md:scale-none">Scaled on mobile only</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom scaling:
|
||||
|
||||
```html
|
||||
<div class="scale-[1.7]">Custom scale value</div>
|
||||
<div class="scale-x-[0.8]">Custom x-axis scale</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `scale-*` scales uniformly on both axes
|
||||
- `scale-x-*` scales horizontally only
|
||||
- `scale-y-*` scales vertically only
|
||||
- Values represent percentages: `scale-75` = 75%, `scale-125` = 125%
|
||||
- `scale-100` is the default (no scaling)
|
||||
- Negative values mirror the element: `-scale-x-100` flips horizontally
|
||||
- Common for hover effects: `hover:scale-110`, `active:scale-95`
|
||||
- Use `scale-none` to remove all scaling
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/scale
|
||||
-->
|
||||
62
.agents/skills/tailwindcss/references/transform-skew.md
Normal file
62
.agents/skills/tailwindcss/references/transform-skew.md
Normal file
@@ -0,0 +1,62 @@
|
||||
---
|
||||
name: transform-skew
|
||||
description: Skewing elements on x and y axes with degree values
|
||||
---
|
||||
|
||||
# Skew
|
||||
|
||||
Utilities for skewing (distorting) elements.
|
||||
|
||||
## Usage
|
||||
|
||||
### Skewing both axes
|
||||
|
||||
Use `skew-<number>` to skew on both axes:
|
||||
|
||||
```html
|
||||
<div class="skew-3">Slight skew</div>
|
||||
<div class="skew-6">Moderate skew</div>
|
||||
<div class="skew-12">Strong skew</div>
|
||||
```
|
||||
|
||||
### Axis-specific skewing
|
||||
|
||||
Use `skew-x-<number>` or `skew-y-<number>` to skew on one axis:
|
||||
|
||||
```html
|
||||
<div class="skew-x-12">Skewed horizontally</div>
|
||||
<div class="skew-y-6">Skewed vertically</div>
|
||||
```
|
||||
|
||||
### Negative skewing
|
||||
|
||||
Use negative values for opposite direction:
|
||||
|
||||
```html
|
||||
<div class="-skew-3">Negative skew</div>
|
||||
<div class="-skew-x-12">Negative x-axis skew</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom skew:
|
||||
|
||||
```html
|
||||
<div class="skew-[3.142rad]">Custom radian skew</div>
|
||||
<div class="skew-x-[15deg]">Custom degree skew</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `skew-*` skews on both x and y axes
|
||||
- `skew-x-*` skews horizontally only
|
||||
- `skew-y-*` skews vertically only
|
||||
- Values are in degrees: `skew-3` = 3 degrees
|
||||
- Negative values skew in opposite direction
|
||||
- Common values: `3`, `6`, `12` degrees for subtle effects
|
||||
- Use sparingly - excessive skewing can make text hard to read
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/skew
|
||||
-->
|
||||
77
.agents/skills/tailwindcss/references/transform-translate.md
Normal file
77
.agents/skills/tailwindcss/references/transform-translate.md
Normal file
@@ -0,0 +1,77 @@
|
||||
---
|
||||
name: transform-translate
|
||||
description: Translating elements on x, y, and z axes with spacing scale, percentages, and custom values
|
||||
---
|
||||
|
||||
# Translate
|
||||
|
||||
Utilities for translating (moving) elements.
|
||||
|
||||
## Usage
|
||||
|
||||
### Spacing scale
|
||||
|
||||
Use `translate-<number>` to translate on both axes, or `translate-x-<number>` / `translate-y-<number>` for single axis:
|
||||
|
||||
```html
|
||||
<div class="translate-2">Moved 2 units</div>
|
||||
<div class="-translate-4">Moved -4 units</div>
|
||||
<div class="translate-x-4">Moved right 4 units</div>
|
||||
<div class="translate-y-6">Moved down 6 units</div>
|
||||
```
|
||||
|
||||
### Percentage translation
|
||||
|
||||
Use `translate-<fraction>` to translate by percentage of element size:
|
||||
|
||||
```html
|
||||
<div class="translate-1/2">Moved 50% on both axes</div>
|
||||
<div class="translate-x-1/4">Moved 25% right</div>
|
||||
<div class="-translate-y-full">Moved 100% up</div>
|
||||
```
|
||||
|
||||
### Centering elements
|
||||
|
||||
Common pattern for centering absolutely positioned elements:
|
||||
|
||||
```html
|
||||
<div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
|
||||
Centered
|
||||
</div>
|
||||
```
|
||||
|
||||
### Z-axis translation
|
||||
|
||||
Use `translate-z-<number>` for 3D translation (requires `transform-3d` on parent):
|
||||
|
||||
```html
|
||||
<div class="transform-3d">
|
||||
<div class="translate-z-4">Forward in 3D space</div>
|
||||
<div class="-translate-z-8">Backward in 3D space</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Custom values
|
||||
|
||||
Use arbitrary values for custom translations:
|
||||
|
||||
```html
|
||||
<div class="translate-[3.142rad]">Custom translation</div>
|
||||
<div class="translate-x-[117px]">Custom pixel value</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `translate-*` moves on both x and y axes
|
||||
- `translate-x-*` moves horizontally (right = positive)
|
||||
- `translate-y-*` moves vertically (down = positive)
|
||||
- `translate-z-*` moves in 3D space (forward = positive)
|
||||
- Negative values use dash prefix: `-translate-4`, `-translate-x-8`
|
||||
- Percentages are relative to element's own size
|
||||
- Common centering: `top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2`
|
||||
- Z-axis requires `transform-3d` utility on parent element
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/translate
|
||||
-->
|
||||
118
.agents/skills/tailwindcss/references/typography-font-text.md
Normal file
118
.agents/skills/tailwindcss/references/typography-font-text.md
Normal file
@@ -0,0 +1,118 @@
|
||||
---
|
||||
name: typography-font-text
|
||||
description: Font size, weight, style, text color, line height, letter spacing, and text decoration
|
||||
---
|
||||
|
||||
# Typography: Font & Text
|
||||
|
||||
Utilities for font styling, text color, line height, letter spacing, and decoration.
|
||||
|
||||
## Usage
|
||||
|
||||
### Font size
|
||||
|
||||
```html
|
||||
<p class="text-xs">Extra small</p>
|
||||
<p class="text-sm">Small</p>
|
||||
<p class="text-base">Base (default)</p>
|
||||
<p class="text-lg">Large</p>
|
||||
<p class="text-xl">Extra large</p>
|
||||
<p class="text-2xl">2xl</p>
|
||||
<p class="text-[17px]">Arbitrary</p>
|
||||
```
|
||||
|
||||
### Font weight
|
||||
|
||||
```html
|
||||
<p class="font-thin">100</p>
|
||||
<p class="font-light">300</p>
|
||||
<p class="font-normal">400</p>
|
||||
<p class="font-medium">500</p>
|
||||
<p class="font-semibold">600</p>
|
||||
<p class="font-bold">700</p>
|
||||
<p class="font-extrabold">800</p>
|
||||
```
|
||||
|
||||
### Font style and family
|
||||
|
||||
```html
|
||||
<p class="italic">Italic</p>
|
||||
<p class="not-italic">Not italic</p>
|
||||
<p class="font-sans">Sans (default)</p>
|
||||
<p class="font-serif">Serif</p>
|
||||
<p class="font-mono">Monospace</p>
|
||||
```
|
||||
|
||||
### Text color
|
||||
|
||||
```html
|
||||
<p class="text-gray-900">Dark text</p>
|
||||
<p class="text-blue-500">Blue</p>
|
||||
<p class="text-red-500/50">50% opacity</p>
|
||||
<p class="text-[#1da1f2]">Arbitrary color</p>
|
||||
<p class="text-(--my-color)">CSS variable</p>
|
||||
```
|
||||
|
||||
### Line height
|
||||
|
||||
```html
|
||||
<p class="leading-none">1</p>
|
||||
<p class="leading-tight">1.25</p>
|
||||
<p class="leading-normal">1.5</p>
|
||||
<p class="leading-relaxed">1.625</p>
|
||||
<p class="leading-loose">2</p>
|
||||
<p class="leading-[3rem]">Arbitrary</p>
|
||||
```
|
||||
|
||||
### Letter spacing
|
||||
|
||||
```html
|
||||
<p class="tracking-tighter">-0.05em</p>
|
||||
<p class="tracking-tight">-0.025em</p>
|
||||
<p class="tracking-normal">0</p>
|
||||
<p class="tracking-wide">0.025em</p>
|
||||
<p class="tracking-widest">0.1em</p>
|
||||
```
|
||||
|
||||
### Text decoration
|
||||
|
||||
```html
|
||||
<p class="underline">Underline</p>
|
||||
<p class="line-through">Strikethrough</p>
|
||||
<p class="no-underline">Remove</p>
|
||||
<p class="overline">Overline</p>
|
||||
<p class="underline decoration-2 underline-offset-4">Custom</p>
|
||||
```
|
||||
|
||||
### Text transform and overflow
|
||||
|
||||
```html
|
||||
<p class="uppercase">UPPERCASE</p>
|
||||
<p class="lowercase">lowercase</p>
|
||||
<p class="capitalize">Capitalize Each</p>
|
||||
<p class="normal-case">Normal</p>
|
||||
|
||||
<p class="truncate">Single line ellipsis</p>
|
||||
<p class="text-ellipsis overflow-hidden">Ellipsis</p>
|
||||
<p class="line-clamp-3">Clamp to 3 lines</p>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Font size: `text-xs` through `text-9xl`, theme scale
|
||||
- Weight: `font-thin` to `font-black`
|
||||
- Color: `text-{color}-{shade}`, opacity modifier `/50`, arbitrary `text-[#hex]`
|
||||
- Line height: `leading-none`, `leading-tight`, `leading-normal`, `leading-loose`
|
||||
- Letter spacing: `tracking-tighter` to `tracking-widest`
|
||||
- Decoration: `underline`, `line-through`, `no-underline`, `decoration-*`, `underline-offset-*`
|
||||
- Overflow: `truncate` (ellipsis), `line-clamp-{n}`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/font-size
|
||||
- https://tailwindcss.com/docs/font-weight
|
||||
- https://tailwindcss.com/docs/text-color
|
||||
- https://tailwindcss.com/docs/line-height
|
||||
- https://tailwindcss.com/docs/letter-spacing
|
||||
- https://tailwindcss.com/docs/text-decoration
|
||||
-->
|
||||
@@ -0,0 +1,65 @@
|
||||
---
|
||||
name: typography-list-style
|
||||
description: Controlling list marker style and position with list-style-type and list-style-position
|
||||
---
|
||||
|
||||
# List Style
|
||||
|
||||
Utilities for controlling the marker style and position of list items.
|
||||
|
||||
## Usage
|
||||
|
||||
### List style type
|
||||
|
||||
```html
|
||||
<ul class="list-disc">
|
||||
<li>Disc bullets (default for ul)</li>
|
||||
</ul>
|
||||
|
||||
<ol class="list-decimal">
|
||||
<li>Decimal numbers (default for ol)</li>
|
||||
</ol>
|
||||
|
||||
<ul class="list-none">
|
||||
<li>No markers (often with custom bullets via before/after)</li>
|
||||
</ul>
|
||||
|
||||
<!-- Custom value -->
|
||||
<ol class="list-[upper-roman]">Roman numerals</ol>
|
||||
<ul class="list-(--my-marker)">Custom property</ul>
|
||||
```
|
||||
|
||||
### List style position
|
||||
|
||||
```html
|
||||
<!-- Bullets inside content flow -->
|
||||
<ul class="list-inside list-disc">
|
||||
<li>5 cups chopped Porcini mushrooms</li>
|
||||
</ul>
|
||||
|
||||
<!-- Bullets outside content flow (default) -->
|
||||
<ul class="list-outside list-disc">
|
||||
<li>5 cups chopped Porcini mushrooms</li>
|
||||
</ul>
|
||||
```
|
||||
|
||||
### Responsive
|
||||
|
||||
```html
|
||||
<ul class="list-none md:list-disc md:list-outside">...</ul>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `list-disc` - disc bullets (ul default)
|
||||
- `list-decimal` - decimal numbers (ol default)
|
||||
- `list-none` - no markers
|
||||
- Custom: `list-[upper-roman]`, `list-[lower-alpha]`, `list-(--var)`
|
||||
- `list-inside` - markers inside content box
|
||||
- `list-outside` - markers outside content box (default)
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/list-style-type
|
||||
- https://tailwindcss.com/docs/list-style-position
|
||||
-->
|
||||
@@ -0,0 +1,60 @@
|
||||
---
|
||||
name: typography-text-align
|
||||
description: Controlling text alignment with left, center, right, justify, and logical properties
|
||||
---
|
||||
|
||||
# Text Align
|
||||
|
||||
Utilities for controlling the alignment of text.
|
||||
|
||||
## Usage
|
||||
|
||||
### Basic alignment
|
||||
|
||||
Use `text-left`, `text-center`, `text-right`, `text-justify`:
|
||||
|
||||
```html
|
||||
<p class="text-left">Left aligned</p>
|
||||
<p class="text-center">Center aligned</p>
|
||||
<p class="text-right">Right aligned</p>
|
||||
<p class="text-justify">Justified text</p>
|
||||
```
|
||||
|
||||
### Logical properties
|
||||
|
||||
Use `text-start` and `text-end` for RTL-aware alignment:
|
||||
|
||||
```html
|
||||
<div dir="ltr">
|
||||
<p class="text-start">Left in LTR</p>
|
||||
<p class="text-end">Right in LTR</p>
|
||||
</div>
|
||||
<div dir="rtl">
|
||||
<p class="text-start">Right in RTL</p>
|
||||
<p class="text-end">Left in RTL</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Responsive alignment
|
||||
|
||||
```html
|
||||
<p class="text-left md:text-center lg:text-right">
|
||||
Responsive alignment
|
||||
</p>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `text-left` - aligns to left edge
|
||||
- `text-center` - centers text
|
||||
- `text-right` - aligns to right edge
|
||||
- `text-justify` - justifies text (spaces words evenly)
|
||||
- `text-start` - aligns to start (left in LTR, right in RTL)
|
||||
- `text-end` - aligns to end (right in LTR, left in RTL)
|
||||
- Use logical properties (`text-start`, `text-end`) for internationalization
|
||||
- Common pattern: `text-center` for headings, `text-left` for body text
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/text-align
|
||||
-->
|
||||
76
.agents/skills/tailwindcss/references/visual-background.md
Normal file
76
.agents/skills/tailwindcss/references/visual-background.md
Normal file
@@ -0,0 +1,76 @@
|
||||
---
|
||||
name: visual-background
|
||||
description: Background color, gradient, image, and attachment utilities
|
||||
---
|
||||
|
||||
# Background
|
||||
|
||||
Utilities for background color, gradients, images, and attachment.
|
||||
|
||||
## Usage
|
||||
|
||||
### Background color
|
||||
|
||||
```html
|
||||
<div class="bg-white">White</div>
|
||||
<div class="bg-gray-100">Light gray</div>
|
||||
<div class="bg-blue-500">Blue</div>
|
||||
<div class="bg-sky-500/50">50% opacity</div>
|
||||
<div class="bg-[#1da1f2]">Arbitrary</div>
|
||||
<div class="bg-(--my-bg)">CSS variable</div>
|
||||
```
|
||||
|
||||
Color palette follows theme (red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, stone).
|
||||
|
||||
### Background image and gradient
|
||||
|
||||
```html
|
||||
<div class="bg-gradient-to-r from-blue-500 to-purple-600">Linear gradient</div>
|
||||
<div class="bg-gradient-to-br from-indigo-500 via-purple-500 to-pink-500">Multi-stop</div>
|
||||
|
||||
<div class="bg-[url('/img/hero.jpg')]">Image</div>
|
||||
<div class="bg-[url('/img/hero.jpg')] bg-cover bg-center">Image with size/position</div>
|
||||
```
|
||||
|
||||
Gradient directions: `to-t`, `to-tr`, `to-r`, `to-br`, `to-b`, `to-bl`, `to-l`, `to-tl`.
|
||||
|
||||
### Background size and position
|
||||
|
||||
```html
|
||||
<div class="bg-auto">auto</div>
|
||||
<div class="bg-cover">cover</div>
|
||||
<div class="bg-contain">contain</div>
|
||||
|
||||
<div class="bg-center">center</div>
|
||||
<div class="bg-top">top</div>
|
||||
<div class="bg-bottom">bottom</div>
|
||||
<div class="bg-left">left</div>
|
||||
<div class="bg-right">right</div>
|
||||
<div class="bg-[position:2rem_2rem]">Arbitrary</div>
|
||||
```
|
||||
|
||||
### Background repeat and attachment
|
||||
|
||||
```html
|
||||
<div class="bg-repeat">repeat (default)</div>
|
||||
<div class="bg-no-repeat">no-repeat</div>
|
||||
<div class="bg-repeat-x">repeat-x</div>
|
||||
|
||||
<div class="bg-fixed">fixed (parallax)</div>
|
||||
<div class="bg-local">local</div>
|
||||
<div class="bg-scroll">scroll</div>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Colors: `bg-{color}-{shade}`, opacity `/50`, arbitrary `bg-[#hex]`
|
||||
- Gradients: `bg-gradient-to-{dir}`, `from-*`, `via-*`, `to-*`
|
||||
- Image: `bg-[url('...')]`, `bg-cover`, `bg-center`, etc.
|
||||
- Size: `bg-auto`, `bg-cover`, `bg-contain`
|
||||
- Position: `bg-center`, `bg-top`, `bg-[position:...]`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/background-color
|
||||
- https://tailwindcss.com/docs/background-image
|
||||
-->
|
||||
108
.agents/skills/tailwindcss/references/visual-border.md
Normal file
108
.agents/skills/tailwindcss/references/visual-border.md
Normal file
@@ -0,0 +1,108 @@
|
||||
---
|
||||
name: visual-border
|
||||
description: Border width, color, style, and border radius
|
||||
---
|
||||
|
||||
# Border
|
||||
|
||||
Utilities for border width, color, style, and radius.
|
||||
|
||||
## Usage
|
||||
|
||||
### Border width
|
||||
|
||||
```html
|
||||
<div class="border">1px all sides</div>
|
||||
<div class="border-2">2px</div>
|
||||
<div class="border-0">No border</div>
|
||||
|
||||
<div class="border-t border-r border-b border-l">Per side</div>
|
||||
<div class="border-x-2">Horizontal</div>
|
||||
<div class="border-y">Vertical</div>
|
||||
```
|
||||
|
||||
### Border color
|
||||
|
||||
```html
|
||||
<div class="border border-gray-300">Gray border</div>
|
||||
<div class="border-2 border-blue-500">Blue</div>
|
||||
<div class="border border-red-500/50">With opacity</div>
|
||||
```
|
||||
|
||||
### Border style
|
||||
|
||||
```html
|
||||
<div class="border border-solid">Solid (default)</div>
|
||||
<div class="border border-dashed">Dashed</div>
|
||||
<div class="border border-dotted">Dotted</div>
|
||||
<div class="border border-double">Double</div>
|
||||
<div class="border border-none">None</div>
|
||||
```
|
||||
|
||||
### Border radius
|
||||
|
||||
```html
|
||||
<div class="rounded">Small (default)</div>
|
||||
<div class="rounded-sm">2px</div>
|
||||
<div class="rounded-md">6px</div>
|
||||
<div class="rounded-lg">8px</div>
|
||||
<div class="rounded-xl">12px</div>
|
||||
<div class="rounded-2xl">16px</div>
|
||||
<div class="rounded-full">Pill/circle</div>
|
||||
<div class="rounded-none">0</div>
|
||||
|
||||
<div class="rounded-t-lg rounded-b-none">Per corner</div>
|
||||
<div class="rounded-s-md rounded-e-xl">Logical (start/end)</div>
|
||||
```
|
||||
|
||||
### Divide (between children)
|
||||
|
||||
```html
|
||||
<div class="divide-y divide-gray-200">
|
||||
<div>Item 1</div>
|
||||
<div>Item 2</div>
|
||||
<div>Item 3</div>
|
||||
</div>
|
||||
<div class="divide-x divide-gray-300 flex">
|
||||
<div>Col 1</div>
|
||||
<div>Col 2</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Ring (focus outline)
|
||||
|
||||
```html
|
||||
<button class="ring-2 ring-blue-500 ring-offset-2">Ring</button>
|
||||
<button class="focus:ring-3 focus:ring-blue-500">Focus ring</button>
|
||||
```
|
||||
|
||||
### Outline
|
||||
|
||||
Separate from border; used for focus states. In v4: `outline` = 1px; `outline-2`, `outline-4` for width. Use `outline-offset-2` for offset.
|
||||
|
||||
```html
|
||||
<button class="outline outline-offset-2 outline-sky-500">Outline</button>
|
||||
<button class="focus:outline-2 focus:outline-cyan-500">Focus outline</button>
|
||||
<!-- Accessibility: invisible but visible in forced-colors -->
|
||||
<button class="focus:outline-hidden">Focus outline-hidden</button>
|
||||
```
|
||||
|
||||
v4: `outline-none` = `outline-style: none`; `outline-hidden` = invisible but shows in forced-colors mode.
|
||||
|
||||
## Key Points
|
||||
|
||||
- Width: `border`, `border-{0,2,4,8}`, `border-{t,r,b,l,x,y}`
|
||||
- Color: `border-{color}`, opacity modifier
|
||||
- Radius: `rounded-{size}`, `rounded-full`, `rounded-{t,r,b,l,s,e}-*`, logical `rounded-s-*`, `rounded-e-*`
|
||||
- Divide: `divide-{x,y}`, `divide-{color}` for borders between flex/grid children
|
||||
- Ring: `ring`, `ring-{n}`, `ring-{color}`, `ring-offset-{n}` (v4 default ring = 1px; use `ring-3` for 3px)
|
||||
- Outline: `outline`, `outline-{n}`, `outline-{color}`, `outline-offset-{n}`, `outline-hidden`, `outline-none`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/border-width
|
||||
- https://tailwindcss.com/docs/border-color
|
||||
- https://tailwindcss.com/docs/border-radius
|
||||
- https://tailwindcss.com/docs/divide-width
|
||||
- https://tailwindcss.com/docs/ring-width
|
||||
-->
|
||||
90
.agents/skills/tailwindcss/references/visual-effects.md
Normal file
90
.agents/skills/tailwindcss/references/visual-effects.md
Normal file
@@ -0,0 +1,90 @@
|
||||
---
|
||||
name: visual-effects
|
||||
description: Box shadow, opacity, mix-blend, and filter effects
|
||||
---
|
||||
|
||||
# Effects
|
||||
|
||||
Utilities for box shadow, opacity, mix-blend, and filters.
|
||||
|
||||
## Usage
|
||||
|
||||
### Box shadow
|
||||
|
||||
```html
|
||||
<div class="shadow-sm">Small</div>
|
||||
<div class="shadow">Default</div>
|
||||
<div class="shadow-md">Medium</div>
|
||||
<div class="shadow-lg">Large</div>
|
||||
<div class="shadow-xl">Extra large</div>
|
||||
<div class="shadow-2xl">2xl</div>
|
||||
<div class="shadow-none">None</div>
|
||||
|
||||
<div class="shadow-lg shadow-blue-500/50">Colored shadow</div>
|
||||
<div class="shadow-[0_0_15px_rgba(0,0,0,0.2)]">Arbitrary</div>
|
||||
```
|
||||
|
||||
### Opacity
|
||||
|
||||
```html
|
||||
<div class="opacity-0">Invisible</div>
|
||||
<div class="opacity-50">50%</div>
|
||||
<div class="opacity-100">Full</div>
|
||||
```
|
||||
|
||||
### Mix blend mode
|
||||
|
||||
```html
|
||||
<div class="mix-blend-normal">Normal</div>
|
||||
<div class="mix-blend-multiply">Multiply</div>
|
||||
<div class="mix-blend-screen">Screen</div>
|
||||
<div class="mix-blend-overlay">Overlay</div>
|
||||
```
|
||||
|
||||
### Backdrop blur and filter
|
||||
|
||||
```html
|
||||
<div class="backdrop-blur-sm">Blur backdrop</div>
|
||||
<div class="backdrop-blur-md">Medium blur</div>
|
||||
<div class="backdrop-blur-none">No blur</div>
|
||||
|
||||
<div class="backdrop-opacity-50">Backdrop opacity</div>
|
||||
```
|
||||
|
||||
### Filter (blur, brightness, contrast, etc.)
|
||||
|
||||
```html
|
||||
<div class="blur-sm">Blur</div>
|
||||
<div class="brightness-90">Brightness</div>
|
||||
<div class="contrast-125">Contrast</div>
|
||||
<div class="grayscale">Grayscale</div>
|
||||
<div class="invert">Invert</div>
|
||||
<div class="sepia">Sepia</div>
|
||||
<div class="blur-none">No filter</div>
|
||||
```
|
||||
|
||||
### Object fit (images/video)
|
||||
|
||||
```html
|
||||
<img class="object-contain" /> <!-- Fit within bounds -->
|
||||
<img class="object-cover" /> <!-- Cover area, may crop -->
|
||||
<img class="object-fill" /> <!-- Stretch -->
|
||||
<img class="object-none" /> <!-- No resize -->
|
||||
<img class="object-scale-down" /> <!-- contain or none, whichever is smaller -->
|
||||
<img class="object-top object-cover" /> <!-- Position -->
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- Shadow: `shadow-{size}`, `shadow-{color}/opacity`, `shadow-none`
|
||||
- Opacity: `opacity-{0-100}`
|
||||
- Mix blend: `mix-blend-{mode}`
|
||||
- Backdrop: `backdrop-blur-*`, `backdrop-opacity-*`
|
||||
- Filter: `blur-*`, `brightness-*`, `contrast-*`, `grayscale`, `invert`, `sepia`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/box-shadow
|
||||
- https://tailwindcss.com/docs/opacity
|
||||
- https://tailwindcss.com/docs/backdrop-blur
|
||||
-->
|
||||
82
.agents/skills/tailwindcss/references/visual-svg.md
Normal file
82
.agents/skills/tailwindcss/references/visual-svg.md
Normal file
@@ -0,0 +1,82 @@
|
||||
---
|
||||
name: visual-svg
|
||||
description: Styling SVG elements with fill, stroke, and stroke-width utilities
|
||||
---
|
||||
|
||||
# SVG Styling
|
||||
|
||||
Utilities for styling SVG fill and stroke. Essential when working with icon sets like Heroicons.
|
||||
|
||||
## Usage
|
||||
|
||||
### Fill
|
||||
|
||||
```html
|
||||
<!-- Theme colors -->
|
||||
<svg class="fill-blue-500">...</svg>
|
||||
<svg class="fill-indigo-500 hover:fill-indigo-600">...</svg>
|
||||
|
||||
<!-- Inherit from text color -->
|
||||
<button class="text-indigo-600 hover:text-white">
|
||||
<svg class="size-5 fill-current">...</svg>
|
||||
Check for updates
|
||||
</button>
|
||||
|
||||
<!-- Special values -->
|
||||
<svg class="fill-none">...</svg>
|
||||
<svg class="fill-inherit">...</svg>
|
||||
<svg class="fill-transparent">...</svg>
|
||||
|
||||
<!-- Custom -->
|
||||
<svg class="fill-[#243c5a]">...</svg>
|
||||
<svg class="fill-(--my-fill)">...</svg>
|
||||
```
|
||||
|
||||
### Stroke
|
||||
|
||||
```html
|
||||
<!-- Theme colors -->
|
||||
<svg class="stroke-cyan-500" fill="none">...</svg>
|
||||
|
||||
<!-- Inherit from text -->
|
||||
<button class="text-pink-600 hover:text-white">
|
||||
<svg class="size-5 stroke-current" fill="none">...</svg>
|
||||
Download
|
||||
</button>
|
||||
|
||||
<!-- Special values -->
|
||||
<svg class="stroke-none stroke-inherit stroke-transparent">...</svg>
|
||||
```
|
||||
|
||||
### Stroke width
|
||||
|
||||
```html
|
||||
<svg class="stroke-1">Thin stroke</svg>
|
||||
<svg class="stroke-2">Medium stroke</svg>
|
||||
<svg class="stroke-[1.5]">Custom width</svg>
|
||||
<svg class="stroke-(length:--my-stroke)">Custom property</svg>
|
||||
```
|
||||
|
||||
### Combined
|
||||
|
||||
```html
|
||||
<svg class="size-6 fill-blue-500 stroke-blue-700 stroke-2" fill="none">
|
||||
<!-- Outlined icon with colored stroke -->
|
||||
</svg>
|
||||
```
|
||||
|
||||
## Key Points
|
||||
|
||||
- `fill-*` / `stroke-*` - all theme colors (e.g. `fill-red-500`)
|
||||
- `fill-current` / `stroke-current` - use current text color (common for icons in buttons)
|
||||
- `fill-none` / `stroke-none` - no fill/stroke
|
||||
- `stroke-1`, `stroke-2`, etc. - stroke width (number = px)
|
||||
- Custom: `fill-[#hex]`, `stroke-(--var)`, `stroke-[1.5]`
|
||||
- Use with variants: `hover:fill-blue-600`, `md:stroke-2`
|
||||
|
||||
<!--
|
||||
Source references:
|
||||
- https://tailwindcss.com/docs/fill
|
||||
- https://tailwindcss.com/docs/stroke
|
||||
- https://tailwindcss.com/docs/stroke-width
|
||||
-->
|
||||
Reference in New Issue
Block a user