[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6WZ0EJB9RDA82KSW0ZH3N69":3,"skill-same:01M6WZ0EJB9RDA82KSW0ZH3N69":84},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":57,"commitSha":58,"skillDirectory":59,"forksCount":14,"repositoryHtmlUrl":60,"repositoryHomepageUrl":61,"ownerHtmlUrl":62,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":63,"install":64,"resources":77},"01M6WZ0EJB9RDA82KSW0ZH3N69","tailwind",null,"Tailwind CSS v4 — utility-first styling, responsive design, dark mode, and component extraction. Use when building or reviewing Tailwind-based UIs, setting up Tailwind v4, or designing responsive or dark-mode styling.","projectious-work\u002Fprocesskit","projectious-work","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F263889726?v=4","01M6N97TJJ118WQ35CHRV8RD0E","projectious.work","01M6N97TPWJPF0BMKYQ4PBY5W8",0,"MIT","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fengineering\u002Ftailwind\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"Tailwind","tailwind v4","when","dark","v1","mode","dark-mode","utility","dark mode","Tailwind CSS","responsive design","design","styling","up","use","component extraction","work","first","component","css","2026-11-10 10:12:30",false,"---\nname: tailwind\ndescription: |\n  Tailwind CSS v4 — utility-first styling, responsive design, dark mode, and component extraction. Use when building or reviewing Tailwind-based UIs, setting up Tailwind v4, or designing responsive or dark-mode styling.\nmetadata:\n  processkit:\n    apiVersion: processkit.projectious.work\u002Fv1\n    id: SKILL-tailwind\n    version: \"1.1.0\"\n    created: 2026-04-06T00:00:00Z\n    category: engineering\n---\n\n# Tailwind CSS\n\n## Intro\n\nTailwind v4 is CSS-first: install the package, `@import \"tailwindcss\"`\nonce, and declare design tokens inside a `@theme` block. Compose\nstyles directly in markup with utility classes, extract components in\nyour framework (not with `@apply`), and lean on semantic tokens so\ndark mode and theming don't fight you.\n\n## Overview\n\n### Project setup (v4)\n\nInstall `tailwindcss` plus the appropriate adapter\n(`@tailwindcss\u002Fpostcss` or `@tailwindcss\u002Fvite`). The CSS entry point\nonly needs:\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n  --color-brand-500: oklch(0.65 0.19 260);\n  --font-heading: \"Inter\", sans-serif;\n  --breakpoint-3xl: 1920px;\n}\n```\n\nThere's no `tailwind.config.js`. Content detection is automatic\n(respecting `.gitignore`); override it with `@source` when you need to\ninclude extra files. For Vite projects, prefer the first-party Vite\nplugin over PostCSS.\n\n### Utility-first principles\n\nCompose styles in markup and avoid premature abstraction. Group\nclasses by concern (layout → spacing → typography → color) to keep\nlong class lists scannable. Tailwind v4 accepts any integer spacing\n(`mt-13`, `w-17`) without configuration — arbitrary values like\n`w-[347px]` should be a code smell that signals a missing design\ntoken.\n\n### Component extraction\n\nExtract in your UI framework (React\u002FVue\u002FSvelte), not with `@apply`.\n`@apply` still works and remains appropriate when you need real CSS\n(e.g., styling HTML rendered from markdown), but prefer framework\ncomponents for everything else. Keep extracted components small — a\nbutton or card, not an entire page section.\n\n### Responsive design\n\nMobile-first: base styles apply to all sizes; add breakpoints upward\nwith `sm:`, `md:`, `lg:`, `xl:`, `2xl:`. For component-level\nresponsiveness, use container queries:\n\n```html\n\u003Cdiv class=\"@container\">\n  \u003Cdiv class=\"grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4\">\n```\n\nConstrain content with `max-w-*` + `mx-auto`. Test at 320px wide to\nstay WCAG 1.4.10 compliant.\n\n### Dark mode\n\nUse the `dark:` variant with either the default\n`prefers-color-scheme` strategy or a `.dark` class. Best pattern:\ndefine semantic tokens once and override them in `.dark`, then apply\ntoken-based classes without any `dark:` prefix:\n\n```css\n@theme {\n  --color-surface: oklch(0.99 0 0);\n  --color-on-surface: oklch(0.15 0 0);\n}\n.dark {\n  --color-surface: oklch(0.15 0 0);\n  --color-on-surface: oklch(0.95 0 0);\n}\n```\n\nThen write `bg-surface text-on-surface` everywhere and both modes\nfollow automatically.\n\n### Colors and theming\n\nTailwind v4 uses OKLCH, which is more vibrant and perceptually\nuniform than sRGB. Opacity modifiers work via `color-mix()`:\n`bg-blue-500\u002F50`. Define brand colors in `@theme` rather than\nscattering hex values through markup. Multi-brand apps can swap CSS\nvariables at the `[data-theme]` level at runtime without a rebuild.\n\n### Performance\n\nThe v4 engine is Rust-based: full builds run in around 100ms and\nincremental rebuilds in single-digit ms. Unused CSS is eliminated\nautomatically. Never build class names dynamically\n(`` `text-${color}-500` ``) — the scanner can't see them. Use a\nlookup map or safelist the class with `@source`.\n\n## Gotchas\n\nAgent-specific failure modes — provider-neutral pause-and-self-check items:\n\n- **Building class names dynamically with template literals.** Tailwind's scanner detects class names by static string matching. A class like `` `text-${color}-500` `` or `\"bg-\" + shade` is invisible to the scanner and will be missing from the production build. Use a lookup object with full class name strings, or add the generated classes to a safelist.\n- **Overusing arbitrary values.** `w-[347px]` or `text-[13px]` signals a design token that is missing from `@theme`. One arbitrary value is a problem to fix; many arbitrary values mean the design system has diverged from the implementation. Add the value to `@theme` and reference it by name.\n- **Using `@apply` for everything instead of component extraction.** `@apply` scatters styles across CSS files and breaks the direct relationship between markup and styling that makes Tailwind easy to maintain. Extract reusable patterns as framework components (React, Vue, Svelte), not as CSS utilities.\n- **Not using `focus-visible:` for focus styles.** `focus:outline-none` removes focus styles for all users, including keyboard users who depend on them. Use `focus-visible:ring-2 focus-visible:ring-blue-500` to show focus indicators for keyboard navigation while hiding them for mouse users.\n- **Skipping `@theme` and hardcoding colors inline.** Using arbitrary color values like `text-[#3b82f6]` instead of defining `--color-brand-primary` in `@theme` makes dark mode and multi-brand theming require global search-and-replace instead of a single token change.\n- **Not testing at 320px viewport width.** Tailwind's mobile-first default base styles apply at all widths. A layout that works at 375px may break at 320px, which is the WCAG 1.4.10 (Reflow) minimum. Always check that no horizontal scrolling appears at 320px.\n- **Using the v3 `tailwind.config.js` pattern with v4.** Tailwind v4 removes `tailwind.config.js`; configuration moves to CSS `@theme` blocks. Mixing v3 config with v4 styles causes tokens to be silently ignored. Check the version and use the appropriate configuration pattern.\n\n## Full reference\n\n### Layout utilities\n\n| Purpose          | Classes                                                                |\n|------------------|------------------------------------------------------------------------|\n| Display          | `block` `inline-block` `flex` `inline-flex` `grid` `hidden` `contents` |\n| Position         | `static` `relative` `absolute` `fixed` `sticky`                        |\n| Flex direction   | `flex-row` `flex-col` `flex-row-reverse` `flex-col-reverse`            |\n| Flex wrap        | `flex-wrap` `flex-nowrap`                                              |\n| Flex grow\u002Fshrink | `grow` `shrink` `grow-0` `shrink-0` `basis-1\u002F2`                        |\n| Justify content  | `justify-start` `justify-center` `justify-between` `justify-end`       |\n| Align items      | `items-start` `items-center` `items-end` `items-stretch`               |\n| Align self       | `self-auto` `self-start` `self-center` `self-end`                      |\n| Grid template    | `grid-cols-1` ... `grid-cols-12` `grid-rows-1` ... `grid-rows-6`       |\n| Grid span        | `col-span-1` ... `col-span-full` `row-span-1` ... `row-span-full`      |\n| Gap              | `gap-0` `gap-1` ... `gap-8` `gap-x-4` `gap-y-4`                        |\n| Overflow         | `overflow-auto` `overflow-hidden` `overflow-scroll` `overflow-visible` |\n| Z-index          | `z-0` `z-10` `z-20` `z-30` `z-40` `z-50` `z-auto`                      |\n\n### Spacing and sizing\n\n| Purpose       | Classes                                                                    |\n|---------------|----------------------------------------------------------------------------|\n| Padding       | `p-0` `p-1` ... `p-8` `px-4` `py-2` `pt-4` `pr-4` `pb-4` `pl-4`            |\n| Margin        | `m-0` `m-1` ... `m-8` `mx-auto` `my-4` `-mt-4`                             |\n| Space between | `space-x-4` `space-y-4`                                                    |\n| Width         | `w-0` `w-px` `w-1` ... `w-96` `w-auto` `w-full` `w-fit` `w-1\u002F2` `w-1\u002F3`    |\n| Max width     | `max-w-xs` `max-w-sm` ... `max-w-7xl` `max-w-full` `max-w-prose`           |\n| Min width     | `min-w-0` `min-w-full` `min-w-min` `min-w-max`                             |\n| Height        | `h-0` `h-1` ... `h-96` `h-auto` `h-full` `h-screen` `h-fit`                |\n| Min\u002FMax height| `min-h-screen` `max-h-96`                                                  |\n\nIn v4, any integer works: `p-13`, `mt-17`, `gap-22` — no config.\n\n### Typography\n\n| Purpose         | Classes                                                                |\n|-----------------|------------------------------------------------------------------------|\n| Font size       | `text-xs` `text-sm` `text-base` `text-lg` ... `text-9xl`               |\n| Font weight     | `font-thin` `font-light` `font-normal` `font-medium` `font-semibold` `font-bold` |\n| Font style      | `italic` `not-italic`                                                  |\n| Font family     | `font-sans` `font-serif` `font-mono`                                   |\n| Text align      | `text-left` `text-center` `text-right` `text-justify`                  |\n| Text color      | `text-black` `text-white` `text-{color}-{shade}`                       |\n| Line height     | `leading-none` `leading-tight` `leading-snug` `leading-normal`         |\n| Letter spacing  | `tracking-tight` `tracking-normal` `tracking-wide`                     |\n| Text decoration | `underline` `overline` `line-through` `no-underline`                   |\n| Text transform  | `uppercase` `lowercase` `capitalize` `normal-case`                     |\n| Text overflow   | `truncate` `text-ellipsis` `text-clip`                                 |\n| Whitespace      | `whitespace-normal` `whitespace-nowrap` `whitespace-pre`               |\n\n### Backgrounds and borders\n\n| Purpose       | Classes                                                                  |\n|---------------|--------------------------------------------------------------------------|\n| Background    | `bg-white` `bg-{color}-{shade}` `bg-transparent` `bg-blue-500\u002F50`        |\n| Gradient      | `bg-linear-to-r` `bg-linear-45` `from-{color}` `via-{color}` `to-{color}`|\n| Border width  | `border` `border-0` `border-2` `border-4` `border-t` `border-r`          |\n| Border color  | `border-gray-200` `border-{color}-{shade}` `border-transparent`          |\n| Border style  | `border-solid` `border-dashed` `border-dotted` `border-none`             |\n| Radius        | `rounded-none` `rounded-sm` `rounded` `rounded-md` `rounded-lg` `rounded-full` |\n| Ring          | `ring` `ring-2` `ring-{color}-{shade}` `ring-offset-2`                   |\n\nv4 renamed `bg-gradient-*` to `bg-linear-*`.\n\n### Effects and motion\n\n| Purpose       | Classes                                                                  |\n|---------------|--------------------------------------------------------------------------|\n| Shadow        | `shadow-sm` `shadow` `shadow-md` `shadow-lg` `shadow-xl` `shadow-none`   |\n| Opacity       | `opacity-0` `opacity-25` `opacity-50` `opacity-75` `opacity-100`         |\n| Blur          | `blur-none` `blur-sm` `blur` `blur-md` `blur-lg`                         |\n| Backdrop blur | `backdrop-blur-sm` `backdrop-blur` `backdrop-blur-md`                    |\n| Transition    | `transition-none` `transition` `transition-colors` `transition-transform`|\n| Duration      | `duration-75` `duration-150` `duration-300` `duration-500` `duration-1000` |\n| Timing        | `ease-linear` `ease-in` `ease-out` `ease-in-out`                         |\n| Animation     | `animate-spin` `animate-ping` `animate-pulse` `animate-bounce`           |\n| Transform     | `scale-50` ... `scale-150` `rotate-45` `translate-x-4` `translate-y-4`   |\n\n### Breakpoints\n\n| Prefix | Min-width | Typical use             |\n|--------|-----------|-------------------------|\n| (none) | 0px       | Mobile-first base       |\n| `sm:`  | 640px     | Large phones, landscape |\n| `md:`  | 768px     | Tablets                 |\n| `lg:`  | 1024px    | Laptops                 |\n| `xl:`  | 1280px    | Desktops                |\n| `2xl:` | 1536px    | Large screens           |\n\n### State variants\n\n| Variant            | Trigger                                  |\n|--------------------|------------------------------------------|\n| `hover:`           | Mouse hover                              |\n| `focus:`           | Element focused                          |\n| `focus-visible:`   | Keyboard focus (recommended over focus:) |\n| `active:`          | Being clicked\u002Fpressed                    |\n| `disabled:`        | Disabled form element                    |\n| `first:` `last:`   | First\u002Flast child                         |\n| `odd:` `even:`     | Odd\u002Feven children                        |\n| `dark:`            | Dark mode                                |\n| `motion-reduce:`   | Prefers reduced motion                   |\n| `@sm:` `@md:` etc. | Container query breakpoints (v4)         |\n| `not-hover:`       | Inverse of hover (v4)                    |\n\n### Accessibility utilities\n\n| Purpose            | Classes                                             |\n|--------------------|-----------------------------------------------------|\n| Screen reader only | `sr-only` `not-sr-only`                             |\n| Focus ring         | `focus-visible:ring-2 focus-visible:ring-blue-500`  |\n| Reduced motion     | `motion-reduce:transition-none`                     |\n| Forced colors      | `forced-colors:border`                              |\n\nAlways include `focus-visible:` ring\u002Foutline styles on interactive\nelements. Use `sr-only` for labels on icon-only buttons. Text on\ncolored backgrounds must meet WCAG AA contrast (4.5:1 normal, 3:1\nlarge). Click targets should be at least 24×24 CSS pixels\n(WCAG 2.5.8).\n\n### Anti-patterns\n\n- **Class string builders** (`` `text-${size}` ``) — the scanner\n  can't detect them; use a lookup map\n- **Overusing arbitrary values** — treat `w-[347px]` as a missing\n  token and add it to `@theme`\n- **Nesting utilities in CSS** — defeats the utility-first approach\n- **Ignoring accessibility** — skipping focus states, contrast, or\n  `motion-reduce:` will come back as audits\n- **Not using `@theme`** — scattered hardcoded values destroy\n  consistency and make dark mode painful\n\n### Further reading\n\n- [Tailwind CSS v4 announcement](https:\u002F\u002Ftailwindcss.com\u002Fblog\u002Ftailwindcss-v4)\n- [Official documentation](https:\u002F\u002Ftailwindcss.com\u002Fdocs)\n","# Tailwind CSS\n\n## Intro\n\nTailwind v4 is CSS-first: install the package, `@import \"tailwindcss\"`\nonce, and declare design tokens inside a `@theme` block. Compose\nstyles directly in markup with utility classes, extract components in\nyour framework (not with `@apply`), and lean on semantic tokens so\ndark mode and theming don't fight you.\n\n## Overview\n\n### Project setup (v4)\n\nInstall `tailwindcss` plus the appropriate adapter\n(`@tailwindcss\u002Fpostcss` or `@tailwindcss\u002Fvite`). The CSS entry point\nonly needs:\n\n```css\n@import \"tailwindcss\";\n\n@theme {\n  --color-brand-500: oklch(0.65 0.19 260);\n  --font-heading: \"Inter\", sans-serif;\n  --breakpoint-3xl: 1920px;\n}\n```\n\nThere's no `tailwind.config.js`. Content detection is automatic\n(respecting `.gitignore`); override it with `@source` when you need to\ninclude extra files. For Vite projects, prefer the first-party Vite\nplugin over PostCSS.\n\n### Utility-first principles\n\nCompose styles in markup and avoid premature abstraction. Group\nclasses by concern (layout → spacing → typography → color) to keep\nlong class lists scannable. Tailwind v4 accepts any integer spacing\n(`mt-13`, `w-17`) without configuration — arbitrary values like\n`w-[347px]` should be a code smell that signals a missing design\ntoken.\n\n### Component extraction\n\nExtract in your UI framework (React\u002FVue\u002FSvelte), not with `@apply`.\n`@apply` still works and remains appropriate when you need real CSS\n(e.g., styling HTML rendered from markdown), but prefer framework\ncomponents for everything else. Keep extracted components small — a\nbutton or card, not an entire page section.\n\n### Responsive design\n\nMobile-first: base styles apply to all sizes; add breakpoints upward\nwith `sm:`, `md:`, `lg:`, `xl:`, `2xl:`. For component-level\nresponsiveness, use container queries:\n\n```html\n\u003Cdiv class=\"@container\">\n  \u003Cdiv class=\"grid grid-cols-1 @sm:grid-cols-2 @lg:grid-cols-4\">\n```\n\nConstrain content with `max-w-*` + `mx-auto`. Test at 320px wide to\nstay WCAG 1.4.10 compliant.\n\n### Dark mode\n\nUse the `dark:` variant with either the default\n`prefers-color-scheme` strategy or a `.dark` class. Best pattern:\ndefine semantic tokens once and override them in `.dark`, then apply\ntoken-based classes without any `dark:` prefix:\n\n```css\n@theme {\n  --color-surface: oklch(0.99 0 0);\n  --color-on-surface: oklch(0.15 0 0);\n}\n.dark {\n  --color-surface: oklch(0.15 0 0);\n  --color-on-surface: oklch(0.95 0 0);\n}\n```\n\nThen write `bg-surface text-on-surface` everywhere and both modes\nfollow automatically.\n\n### Colors and theming\n\nTailwind v4 uses OKLCH, which is more vibrant and perceptually\nuniform than sRGB. Opacity modifiers work via `color-mix()`:\n`bg-blue-500\u002F50`. Define brand colors in `@theme` rather than\nscattering hex values through markup. Multi-brand apps can swap CSS\nvariables at the `[data-theme]` level at runtime without a rebuild.\n\n### Performance\n\nThe v4 engine is Rust-based: full builds run in around 100ms and\nincremental rebuilds in single-digit ms. Unused CSS is eliminated\nautomatically. Never build class names dynamically\n(`` `text-${color}-500` ``) — the scanner can't see them. Use a\nlookup map or safelist the class with `@source`.\n\n## Gotchas\n\nAgent-specific failure modes — provider-neutral pause-and-self-check items:\n\n- **Building class names dynamically with template literals.** Tailwind's scanner detects class names by static string matching. A class like `` `text-${color}-500` `` or `\"bg-\" + shade` is invisible to the scanner and will be missing from the production build. Use a lookup object with full class name strings, or add the generated classes to a safelist.\n- **Overusing arbitrary values.** `w-[347px]` or `text-[13px]` signals a design token that is missing from `@theme`. One arbitrary value is a problem to fix; many arbitrary values mean the design system has diverged from the implementation. Add the value to `@theme` and reference it by name.\n- **Using `@apply` for everything instead of component extraction.** `@apply` scatters styles across CSS files and breaks the direct relationship between markup and styling that makes Tailwind easy to maintain. Extract reusable patterns as framework components (React, Vue, Svelte), not as CSS utilities.\n- **Not using `focus-visible:` for focus styles.** `focus:outline-none` removes focus styles for all users, including keyboard users who depend on them. Use `focus-visible:ring-2 focus-visible:ring-blue-500` to show focus indicators for keyboard navigation while hiding them for mouse users.\n- **Skipping `@theme` and hardcoding colors inline.** Using arbitrary color values like `text-[#3b82f6]` instead of defining `--color-brand-primary` in `@theme` makes dark mode and multi-brand theming require global search-and-replace instead of a single token change.\n- **Not testing at 320px viewport width.** Tailwind's mobile-first default base styles apply at all widths. A layout that works at 375px may break at 320px, which is the WCAG 1.4.10 (Reflow) minimum. Always check that no horizontal scrolling appears at 320px.\n- **Using the v3 `tailwind.config.js` pattern with v4.** Tailwind v4 removes `tailwind.config.js`; configuration moves to CSS `@theme` blocks. Mixing v3 config with v4 styles causes tokens to be silently ignored. Check the version and use the appropriate configuration pattern.\n\n## Full reference\n\n### Layout utilities\n\n| Purpose          | Classes                                                                |\n|------------------|------------------------------------------------------------------------|\n| Display          | `block` `inline-block` `flex` `inline-flex` `grid` `hidden` `contents` |\n| Position         | `static` `relative` `absolute` `fixed` `sticky`                        |\n| Flex direction   | `flex-row` `flex-col` `flex-row-reverse` `flex-col-reverse`            |\n| Flex wrap        | `flex-wrap` `flex-nowrap`                                              |\n| Flex grow\u002Fshrink | `grow` `shrink` `grow-0` `shrink-0` `basis-1\u002F2`                        |\n| Justify content  | `justify-start` `justify-center` `justify-between` `justify-end`       |\n| Align items      | `items-start` `items-center` `items-end` `items-stretch`               |\n| Align self       | `self-auto` `self-start` `self-center` `self-end`                      |\n| Grid template    | `grid-cols-1` ... `grid-cols-12` `grid-rows-1` ... `grid-rows-6`       |\n| Grid span        | `col-span-1` ... `col-span-full` `row-span-1` ... `row-span-full`      |\n| Gap              | `gap-0` `gap-1` ... `gap-8` `gap-x-4` `gap-y-4`                        |\n| Overflow         | `overflow-auto` `overflow-hidden` `overflow-scroll` `overflow-visible` |\n| Z-index          | `z-0` `z-10` `z-20` `z-30` `z-40` `z-50` `z-auto`                      |\n\n### Spacing and sizing\n\n| Purpose       | Classes                                                                    |\n|---------------|----------------------------------------------------------------------------|\n| Padding       | `p-0` `p-1` ... `p-8` `px-4` `py-2` `pt-4` `pr-4` `pb-4` `pl-4`            |\n| Margin        | `m-0` `m-1` ... `m-8` `mx-auto` `my-4` `-mt-4`                             |\n| Space between | `space-x-4` `space-y-4`                                                    |\n| Width         | `w-0` `w-px` `w-1` ... `w-96` `w-auto` `w-full` `w-fit` `w-1\u002F2` `w-1\u002F3`    |\n| Max width     | `max-w-xs` `max-w-sm` ... `max-w-7xl` `max-w-full` `max-w-prose`           |\n| Min width     | `min-w-0` `min-w-full` `min-w-min` `min-w-max`                             |\n| Height        | `h-0` `h-1` ... `h-96` `h-auto` `h-full` `h-screen` `h-fit`                |\n| Min\u002FMax height| `min-h-screen` `max-h-96`                                                  |\n\nIn v4, any integer works: `p-13`, `mt-17`, `gap-22` — no config.\n\n### Typography\n\n| Purpose         | Classes                                                                |\n|-----------------|------------------------------------------------------------------------|\n| Font size       | `text-xs` `text-sm` `text-base` `text-lg` ... `text-9xl`               |\n| Font weight     | `font-thin` `font-light` `font-normal` `font-medium` `font-semibold` `font-bold` |\n| Font style      | `italic` `not-italic`                                                  |\n| Font family     | `font-sans` `font-serif` `font-mono`                                   |\n| Text align      | `text-left` `text-center` `text-right` `text-justify`                  |\n| Text color      | `text-black` `text-white` `text-{color}-{shade}`                       |\n| Line height     | `leading-none` `leading-tight` `leading-snug` `leading-normal`         |\n| Letter spacing  | `tracking-tight` `tracking-normal` `tracking-wide`                     |\n| Text decoration | `underline` `overline` `line-through` `no-underline`                   |\n| Text transform  | `uppercase` `lowercase` `capitalize` `normal-case`                     |\n| Text overflow   | `truncate` `text-ellipsis` `text-clip`                                 |\n| Whitespace      | `whitespace-normal` `whitespace-nowrap` `whitespace-pre`               |\n\n### Backgrounds and borders\n\n| Purpose       | Classes                                                                  |\n|---------------|--------------------------------------------------------------------------|\n| Background    | `bg-white` `bg-{color}-{shade}` `bg-transparent` `bg-blue-500\u002F50`        |\n| Gradient      | `bg-linear-to-r` `bg-linear-45` `from-{color}` `via-{color}` `to-{color}`|\n| Border width  | `border` `border-0` `border-2` `border-4` `border-t` `border-r`          |\n| Border color  | `border-gray-200` `border-{color}-{shade}` `border-transparent`          |\n| Border style  | `border-solid` `border-dashed` `border-dotted` `border-none`             |\n| Radius        | `rounded-none` `rounded-sm` `rounded` `rounded-md` `rounded-lg` `rounded-full` |\n| Ring          | `ring` `ring-2` `ring-{color}-{shade}` `ring-offset-2`                   |\n\nv4 renamed `bg-gradient-*` to `bg-linear-*`.\n\n### Effects and motion\n\n| Purpose       | Classes                                                                  |\n|---------------|--------------------------------------------------------------------------|\n| Shadow        | `shadow-sm` `shadow` `shadow-md` `shadow-lg` `shadow-xl` `shadow-none`   |\n| Opacity       | `opacity-0` `opacity-25` `opacity-50` `opacity-75` `opacity-100`         |\n| Blur          | `blur-none` `blur-sm` `blur` `blur-md` `blur-lg`                         |\n| Backdrop blur | `backdrop-blur-sm` `backdrop-blur` `backdrop-blur-md`                    |\n| Transition    | `transition-none` `transition` `transition-colors` `transition-transform`|\n| Duration      | `duration-75` `duration-150` `duration-300` `duration-500` `duration-1000` |\n| Timing        | `ease-linear` `ease-in` `ease-out` `ease-in-out`                         |\n| Animation     | `animate-spin` `animate-ping` `animate-pulse` `animate-bounce`           |\n| Transform     | `scale-50` ... `scale-150` `rotate-45` `translate-x-4` `translate-y-4`   |\n\n### Breakpoints\n\n| Prefix | Min-width | Typical use             |\n|--------|-----------|-------------------------|\n| (none) | 0px       | Mobile-first base       |\n| `sm:`  | 640px     | Large phones, landscape |\n| `md:`  | 768px     | Tablets                 |\n| `lg:`  | 1024px    | Laptops                 |\n| `xl:`  | 1280px    | Desktops                |\n| `2xl:` | 1536px    | Large screens           |\n\n### State variants\n\n| Variant            | Trigger                                  |\n|--------------------|------------------------------------------|\n| `hover:`           | Mouse hover                              |\n| `focus:`           | Element focused                          |\n| `focus-visible:`   | Keyboard focus (recommended over focus:) |\n| `active:`          | Being clicked\u002Fpressed                    |\n| `disabled:`        | Disabled form element                    |\n| `first:` `last:`   | First\u002Flast child                         |\n| `odd:` `even:`     | Odd\u002Feven children                        |\n| `dark:`            | Dark mode                                |\n| `motion-reduce:`   | Prefers reduced motion                   |\n| `@sm:` `@md:` etc. | Container query breakpoints (v4)         |\n| `not-hover:`       | Inverse of hover (v4)                    |\n\n### Accessibility utilities\n\n| Purpose            | Classes                                             |\n|--------------------|-----------------------------------------------------|\n| Screen reader only | `sr-only` `not-sr-only`                             |\n| Focus ring         | `focus-visible:ring-2 focus-visible:ring-blue-500`  |\n| Reduced motion     | `motion-reduce:transition-none`                     |\n| Forced colors      | `forced-colors:border`                              |\n\nAlways include `focus-visible:` ring\u002Foutline styles on interactive\nelements. Use `sr-only` for labels on icon-only buttons. Text on\ncolored backgrounds must meet WCAG AA contrast (4.5:1 normal, 3:1\nlarge). Click targets should be at least 24×24 CSS pixels\n(WCAG 2.5.8).\n\n### Anti-patterns\n\n- **Class string builders** (`` `text-${size}` ``) — the scanner\n  can't detect them; use a lookup map\n- **Overusing arbitrary values** — treat `w-[347px]` as a missing\n  token and add it to `@theme`\n- **Nesting utilities in CSS** — defeats the utility-first approach\n- **Ignoring accessibility** — skipping focus states, contrast, or\n  `motion-reduce:` will come back as audits\n- **Not using `@theme`** — scattered hardcoded values destroy\n  consistency and make dark mode painful\n\n### Further reading\n\n- [Tailwind CSS v4 announcement](https:\u002F\u002Ftailwindcss.com\u002Fblog\u002Ftailwindcss-v4)\n- [Official documentation](https:\u002F\u002Ftailwindcss.com\u002Fdocs)\n",{"name":5,"metadata":49,"description":56},{"processkit":50},{"id":51,"created":52,"version":53,"category":54,"apiVersion":55},"SKILL-tailwind",1775433600000,"1.1.0","engineering","processkit.projectious.work\u002Fv1","Tailwind CSS v4 — utility-first styling, responsive design, dark mode, and component extraction. Use when building or reviewing Tailwind-based UIs, setting up Tailwind v4, or designing responsive or dark-mode styling.\n","main","4876a92620ee792aac2ac9a1a806322d8a572367","archive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fengineering\u002Ftailwind","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit","https:\u002F\u002Fprojectious-work.github.io\u002Fprocesskit\u002F","https:\u002F\u002Fgithub.com\u002Fprojectious-work","2026-11-11 23:24:18",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add projectious-work\u002Fprocesskit --skill tailwind",{"tool":70,"command":71},"bunx","bunx skills add projectious-work\u002Fprocesskit --skill tailwind",{"tool":73,"command":74},"pnpm","pnpm dlx skills add projectious-work\u002Fprocesskit --skill tailwind","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fengineering\u002Ftailwind\u002FSKILL.md",true,[78],{"path":79,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002Fcheatsheet.md","REFERENCE","参考文档",9043,"https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Farchive\u002Fprocesskit-install-20261101\u002Fcontext\u002Ftemplates\u002Fprocesskit\u002Fv0.17.0\u002Fcontext\u002Fskills\u002Fengineering\u002Ftailwind\u002Freferences\u002Fcheatsheet.md",[85,109,128,149,166,184],{"skillNo":86,"name":87,"nameZh":6,"description":88,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":89,"categories":90,"keywords":94,"publishedAt":44},"01M6X5MTC89B4ZGXW3JVSQCPF8","skill-management","Manage Skill package manifests as v1 ontology entities.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fskill-management\u002FSKILL.md",[91],{"categoryNo":92,"categoryName":93,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[95,96,97,98,99,100,40,101,102,103,87,104,105,106,28,107,108],"management","skill management","create","update","package","alpha","list","manage","ontology","get","as","manifests","skill package","transition",{"skillNo":110,"name":111,"nameZh":6,"description":112,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":113,"categories":114,"keywords":116,"publishedAt":44},"01M6X5MCV74NHW5MEDNHZRF2C8","schema-management","Manage generated processkit schema contracts through deterministic MCP rebuild and inspection workflows.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fschema-management\u002FSKILL.md",[115],{"categoryNo":92,"categoryName":93,"taxonomyType":21,"taxonomyTypeDesc":22},[95,117,118,119,120,121,100,40,122,123,102,124,125,126,104,127,29],"schema","schema management","MCP","workflows","validation","generated","rebuild","contracts","wed","deterministic","contract",{"skillNo":129,"name":130,"nameZh":6,"description":131,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":132,"categories":133,"keywords":134,"publishedAt":44},"01M6X5M5G6YJ96AMZGSCZJ1D13","proposition-management","Record claims, risks, beliefs, world facts, WSJF estimates, and assumptions through the Proposition interface.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fproposition-management\u002FSKILL.md",[],[95,135,136,97,98,137,100,40,138,139,140,141,104,142,143,144,145,146,147,148],"proposition","proposition management","index","log","world","record","query","creation","event","interface","updates","facts","claims","WSJF",{"skillNo":150,"name":151,"nameZh":6,"description":152,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":153,"categories":154,"keywords":155,"publishedAt":44},"01M6X5KMQ83QN9M6MPWZM7344F","ontology-management","Manage generated v1 ontology entities that do not require a dedicated domain server.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fontology-management\u002FSKILL.md",[],[95,103,156,97,100,157,158,122,159,138,102,160,161,104,162,163,143,164,28,165],"ontology management","lifecycle","archive","roadmap","do","domain","iteration","keep","measurement","generic",{"skillNo":167,"name":168,"nameZh":6,"description":169,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":170,"categories":171,"keywords":172,"publishedAt":44},"01M6X5KCY2DN3SM21RERSFNEBT","okf-compatibility","Import, export, and validate conformant Open Knowledge Format bundles.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fokf-compatibility\u002FSKILL.md",[],[173,174,175,176,100,177,178,179,40,180,181,182,183],"okf","compatibility","okf compatibility","validate","open","knowledge","format","export","bundles","bundle","import",{"skillNo":185,"name":186,"nameZh":6,"description":187,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":188,"categories":189,"keywords":190,"publishedAt":44},"01M6X5JA8S5PNGJVFW4EQY8T83","capability-management","Manage versioned Capability entities and their governed lifecycle.","https:\u002F\u002Fgithub.com\u002Fprojectious-work\u002Fprocesskit\u002Fblob\u002Fmain\u002Fsrc\u002Fcontext\u002Fskills\u002Fprocesskit\u002Fcapability-management\u002FSKILL.md",[],[95,191,192,97,98,137,100,157,40,101,138,193,102,140,104,163,143,144,194,108],"capability","capability management","queries","changes"]