impertio-studio/tailwindcss-claude-skill-package

1

tailwind-impl-plugins-custom Use when authoring a custom Tailwind CSS plugin to add utilities, components, base styles, or variants, regardless of…

impertio-studio/tailwindcss-claude-skill-package

5

2

tailwind-impl-plugins-official Use when installing, configuring, or customising any of the four official Tailwind plugins: @tailwindcss/typography (…

impertio-studio/tailwindcss-claude-skill-package

5

3

tailwind-syntax-gradients Use when building linear, conic, or radial gradient backgrounds, picking an interpolation colour space (oklab default…

impertio-studio/tailwindcss-claude-skill-package

5

4

tailwind-core-design-system Use when designing or picking values for a Tailwind CSS project: choosing spacing units, color tokens, font sizes, br…

impertio-studio/tailwindcss-claude-skill-package

4

5

tailwind-core-v3-vs-v4 Use when picking a Tailwind CSS version for a new project, deciding whether to upgrade an existing v3 codebase to v4,…

impertio-studio/tailwindcss-claude-skill-package

4

6

tailwind-errors-v4-migration Use when upgrading a Tailwind CSS v3 codebase to v4 and hitting silent visual regressions, build errors after switchi…

impertio-studio/tailwindcss-claude-skill-package

4

7

tailwind-impl-build-frameworks Use when wiring Tailwind CSS into Astro, SvelteKit, Nuxt, or Remix: choosing the right install path per framework + T…

impertio-studio/tailwindcss-claude-skill-package

4

8

tailwind-impl-build-postcss-cli Use when wiring Tailwind CSS into a non-Vite build : the PostCSS plugin (Next.js, Remix, Astro pre-Vite, Nuxt v3, Web…

impertio-studio/tailwindcss-claude-skill-package

4

9

tailwind-impl-build-vite Use when wiring Tailwind CSS into a Vite project: choosing between the v4 dedicated Vite plugin and the v3 PostCSS pi…

impertio-studio/tailwindcss-claude-skill-package

4

10

tailwind-impl-config-v3 Use when configuring a Tailwind CSS v3.4 project: writing the `tailwind.config.js` / `.mjs` / `.ts` file, setting up …

impertio-studio/tailwindcss-claude-skill-package

4

11

tailwind-impl-migration-v3-v4 Use when migrating a project from Tailwind CSS v3.4 to v4.0+, deciding between the automated upgrade tool and manual …

impertio-studio/tailwindcss-claude-skill-package

4

12

tailwind-syntax-3d-transforms Use when building 3D effects in Tailwind v4: card-flip animations, 3D carousels, product showcases, hover-reveal effe…

impertio-studio/tailwindcss-claude-skill-package

4

13

tailwind-syntax-dark-mode Use when adding, debugging, or migrating dark-mode support in a Tailwind project: choosing between the default `prefe…

impertio-studio/tailwindcss-claude-skill-package

4

14

tailwind-syntax-functional-utilities Use when authoring custom Tailwind utilities in v4 with the `@utility` directive that need to accept parameters: a th…

impertio-studio/tailwindcss-claude-skill-package

4

15

tailwind-syntax-state-modifiers Use when styling element states (form input validity, checked, disabled, required, placeholder visibility), structura…

impertio-studio/tailwindcss-claude-skill-package

4

16

tailwind-syntax-utility-classes Use when writing Tailwind markup and you need to recall or verify the vocabulary of base utility families (spacing, c…

impertio-studio/tailwindcss-claude-skill-package

4

17

tailwind-agents-validator Use when reviewing a Tailwind CSS codebase for cross-rule violations, performing a pre-PR audit of changes that touch…

impertio-studio/tailwindcss-claude-skill-package

3

18

tailwind-core-architecture Use when starting a new Tailwind CSS project, evaluating whether Tailwind fits a codebase, debating utility-first vs …

impertio-studio/tailwindcss-claude-skill-package

3

19

tailwind-errors-build-failures Use when a Tailwind build completes successfully but the compiled CSS is empty, partial, or stale, when classes appea…

impertio-studio/tailwindcss-claude-skill-package

3

20

tailwind-errors-dynamic-classes Use when Tailwind classes work in development but disappear in production builds, or when class names assembled at ru…

impertio-studio/tailwindcss-claude-skill-package

3

21

tailwind-errors-specificity Use when a Tailwind utility class is in the compiled CSS but does NOT visually override a component class or a third-…

impertio-studio/tailwindcss-claude-skill-package

3

22

tailwind-errors-utility-soup Use when a Tailwind element has 20+ utility classes on one line, when reviewers complain about "utility soup", or whe…

impertio-studio/tailwindcss-claude-skill-package

3

23

tailwind-impl-apply-directive Use when writing custom CSS that needs to share design tokens with Tailwind utilities via @apply, organizing componen…

impertio-studio/tailwindcss-claude-skill-package

3

24

tailwind-impl-build-nextjs Use when installing or wiring Tailwind CSS into a Next.js project, for either the App Router or the Pages Router, on …

impertio-studio/tailwindcss-claude-skill-package

3

25

tailwind-impl-config-v4 Use when setting up or editing a Tailwind CSS v4 configuration via the CSS-first model: writing the entry stylesheet,…

impertio-studio/tailwindcss-claude-skill-package

3

26

tailwind-impl-tailwind-merge Use when composing Tailwind class strings dynamically across React, Vue, Svelte, Solid, or any framework where a pare…

impertio-studio/tailwindcss-claude-skill-package

3

27

tailwind-syntax-arbitrary-values Use when needing a one-off value that is not in the theme: specific hex colors, arbitrary pixel sizes, calc() express…

impertio-studio/tailwindcss-claude-skill-package

3

28

tailwind-syntax-modern-utilities Use when reaching for v4-only modern CSS utilities that were unavailable or required heavy custom code in v3: CSS-onl…

impertio-studio/tailwindcss-claude-skill-package

3

29

tailwind-syntax-responsive Use when building responsive layouts with Tailwind CSS, picking between viewport breakpoints (sm/md/lg/xl/2xl) and co…

impertio-studio/tailwindcss-claude-skill-package

3

30

tailwind-syntax-variants Use when applying conditional styles in Tailwind: hover, focus, active, dark mode, responsive breakpoints, group-* an…

impertio-studio/tailwindcss-claude-skill-package

3