From 3fbb9a18372f2b6a675dd6c039ba52be76f3eeb4 Mon Sep 17 00:00:00 2001 From: TheSiahxyz <164138827+TheSiahxyz@users.noreply.github.com> Date: Fri, 16 Jan 2026 08:30:14 +0900 Subject: updates --- ui/tailwindcss/.claude/commands/add-plugin.md | 721 ++++++++++++++++++++++++++ 1 file changed, 721 insertions(+) create mode 100644 ui/tailwindcss/.claude/commands/add-plugin.md (limited to 'ui/tailwindcss/.claude/commands/add-plugin.md') diff --git a/ui/tailwindcss/.claude/commands/add-plugin.md b/ui/tailwindcss/.claude/commands/add-plugin.md new file mode 100644 index 0000000..36f16ed --- /dev/null +++ b/ui/tailwindcss/.claude/commands/add-plugin.md @@ -0,0 +1,721 @@ +--- +name: add-plugin +description: Add and configure TailwindCSS plugins for extended functionality, forms, typography, animations, and custom utilities +tools: Bash, Edit, Read, Write +--- + +# Add TailwindCSS Plugin + +This command helps you add, configure, and optimize TailwindCSS plugins to extend functionality and enhance your design system. + +## What This Command Does + +1. **Plugin Installation** + - Installs official and community TailwindCSS plugins + - Configures plugin settings for optimal performance + - Integrates plugins with existing configuration + - Updates content paths for plugin-specific classes + +2. **Configuration Setup** + - Configures plugin options and customizations + - Sets up plugin-specific utility classes + - Optimizes for CSS bundle size and purging + - Integrates with design system tokens + +3. **Usage Examples** + - Provides implementation examples for each plugin + - Shows best practices and common patterns + - Demonstrates responsive and interactive usage + - Includes accessibility considerations + +4. **Performance Optimization** + - Configures plugins for optimal bundle size + - Sets up effective purging strategies + - Optimizes for build performance + - Monitors plugin impact on CSS output + +## Official Plugins + +### Typography Plugin (@tailwindcss/typography) + +#### Installation and Setup + +```bash +# Install typography plugin +npm install -D @tailwindcss/typography + +# Or with yarn +yarn add -D @tailwindcss/typography +``` + +#### Configuration + +```javascript +// tailwind.config.js +module.exports = { + theme: { + extend: { + typography: ({ theme }) => ({ + // Default prose styles + DEFAULT: { + css: { + maxWidth: 'none', + color: theme('colors.gray.700'), + '[class~="lead"]': { + color: theme('colors.gray.600'), + fontSize: theme('fontSize.xl')[0], + lineHeight: theme('fontSize.xl')[1].lineHeight, + }, + a: { + color: theme('colors.blue.600'), + textDecoration: 'none', + fontWeight: theme('fontWeight.medium'), + '&:hover': { + color: theme('colors.blue.700'), + textDecoration: 'underline', + }, + }, + 'h1, h2, h3, h4, h5, h6': { + color: theme('colors.gray.900'), + fontWeight: theme('fontWeight.bold'), + }, + h1: { + fontSize: theme('fontSize.4xl')[0], + lineHeight: theme('fontSize.4xl')[1].lineHeight, + }, + h2: { + fontSize: theme('fontSize.3xl')[0], + lineHeight: theme('fontSize.3xl')[1].lineHeight, + }, + h3: { + fontSize: theme('fontSize.2xl')[0], + lineHeight: theme('fontSize.2xl')[1].lineHeight, + }, + code: { + color: theme('colors.gray.900'), + backgroundColor: theme('colors.gray.100'), + padding: theme('spacing.1'), + borderRadius: theme('borderRadius.sm'), + fontSize: theme('fontSize.sm')[0], + }, + 'pre code': { + backgroundColor: 'transparent', + padding: 0, + }, + pre: { + backgroundColor: theme('colors.gray.900'), + color: theme('colors.gray.100'), + padding: theme('spacing.4'), + borderRadius: theme('borderRadius.lg'), + overflow: 'auto', + }, + blockquote: { + borderLeftWidth: theme('borderWidth.4'), + borderLeftColor: theme('colors.gray.300'), + paddingLeft: theme('spacing.4'), + fontStyle: 'italic', + color: theme('colors.gray.600'), + }, + }, + }, + + // Dark mode typography + invert: { + css: { + '--tw-prose-body': theme('colors.gray.300'), + '--tw-prose-headings': theme('colors.gray.100'), + '--tw-prose-lead': theme('colors.gray.400'), + '--tw-prose-links': theme('colors.blue.400'), + '--tw-prose-bold': theme('colors.gray.100'), + '--tw-prose-counters': theme('colors.gray.400'), + '--tw-prose-bullets': theme('colors.gray.500'), + '--tw-prose-hr': theme('colors.gray.700'), + '--tw-prose-quotes': theme('colors.gray.200'), + '--tw-prose-quote-borders': theme('colors.gray.700'), + '--tw-prose-captions': theme('colors.gray.400'), + '--tw-prose-code': theme('colors.gray.100'), + '--tw-prose-pre-code': theme('colors.gray.100'), + '--tw-prose-pre-bg': theme('colors.gray.800'), + '--tw-prose-th-borders': theme('colors.gray.600'), + '--tw-prose-td-borders': theme('colors.gray.700'), + }, + }, + + // Size variants + sm: { + css: { + fontSize: theme('fontSize.sm')[0], + lineHeight: theme('fontSize.sm')[1].lineHeight, + h1: { fontSize: theme('fontSize.2xl')[0] }, + h2: { fontSize: theme('fontSize.xl')[0] }, + h3: { fontSize: theme('fontSize.lg')[0] }, + }, + }, + + lg: { + css: { + fontSize: theme('fontSize.lg')[0], + lineHeight: theme('fontSize.lg')[1].lineHeight, + h1: { fontSize: theme('fontSize.5xl')[0] }, + h2: { fontSize: theme('fontSize.4xl')[0] }, + h3: { fontSize: theme('fontSize.3xl')[0] }, + }, + }, + + xl: { + css: { + fontSize: theme('fontSize.xl')[0], + lineHeight: theme('fontSize.xl')[1].lineHeight, + h1: { fontSize: theme('fontSize.6xl')[0] }, + h2: { fontSize: theme('fontSize.5xl')[0] }, + h3: { fontSize: theme('fontSize.4xl')[0] }, + }, + }, + }), + }, + }, + plugins: [ + require('@tailwindcss/typography'), + ], +} +``` + +#### Usage Examples + +```html + +
+

Article Title

+

This is a lead paragraph with emphasis.

+

Regular paragraph content with links and bold text.

+ +
+ This is a blockquote with proper styling. +
+ + 
console.log('Code blocks are styled too')
+
+ + +
+

Dark Mode Compatible

+

Content that adapts to dark themes.

+
+ + +
Small typography
+
Large typography
+
Extra large typography
+ + +
+

Full width content without prose max-width constraint.

+
+``` + +### Forms Plugin (@tailwindcss/forms) + +#### Installation and Setup + +```bash +# Install forms plugin +npm install -D @tailwindcss/forms +``` + +#### Configuration + +```javascript +// tailwind.config.js +module.exports = { + plugins: [ + require('@tailwindcss/forms')({ + strategy: 'class', // 'base' or 'class' + }), + ], +} +``` + +#### Usage Examples + +```html + +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ +
+ +
+ +
+ + +
+
+ +
+ + +
+ + +
+``` + +### Aspect Ratio Plugin (@tailwindcss/aspect-ratio) + +#### Installation and Setup + +```bash +# Install aspect ratio plugin +npm install -D @tailwindcss/aspect-ratio +``` + +#### Configuration + +```javascript +// tailwind.config.js +module.exports = { + plugins: [ + require('@tailwindcss/aspect-ratio'), + ], +} +``` + +#### Usage Examples + +```html + +
+ +
+ + +
+ Square image +
+ + +
+
+
+ Card 1 +
+
+

Card Title 1

+
+
+ +
+
+ Card 2 +
+
+

Card Title 2

+
+
+
+ + +
+ +
+ +
+ Square +
+ + +
+
+ 4:3 Aspect Ratio +
+
+``` + +### Container Queries Plugin (@tailwindcss/container-queries) + +#### Installation and Setup + +```bash +# Install container queries plugin +npm install -D @tailwindcss/container-queries +``` + +#### Configuration + +```javascript +// tailwind.config.js +module.exports = { + plugins: [ + require('@tailwindcss/container-queries'), + ], +} +``` + +#### Usage Examples + +```html + +
+
+ +
+

Product Title

+

Product description

+
+ $99.99 + +
+
+
+
+ + +
+
+
+

Card Title

+

Card content that adapts to container size.

+
+
+
+ + +
+ + +
+
+

Main Content

+
+
+
+``` + +## Popular Community Plugins + +### Line Clamp Plugin (@tailwindcss/line-clamp) + +#### Installation and Setup + +```bash +# Install line clamp plugin (now built into Tailwind v3.3+) +npm install -D @tailwindcss/line-clamp +``` + +#### Usage Examples + +```html + +

+ This is a long paragraph that will be clamped to exactly 3 lines with an ellipsis at the end when it overflows beyond the specified number of lines. +

+ + +
+

Single line with ellipsis

+

Two lines maximum with ellipsis

+

Up to four lines with ellipsis

+

No line clamping applied

+
+ + +

+ Responsive line clamping that shows more lines on larger screens. +

+``` + +### Animations Plugin (tailwindcss-animate) + +#### Installation and Setup + +```bash +# Install animations plugin +npm install -D tailwindcss-animate +``` + +#### Configuration + +```javascript +// tailwind.config.js +module.exports = { + plugins: [ + require('tailwindcss-animate'), + ], +} +``` + +#### Usage Examples + +```html + +
Fades in smoothly
+
Slides up from bottom
+
Scales in from center
+
Bounces in with spring effect
+ + +
+
+ + + + +
+
+ Wiggle on group hover +
+
+ + +
+
Item 1
+
Item 2
+
Item 3
+
+``` + +### Debugging Plugin (tailwindcss-debug-screens) + +#### Installation and Setup + +```bash +# Install debug plugin (development only) +npm install -D tailwindcss-debug-screens +``` + +#### Configuration + +```javascript +// tailwind.config.js +module.exports = { + plugins: [ + process.env.NODE_ENV === 'development' && require('tailwindcss-debug-screens'), + ].filter(Boolean), +} +``` + +#### Usage + +```html + + + + +``` + +## Custom Plugin Development + +### Creating a Custom Plugin + +```javascript +// plugins/custom-utilities.js +const plugin = require('tailwindcss/plugin') + +module.exports = plugin(function({ addUtilities, addComponents, theme }) { + // Add custom utilities + addUtilities({ + '.text-shadow': { + textShadow: '2px 2px 4px rgba(0, 0, 0, 0.1)', + }, + '.text-shadow-lg': { + textShadow: '4px 4px 8px rgba(0, 0, 0, 0.2)', + }, + '.scrollbar-hide': { + '-ms-overflow-style': 'none', + 'scrollbar-width': 'none', + '&::-webkit-scrollbar': { + display: 'none', + }, + }, + '.backdrop-blur-xs': { + backdropFilter: 'blur(2px)', + }, + }) + + // Add custom components + addComponents({ + '.btn-primary': { + backgroundColor: theme('colors.blue.600'), + color: theme('colors.white'), + padding: `${theme('spacing.2')} ${theme('spacing.4')}`, + borderRadius: theme('borderRadius.md'), + fontWeight: theme('fontWeight.medium'), + '&:hover': { + backgroundColor: theme('colors.blue.700'), + }, + '&:focus': { + outline: 'none', + boxShadow: `0 0 0 3px ${theme('colors.blue.500')}33`, + }, + }, + '.card': { + backgroundColor: theme('colors.white'), + borderRadius: theme('borderRadius.lg'), + boxShadow: theme('boxShadow.md'), + padding: theme('spacing.6'), + }, + }) +}) +``` + +#### Using Custom Plugin + +```javascript +// tailwind.config.js +module.exports = { + plugins: [ + require('./plugins/custom-utilities'), + ], +} +``` + +### Advanced Custom Plugin with Variants + +```javascript +// plugins/advanced-utilities.js +const plugin = require('tailwindcss/plugin') + +module.exports = plugin( + function({ addUtilities, matchUtilities, theme }) { + // Static utilities + addUtilities({ + '.writing-vertical': { + 'writing-mode': 'vertical-rl', + }, + }) + + // Dynamic utilities with arbitrary values + matchUtilities( + { + 'text-shadow': (value) => ({ + textShadow: value, + }), + }, + { values: theme('textShadow') } + ) + + matchUtilities( + { + 'animation-delay': (value) => ({ + animationDelay: value, + }), + }, + { values: theme('animationDelay') } + ) + }, + { + // Extend theme + theme: { + textShadow: { + sm: '1px 1px 2px rgba(0, 0, 0, 0.1)', + DEFAULT: '2px 2px 4px rgba(0, 0, 0, 0.1)', + lg: '4px 4px 8px rgba(0, 0, 0, 0.15)', + }, + animationDelay: { + '75': '75ms', + '100': '100ms', + '150': '150ms', + '200': '200ms', + '300': '300ms', + '500': '500ms', + '700': '700ms', + '1000': '1000ms', + }, + }, + } +) +``` + +## Plugin Performance Optimization + +### Bundle Size Analysis Script + +```javascript +// scripts/analyze-plugins.js +const fs = require('fs') +const postcss = require('postcss') +const tailwindcss = require('tailwindcss') + +async function analyzePluginImpact(configPath) { + // Base configuration without plugins + const baseConfig = { + content: ['./test.html'], + plugins: [], + } + + // Configuration with plugins + const pluginConfig = require(configPath) + + // Generate CSS for both configurations + const baseCSS = await generateCSS(baseConfig) + const pluginCSS = await generateCSS(pluginConfig) + + console.log('Plugin Impact Analysis:') + console.log(`Base CSS size: ${baseCSS.length} bytes`) + console.log(`With plugins: ${pluginCSS.length} bytes`) + console.log(`Difference: ${pluginCSS.length - baseCSS.length} bytes`) + console.log(`Increase: ${(((pluginCSS.length - baseCSS.length) / baseCSS.length) * 100).toFixed(2)}%`) +} + +async function generateCSS(config) { + const result = await postcss([tailwindcss(config)]) + .process('@tailwind base; @tailwind components; @tailwind utilities;', { from: undefined }) + + return result.css +} + +analyzePluginImpact('./tailwind.config.js') +``` + +Remember: **Choose plugins based on actual needs, configure them properly, and monitor their impact on bundle size and performance!** -- cgit v1.2.3