無料GitHub で公開

tailwind-patterns

Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.

aiskillstore/marketplace

インストール方法を見る

含まれるファイル（3）

SKILL.md2.2 KB
references/component-patterns.md11.6 KB
skill-report.json34.2 KB

SKILL.md（原文）

インストールする前に、エージェントに与えられる指示の中身を確認できます。

Tailwind Patterns

Quick reference for Tailwind CSS utility patterns.

Responsive Breakpoints

Prefix	Min Width
`sm:`	640px
`md:`	768px
`lg:`	1024px
`xl:`	1280px
`2xl:`	1536px

<div class="w-full md:w-1/2 lg:w-1/3">
  <!-- Full on mobile, half on tablet, third on desktop -->
</div>

Common Layout Patterns

<!-- Centered container -->
<div class="container mx-auto px-4">

<!-- Flexbox row -->
<div class="flex items-center justify-between gap-4">

<!-- Grid -->
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">

<!-- Stack -->
<div class="flex flex-col gap-4">

Card

<div class="bg-white rounded-lg shadow-md p-6">
  <h3 class="text-lg font-semibold mb-2">Title</h3>
  <p class="text-gray-600">Content</p>
</div>

Button

<button class="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
  Button
</button>

Form Input

<input type="text"
  class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
  placeholder="Enter text">

Dark Mode

<div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">

// tailwind.config.js
module.exports = { darkMode: 'class' }

State Modifiers

Modifier	Triggers On
`hover:`	Mouse hover
`focus:`	Element focused
`active:`	Being clicked
`disabled:`	Disabled state
`group-hover:`	Parent hovered

Spacing Scale

Class	Size
`p-1`	4px
`p-2`	8px
`p-4`	16px
`p-6`	24px
`p-8`	32px

Arbitrary Values

<div class="w-[137px] h-[calc(100vh-64px)]">

Additional Resources

For detailed patterns, load:

./references/component-patterns.md - Navbar, cards, forms, alerts, loading states

レビュー

まだレビューはありません。使ってみた感想をお寄せください。

ログインしてレビューを書く

同じリポジトリのスキル

概要と使いどころ

acquisition-policy-workflow

無料

Trigger for: explaining current FAR, DFARS, or agency-supplement text; determining documented acquisition-policy status for an agency and FAR part; comparing codified text, RFO model text, and agency deviations; tracing acquisition rulemaking; finding procurement comment periods; analyzing public comments; refreshing prior policy analysis; or producing an Acquisition Policy Impact Brief. Use published federal sources and supplied policy documents without making legal or procurement-specific applicability determinations. Do not use for clause selection, market research execution, opportunities, pricing, grants, or cooperative agreements.

日本語の概要は準備中です。原文の説明を表示しています。