メニュー
SkillsMP は Impertio-Studio/TailwindCSS-Claude-Skill-Package から 30 件の skill を収集しています。skill を開くとソースと詳細を確認できます。
収集済み skill 30 件中 30 件を表示しています。
Use when a Tailwind utility class is in the compiled CSS but does NOT visually override a component class or a third-party rule, when @apply produces output that does not behave like the utility applied to a real element, when a custom utility you authored…
原文の言語: 英語
Use when upgrading a Tailwind CSS v3 codebase to v4 and hitting silent visual regressions, build errors after switching imports, or unexpected behavior changes that the codemod did not catch. Catalogs every default-behavior change between v3 and v4 with…
原文の言語: 英語
Use when reviewing a Tailwind CSS codebase for cross-rule violations, performing a pre-PR audit of changes that touch styling, validating a v3-to-v4 migration result, or running a periodic codebase health check across utility classes, plugin authoring, and…
原文の言語: 英語
Use when a Tailwind build completes successfully but the compiled CSS is empty, partial, or stale, when classes appear in markup but styles never render in the browser, when a freshly added utility refuses to take effect, when an HMR update leaves the page…
原文の言語: 英語
Use when a Tailwind element has 20+ utility classes on one line, when reviewers complain about "utility soup", or when deciding between leaving utilities inline, extracting a component, or pulling utilities into @apply. Prevents the premature-extraction trap…
原文の言語: 英語
Use when Tailwind classes work in development but disappear in production builds, or when class names assembled at runtime (template literals like bg-${color}-500, server-injected JSON, CMS-driven attributes, i18n strings, user-configured colours) render in…
原文の言語: 英語
Use when migrating a project from Tailwind CSS v3.4 to v4.0+, deciding between the automated upgrade tool and manual conversion, planning a dual-version monorepo transition, auditing a codebase before the upgrade, or verifying behaviour after the upgrade.…
原文の言語: 英語
Use when composing Tailwind class strings dynamically across React, Vue, Svelte, Solid, or any framework where a parent component passes override classes to a child via a className prop, and the child combines them with its own defaults. Solves the…
原文の言語: 英語
Use when writing custom CSS that needs to share design tokens with Tailwind utilities via @apply, organizing component / base / utility CSS via @layer, or fixing the "Cannot apply unknown utility class" error in Vue, Svelte, or CSS-module scoped styles by…
原文の言語: 英語
Use when installing, configuring, or customising any of the four official Tailwind plugins: @tailwindcss/typography (prose classes for rendered Markdown), @tailwindcss/forms (form-input/select/checkbox base reset), @tailwindcss/container-queries (@container…
原文の言語: 英語
Use when authoring a custom Tailwind CSS plugin to add utilities, components, base styles, or variants, regardless of whether the host project runs Tailwind v3 (JS plugin in tailwind-config-js) or v4 (JS plugin loaded via @plugin or the CSS-native @utility…
原文の言語: 英語
Use when wiring Tailwind CSS into Astro, SvelteKit, Nuxt, or Remix: choosing the right install path per framework + Tailwind version, picking the correct config file (astro.config.mjs, svelte.config.js, nuxt.config.ts, vite.config.ts), placing the global CSS…
原文の言語: 英語
Use when wiring Tailwind CSS into a non-Vite build : the PostCSS plugin (Next.js, Remix, Astro pre-Vite, Nuxt v3, Webpack, Rollup, esbuild, Parcel, Laravel Mix, Symfony Encore, any postcss.config.js consumer), or the standalone CLI binary for Rails, Laravel…
原文の言語: 英語
Use when wiring Tailwind CSS into a Vite project: choosing between the v4 dedicated Vite plugin and the v3 PostCSS pipeline, picking the right packages and configs, importing the stylesheet, enabling HMR, and scoping template-scan paths in monorepos. Prevents…
原文の言語: 英語
Use when installing or wiring Tailwind CSS into a Next.js project, for either the App Router or the Pages Router, on Tailwind v3 or v4, and when hooking next/font/google families into the Tailwind theme so utilities like font-sans resolve to the loaded…
原文の言語: 英語
Use when configuring a Tailwind CSS v3.4 project: writing the `tailwind.config.js` / `.mjs` / `.ts` file, setting up content scanning globs, extending or replacing the default theme, registering plugins, picking a dark-mode strategy, disabling core utilities,…
原文の言語: 英語
Use when setting up or editing a Tailwind CSS v4 configuration via the CSS-first model: writing the entry stylesheet, defining design tokens in @theme, scoping content detection with @source, adding custom utilities with @utility, declaring custom variants…
原文の言語: 英語
Use when reaching for v4-only modern CSS utilities that were unavailable or required heavy custom code in v3: CSS-only enter and exit animations on dialogs and popovers via `@starting-style` plus the `starting:` variant and `transition-discrete`,…
原文の言語: 英語
Use when building linear, conic, or radial gradient backgrounds, picking an interpolation colour space (oklab default, oklch, srgb, hsl, longer-hue, shorter-hue), placing color stops at specific positions, or migrating a v3 `bg-gradient-to-r from-X to-Y`…
原文の言語: 英語
Use when authoring custom Tailwind utilities in v4 with the `@utility` directive that need to accept parameters: a theme-namespace key (like `tab-github`, `tab-2`, `tab-4`), a bare integer/number/ratio/percentage, a literal keyword, an arbitrary bracketed…
原文の言語: 英語
Use when building 3D effects in Tailwind v4: card-flip animations, 3D carousels, product showcases, hover-reveal effects, parallax-like depth, or any layout that requires elements to rotate or translate along the Z axis. Use also when an existing v3 project…
原文の言語: 英語
Use when adding, debugging, or migrating dark-mode support in a Tailwind project: choosing between the default `prefers-color-scheme` strategy and user-toggleable class or attribute strategies, wiring the JavaScript toggle, swapping CSS-variable token values…
原文の言語: 英語
Use when styling element states (form input validity, checked, disabled, required, placeholder visibility), structural positions (first, last, even, odd, nth-child), pseudo-elements (before, after, placeholder, file, marker, selection, first-letter), or…
原文の言語: 英語
Use when needing a one-off value that is not in the theme: specific hex colors, arbitrary pixel sizes, calc() expressions, custom grid templates, unusual font sizes, specific transforms, custom selectors, runtime CSS-variable values. Use also when reading…
原文の言語: 英語
Use when building responsive layouts with Tailwind CSS, picking between viewport breakpoints (sm/md/lg/xl/2xl) and container queries (@sm, @md, named @container/name), targeting a breakpoint range with max-* variants, using arbitrary breakpoints (min-[400px],…
原文の言語: 英語
Use when writing Tailwind markup and you need to recall or verify the vocabulary of base utility families (spacing, color, typography, layout, flexbox, grid, sizing, border, background, effects). Also use when diagnosing why a class name does not produce…
原文の言語: 英語
Use when applying conditional styles in Tailwind: hover, focus, active, dark mode, responsive breakpoints, group-* and peer-* combinators, aria-* and data-* attribute variants, has-* and not-* selectors, position-in-parent variants (first, last, *, nth-*), or…
原文の言語: 英語
Use when starting a new Tailwind CSS project, evaluating whether Tailwind fits a codebase, debating utility-first vs BEM / CSS Modules / CSS-in-JS, or reviewing a PR that mixes architectural styles. Prevents the "ad-hoc CSS leaking into utility-first markup"…
原文の言語: 英語
Use when designing or picking values for a Tailwind CSS project: choosing spacing units, color tokens, font sizes, breakpoints, or opacity. Use also when reading existing utility classes and needing to know whether a value comes from the default theme or a…
原文の言語: 英語
Use when picking a Tailwind CSS version for a new project, deciding whether to upgrade an existing v3 codebase to v4, or debugging visual regressions and build errors that appear right after a v3 to v4 bump. Prevents the silent visual breakages (border-color,…
原文の言語: 英語