@biggora/claude-plugins 1.1.1 → 1.2.2

package/src/skills/tailwindcss-best-practices/references/features-content-detection.md

@@ -0,0 +1,175 @@
+---
+name: features-content-detection
+description: How Tailwind detects classes in source files and how to customize content scanning
+---
+
+# Detecting Classes in Source Files
+
+Tailwind scans your project for utility classes and generates CSS based on what you've actually used.
+
+## How Classes Are Detected
+
+Tailwind treats all source files as plain text and looks for tokens that could be class names:
+
+```jsx
+export function Button({ color, children }) {
+  const colors = {
+    black: "bg-black text-white",
+    blue: "bg-blue-500 text-white",
+  };
+
+  return (
+    <button className={`${colors[color]} rounded-full px-2 py-1.5`}>
+      {children}
+    </button>
+  );
+}
+```
+
+Tailwind detects `bg-black`, `text-white`, `bg-blue-500`, `rounded-full`, `px-2`, and `py-1.5` from this file.
+
+## Dynamic Class Names
+
+Tailwind scans files as plain text, so it can't understand string concatenation or interpolation.
+
+### ❌ Don't Construct Classes Dynamically
+
+```html
+<div class="text-{{ error ? 'red' : 'green' }}-600"></div>
+```
+
+The strings `text-red-600` and `text-green-600` don't exist in the file, so Tailwind won't generate them.
+
+### ✅ Use Complete Class Names
+
+```html
+<div class="{{ error ? 'text-red-600' : 'text-green-600' }}">
+  Content
+</div>
+```
+
+### ❌ Don't Build Classes from Props
+
+```jsx
+function Button({ color, children }) {
+  return <button className={`bg-${color}-600 hover:bg-${color}-500`}>{children}</button>;
+}
+```
+
+### ✅ Map Props to Static Classes
+
+```jsx
+function Button({ color, children }) {
+  const colorVariants = {
+    blue: "bg-blue-600 hover:bg-blue-500",
+    red: "bg-red-600 hover:bg-red-500",
+  };
+
+  return <button className={`${colorVariants[color]} ...`}>{children}</button>;
+}
+```
+
+## Which Files Are Scanned
+
+Tailwind scans every file in your project except:
+
+- Files in `.gitignore`
+- Files in `node_modules`
+- Binary files (images, videos, zip files)
+- CSS files
+- Common package manager lock files
+
+## Explicitly Registering Sources
+
+Use `@source` to explicitly register source paths:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@acmecorp/ui-lib";
+```
+
+This is useful for external libraries built with Tailwind that are in `.gitignore`.
+
+## Setting Base Path
+
+Set the base path for source detection:
+
+```css
+@import "tailwindcss" source("../src");
+```
+
+Useful in monorepos where build commands run from the root.
+
+## Ignoring Specific Paths
+
+Use `@source not` to ignore paths:
+
+```css
+@import "tailwindcss";
+@source not "../src/components/legacy";
+```
+
+## Disabling Automatic Detection
+
+Use `source(none)` to disable automatic detection:
+
+```css
+@import "tailwindcss" source(none);
+
+@source "../admin";
+@source "../shared";
+```
+
+Useful for projects with multiple Tailwind stylesheets.
+
+## Safelisting Utilities
+
+Force Tailwind to generate specific classes with `@source inline()`:
+
+```css
+@import "tailwindcss";
+@source inline("underline");
+```
+
+### Safelisting with Variants
+
+Generate classes with variants:
+
+```css
+@import "tailwindcss";
+@source inline("{hover:,focus:,}underline");
+```
+
+### Safelisting with Ranges
+
+Use brace expansion to generate multiple classes:
+
+```css
+@import "tailwindcss";
+@source inline("{hover:,}bg-red-{50,{100..900..100},950}");
+```
+
+This generates `bg-red-50` through `bg-red-950` with hover variants.
+
+## Explicitly Excluding Classes
+
+Use `@source not inline()` to prevent specific classes from being generated:
+
+```css
+@import "tailwindcss";
+@source not inline("{hover:,focus:,}bg-red-{50,{100..900..100},950}");
+```
+
+## Key Points
+
+- Tailwind scans files as plain text
+- Always use complete class names, never construct them dynamically
+- Map props/state to static class names
+- Use `@source` to explicitly register or ignore paths
+- Use `@source inline()` to safelist utilities
+- Brace expansion works in inline sources for ranges
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/detecting-classes-in-source-files
+-->

package/src/skills/tailwindcss-best-practices/references/features-custom-styles.md

@@ -0,0 +1,203 @@
+---
+name: features-custom-styles
+description: Adding custom styles, utilities, variants, and working with arbitrary values
+---
+
+# Adding Custom Styles
+
+Tailwind is designed to be extensible. This guide covers customizing your theme, using arbitrary values, adding custom CSS, and extending the framework.
+
+## Customizing Your Theme
+
+Add custom design tokens using `@theme`:
+
+```css
+@import "tailwindcss";
+
+@theme {
+  --font-display: "Satoshi", "sans-serif";
+  --breakpoint-3xl: 120rem;
+  --color-brand-500: oklch(0.65 0.2 250);
+  --ease-fluid: cubic-bezier(0.3, 0, 0, 1);
+}
+```
+
+## Arbitrary Values
+
+Use square bracket notation for one-off values that don't belong in your theme:
+
+```html
+<!-- Arbitrary values -->
+<div class="top-[117px] bg-[#bada55] text-[22px]">
+  Content
+</div>
+
+<!-- With variants -->
+<div class="top-[117px] lg:top-[344px]">
+  Content
+</div>
+```
+
+### CSS Variables as Arbitrary Values
+
+Reference CSS variables:
+
+```html
+<div class="fill-(--my-brand-color)">
+  Content
+</div>
+```
+
+This is shorthand for `fill-[var(--my-brand-color)]`.
+
+## Arbitrary Properties
+
+Use square brackets for CSS properties Tailwind doesn't have utilities for:
+
+```html
+<div class="[mask-type:luminance]">
+  Content
+</div>
+
+<!-- With variants -->
+<div class="[mask-type:luminance] hover:[mask-type:alpha]">
+  Content
+</div>
+```
+
+### CSS Variables
+
+Set CSS variables with arbitrary properties:
+
+```html
+<div class="[--scroll-offset:56px] lg:[--scroll-offset:44px]">
+  Content
+</div>
+```
+
+## Arbitrary Variants
+
+Create custom selectors on the fly:
+
+```html
+<ul>
+  <li class="lg:[&:nth-child(-n+3)]:hover:underline">Item</li>
+</ul>
+```
+
+## Handling Whitespace
+
+Use underscores for spaces in arbitrary values:
+
+```html
+<div class="grid-cols-[1fr_500px_2fr]">
+  Content
+</div>
+```
+
+Tailwind converts underscores to spaces, except in contexts where underscores are valid (like URLs).
+
+## Custom Utilities
+
+Add custom utilities with `@utility`:
+
+```css
+@import "tailwindcss";
+
+@utility tab-4 {
+  tab-size: 4;
+}
+```
+
+Now you can use `tab-4` utility class, and it works with variants:
+
+```html
+<div class="tab-4 hover:tab-8">
+  Content
+</div>
+```
+
+## Custom Variants
+
+Add custom variants with `@custom-variant`:
+
+```css
+@import "tailwindcss";
+
+@custom-variant theme-midnight (&:where([data-theme="midnight"] *));
+```
+
+Now you can use `theme-midnight:` variant:
+
+```html
+<div class="theme-midnight:bg-black theme-midnight:text-white">
+  Content
+</div>
+```
+
+## Using Variants in CSS
+
+Apply Tailwind variants to custom CSS with `@variant`:
+
+```css
+.my-element {
+  background: white;
+  
+  @variant dark {
+    background: black;
+  }
+  
+  @variant hover {
+    background: gray;
+  }
+}
+```
+
+## Base Styles
+
+Add base styles to the `base` layer:
+
+```css
+@layer base {
+  h1 {
+    font-size: var(--text-2xl);
+    font-weight: 600;
+  }
+  
+  h2 {
+    font-size: var(--text-xl);
+    font-weight: 600;
+  }
+  
+  a {
+    color: var(--color-blue-600);
+    text-decoration-line: underline;
+  }
+}
+```
+
+## Component Styles
+
+Add component styles to the `components` layer:
+
+```css
+@layer components {
+  .btn-primary {
+    @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded;
+  }
+}
+```
+
+## Key Points
+
+- Use `@theme` to customize design tokens
+- Arbitrary values with `[]` for one-off values
+- Arbitrary properties for CSS properties without utilities
+- `@utility` for custom utilities
+- `@custom-variant` for custom variants
+- `@layer` for organizing base and component styles
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/adding-custom-styles
+-->

package/src/skills/tailwindcss-best-practices/references/features-dark-mode.md

@@ -0,0 +1,137 @@
+---
+name: features-dark-mode
+description: Implementing dark mode with Tailwind's dark variant and custom dark mode strategies
+---
+
+# Dark Mode
+
+Tailwind includes a `dark` variant that lets you style your site differently when dark mode is enabled.
+
+## Overview
+
+Use the `dark:` variant to apply styles in dark mode:
+
+```html
+<div class="bg-white dark:bg-gray-800 text-gray-900 dark:text-white">
+  Content
+</div>
+```
+
+## Default Behavior
+
+By default, the `dark` variant uses the `prefers-color-scheme` CSS media feature:
+
+```css
+@media (prefers-color-scheme: dark) {
+  .dark\:bg-gray-800 {
+    background-color: rgb(31 41 55);
+  }
+}
+```
+
+## Manual Toggle with Class
+
+Override the `dark` variant to use a class selector:
+
+```css
+@import "tailwindcss";
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+Now dark mode utilities apply when the `dark` class is present:
+
+```html
+<html class="dark">
+  <body>
+    <div class="bg-white dark:bg-black">Content</div>
+  </body>
+</html>
+```
+
+## Manual Toggle with Data Attribute
+
+Use a data attribute instead:
+
+```css
+@import "tailwindcss";
+
+@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));
+```
+
+```html
+<html data-theme="dark">
+  <body>
+    <div class="bg-white dark:bg-black">Content</div>
+  </body>
+</html>
+```
+
+## Three-Way Theme Toggle
+
+Support light mode, dark mode, and system preference:
+
+```js
+// On page load
+document.documentElement.classList.toggle(
+  "dark",
+  localStorage.theme === "dark" ||
+    (!("theme" in localStorage) && 
+     window.matchMedia("(prefers-color-scheme: dark)").matches)
+);
+
+// Set light mode
+localStorage.theme = "light";
+document.documentElement.classList.remove("dark");
+
+// Set dark mode
+localStorage.theme = "dark";
+document.documentElement.classList.add("dark");
+
+// Respect system preference
+localStorage.removeItem("theme");
+document.documentElement.classList.toggle(
+  "dark",
+  window.matchMedia("(prefers-color-scheme: dark)").matches
+);
+```
+
+## Common Patterns
+
+### Cards
+
+```html
+<div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg dark:shadow-none">
+  <h2 class="text-gray-900 dark:text-white">Title</h2>
+  <p class="text-gray-500 dark:text-gray-400">Description</p>
+</div>
+```
+
+### Borders
+
+```html
+<div class="border border-gray-200 dark:border-gray-700">
+  Content
+</div>
+```
+
+### Buttons
+
+```html
+<button class="bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 text-white">
+  Button
+</button>
+```
+
+## Key Points
+
+- Use `dark:` variant for dark mode styles
+- Default uses `prefers-color-scheme` media query
+- Override with `@custom-variant` for manual toggles
+- Can use class or data attribute selectors
+- Combine with responsive variants: `dark:md:bg-gray-800`
+
+<!--
+Source references:
+- https://tailwindcss.com/docs/dark-mode
+-->