メニュー
Provides utility-first CSS styling patterns using Tailwind CSS 3.x. Use when styling components with utility classes, configuring tailwind.config.js, implementing responsive designs, or creating dark mode themes.
デフォルトでは、最初にソースを確認する Prompt が選択されています。直接コマンドに切り替えるか、ローカルコピーをダウンロードすることもできます。
インストールを決める前に、SKILL.md と SkillsMP に表示されている付属ファイルをお読みください。
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
直接コマンドでは確認用 Prompt が省略されます。実行前にソースを確認してください。
npx skills add https://github.com/tomevault-io/skills-registry --skill styling-with-tailwindコマンドは1行のまま表示されます。コピー前に横へスクロールして全体を確認してください。
ローカルで確認しますか？SkillsMP が現在取得できるファイルをダウンロードできます。
| Use when this capability is needed.
> Use when this capability is needed.
Review architecture and API design for the vfs-s3 project. Use when the user mentions @architect, asks to review an issue's design, discuss module boundaries, API shape, or architectural decisions for vfs-s3. Also trigger when the user wants to create an ADR (Architecture Decision Record) or evaluate a technical approach for the project. Intended for dispatch from Codex automation or Claude routines; GitHub trigger phrase: @vfs-s3-bot please prepare design doc Use when this capability is needed.
SOC 職業分類に基づく
SKILL.md を表示中
| name | styling-with-tailwind |
| description | Provides utility-first CSS styling patterns using Tailwind CSS 3.x. Use when styling components with utility classes, configuring tailwind.config.js, implementing responsive designs, or creating dark mode themes. |
| metadata | {"author":"fortiumpartners"} |
Target: Tailwind CSS 3.4+ | Purpose: Utility-first CSS styling reference
What is Tailwind CSS: A utility-first CSS framework that provides low-level utility classes to build custom designs directly in markup.
When to Use This Skill:
tailwind.config.jsPrerequisites: Node.js 14.0+ (for build tools)
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,jsx,ts,tsx,html}", "./index.html"],
theme: { extend: {} },
plugins: [],
}
CSS Entry Point:
@tailwind base;
@tailwind components;
@tailwind utilities;
| Pattern | Example | Result |
|---|---|---|
m-{size} | m-4 | margin: 1rem |
p-{size} | p-8 | padding: 2rem |
mx-auto | mx-auto | center horizontally |
space-x-{size} | space-x-4 | horizontal gap between children |
Scale: 0=0px, 1=0.25rem, 2=0.5rem, 4=1rem, 8=2rem, 16=4rem
Format: {property}-{color}-{shade}
<div class="bg-blue-500 text-white border-gray-300">
Properties: text-, bg-, border-, ring-, divide-
Shades: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
| Class | Effect |
|---|---|
text-sm/base/lg/xl/2xl | Font size |
font-normal/medium/semibold/bold | Font weight |
text-left/center/right | Text alignment |
truncate | Ellipsis overflow |
line-clamp-{1-6} | Multi-line truncation |
| Pattern | Example |
|---|---|
w-full, w-1/2, w-64 | Width |
h-screen, h-48 | Height |
max-w-sm/md/lg/xl | Max width |
size-10 | Width + height together |
<div class="flex flex-row items-center justify-between gap-4">
<!-- children -->
</div>
| Class | Effect |
|---|---|
flex / flex-col | Enable flexbox, set direction |
items-center | Vertical alignment |
justify-between | Horizontal distribution |
gap-4 | Gap between items |
flex-1 | Grow to fill space |
shrink-0 | Prevent shrinking |
<div class="grid grid-cols-3 gap-4">
<div class="col-span-2">Wide</div>
<div>Normal</div>
</div>
| Class | Effect |
|---|---|
grid-cols-{1-12} | Column count |
col-span-{1-12} | Span columns |
gap-{size} | Gap between cells |
<div class="grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4">
| Prefix | Min-Width |
|---|---|
sm: | 640px |
md: | 768px |
lg: | 1024px |
xl: | 1280px |
2xl: | 1536px |
<!-- Stack on mobile, row on tablet+ -->
<div class="flex flex-col md:flex-row gap-4">
<!-- Hide on mobile, show on desktop -->
<div class="hidden lg:block">Desktop only</div>
<!-- Responsive text -->
<h1 class="text-2xl md:text-4xl lg:text-6xl">
<button class="bg-blue-500 hover:bg-blue-600 focus:ring-2 active:bg-blue-700">
| Prefix | Trigger |
|---|---|
hover: | Mouse over |
focus: | Element focused |
active: | Being clicked |
disabled: | Disabled element |
<!-- Group: parent state affects children -->
<div class="group hover:bg-gray-100">
<span class="group-hover:text-blue-500">Hover parent</span>
</div>
<!-- Peer: sibling state affects element -->
<input class="peer" type="checkbox" />
<label class="peer-checked:text-green-500">Checked!</label>
// tailwind.config.js
module.exports = {
darkMode: 'class', // or 'media' for OS preference
}
<html class="dark">
<body class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white">
module.exports = {
theme: {
extend: {
colors: {
brand: { 500: '#3b82f6', 900: '#1e3a8a' },
},
fontFamily: {
sans: ['Inter', 'system-ui', 'sans-serif'],
},
},
},
}
See REFERENCE.md for advanced configuration (custom screens, container, presets, plugins).
<button class="
px-4 py-2
bg-blue-500 hover:bg-blue-600
text-white font-medium rounded-lg
focus:outline-none focus:ring-2 focus:ring-blue-300
disabled:opacity-50 disabled:cursor-not-allowed
transition-colors
">
Button
</button>
<div class="
bg-white dark:bg-gray-800
rounded-xl shadow-lg p-6
border border-gray-200 dark:border-gray-700
">
<h3 class="text-xl font-semibold">Title</h3>
<p class="mt-2 text-gray-600 dark:text-gray-300">Description</p>
</div>
See REFERENCE.md for more component patterns (input, navigation, badge, modal).
Extract repeated utilities into custom classes:
@layer components {
.btn {
@apply px-4 py-2 rounded-lg font-medium transition-colors;
}
.btn-primary {
@apply btn bg-blue-500 text-white hover:bg-blue-600;
}
}
When to Use: Repeated utility combinations, component libraries When to Avoid: One-off styles (use inline utilities)
Use brackets for one-off custom values:
<div class="w-[137px]">Exact width</div>
<div class="bg-[#1da1f2]">Custom color</div>
<div class="grid-cols-[1fr_500px_2fr]">Custom columns</div>
content arraybg-${color}-500 won't work// DON'T
className={`bg-${color}-500`}
// DO
const colorClasses = { blue: 'bg-blue-500', red: 'bg-red-500' };
className={colorClasses[color]}
SPACING: m-4 p-4 mx-auto space-x-4 gap-4
SIZING: w-full h-screen max-w-xl size-10
FLEX: flex flex-col items-center justify-between flex-1
GRID: grid grid-cols-3 col-span-2 gap-4
TEXT: text-lg font-bold text-center truncate
COLORS: bg-blue-500 text-white border-gray-300
BORDERS: border rounded-lg border-2
SHADOWS: shadow-sm shadow-lg
POSITION: absolute relative fixed sticky top-0 z-50
RESPONSIVE: sm: md: lg: xl: 2xl:
STATES: hover: focus: active: disabled: dark:
TRANSITIONS: transition duration-200
See Also: REFERENCE.md for:
See Also: REFERENCE.md for comprehensive documentation.
Converted and distributed by TomeVault — claim your Tome and manage your conversions.