Tailwind CSS Plugins Official Plugins @tailwindcss/typography

Beautiful typographic defaults for content you don't control (Markdown, CMS content).

Installation npm install -D @tailwindcss/typography

@import "tailwindcss"; @plugin "@tailwindcss/typography";

Basic Usage

Size Modifiers Class Description prose-sm Smaller text (14px base) prose Default (16px base) prose-lg Larger text (18px base) prose-xl Extra large (20px base) prose-2xl Huge (24px base)

Color Themes

Dark Mode

Element Modifiers

Override specific elements:

Max Width Control

Escaping Prose Styles

Custom Class Name @plugin "@tailwindcss/typography" { className: wysiwyg; }

@tailwindcss/forms

Resets form elements to a consistent, easily-styleable baseline.

Installation npm install -D @tailwindcss/forms

@import "tailwindcss"; @plugin "@tailwindcss/forms";

Styled Elements

The plugin applies styles to:

input[type='text'] input[type='email'] input[type='password'] input[type='number'] input[type='url'] input[type='date'] input[type='datetime-local'] input[type='month'] input[type='week'] input[type='time'] input[type='search'] input[type='tel'] input[type='checkbox'] input[type='radio'] select select[multiple] textarea Basic Usage

Option 1

Option 2

Strategy: Class-Based

For opt-in styling (doesn't apply global resets):

@plugin "@tailwindcss/forms" { strategy: class; }

<input type="checkbox" class="form-checkbox rounded"> <input type="radio" class="form-radio"> Form Classes Reference Class Element form-input Text inputs form-textarea Textareas form-select Selects form-multiselect Multiple selects form-checkbox Checkboxes form-radio Radio buttons Styling Checkboxes/Radios <!-- Colored checkbox --> <input type="checkbox" class="rounded text-pink-500"> <!-- Accent color (native) --> <input type="checkbox" class="accent-purple-600"> <!-- Custom size --> <input type="checkbox" class="h-6 w-6 rounded text-blue-500"> @tailwindcss/container-queries Style elements based on their container's size instead of the viewport. Installation npm install -D @tailwindcss/container-queries @import "tailwindcss"; @plugin "@tailwindcss/container-queries"; Basic Usage <!-- Define a container --> <div class="@container"> <!-- Use container query breakpoints --> <div class="flex flex-col @md:flex-row @lg:gap-8"> <div class="@sm:text-lg @md:text-xl"> Responsive to container, not viewport </div> </div> </div> Container Breakpoints Prefix Width @xs 320px @sm 384px @md 448px @lg 512px @xl 576px @2xl 672px @3xl 768px @4xl 896px @5xl 1024px @6xl 1152px @7xl 1280px Named Containers <!-- Name the container --> <div class="@container/sidebar"> <!-- Reference by name --> <div class="@md/sidebar:flex"> Only flex when sidebar container is md </div> </div> <div class="@container/main"> <div class="@lg/main:grid-cols-3"> Grid when main container is lg </div> </div> Arbitrary Container Values <div class="@container"> <div class="@[400px]:flex @[600px]:grid"> Arbitrary breakpoint values </div> </div> Creating Custom Plugins (v4) CSS-Only Utilities For simple utilities, use the @utility directive instead of a JavaScript plugin: /* In your CSS file */ @utility content-auto { content-visibility: auto; } @utility text-balance { text-wrap: balance; } @utility scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; } @utility scrollbar-none::-webkit-scrollbar { display: none; } JavaScript Plugins For complex plugins requiring JavaScript: // plugins/my-plugin.js import plugin from 'tailwindcss/plugin' export default plugin(function({ addUtilities, addComponents, matchUtilities, theme }) { // Add static utilities addUtilities({ '.content-auto': { 'content-visibility': 'auto', }, '.text-balance': { 'text-wrap': 'balance', }, }) // Add components addComponents({ '.btn': { padding: theme('spacing.2') + ' ' + theme('spacing.4'), borderRadius: theme('borderRadius.lg'), fontWeight: theme('fontWeight.medium'), }, '.btn-primary': { backgroundColor: theme('colors.blue.500'), color: theme('colors.white'), '&:hover': { backgroundColor: theme('colors.blue.600'), }, }, }) // Add dynamic utilities matchUtilities( { 'text-shadow': (value) => ({ textShadow: value, }), }, { values: theme('textShadow') } ) }) Load in CSS: @import "tailwindcss"; @plugin "./plugins/my-plugin.js"; Plugin with Theme Extension // plugins/gradients.js import plugin from 'tailwindcss/plugin' export default plugin( function({ matchUtilities, theme }) { matchUtilities( { 'text-gradient': (value) => ({ backgroundImage: value, backgroundClip: 'text', color: 'transparent', }), }, { values: theme('textGradient') } ) }, { theme: { textGradient: { primary: 'linear-gradient(to right, #667eea, #764ba2)', secondary: 'linear-gradient(to right, #f093fb, #f5576c)', sunset: 'linear-gradient(to right, #fa709a, #fee140)', }, }, } ) Adding Custom Variants // plugins/variants.js import plugin from 'tailwindcss/plugin' export default plugin(function({ addVariant }) { // Peer states addVariant('peer-checked', ':merge(.peer):checked ~ &') // Group states addVariant('group-focus-visible', ':merge(.group):focus-visible &') // Data attributes addVariant('data-active', '&[data-active="true"]') addVariant('data-loading', '&[data-loading]') // Custom selectors addVariant('hocus', ['&:hover', '&:focus']) addVariant('not-first', '&:not(:first-child)') addVariant('not-last', '&:not(:last-child)') }) Community Plugins Popular Plugins Plugin Description tailwindcss-animate Animation utilities tailwindcss-motion Advanced motion/animation @headlessui/tailwindcss Headless UI variants tailwind-scrollbar Scrollbar styling tailwindcss-3d 3D transform utilities tailwindcss-fluid-type Fluid typography tailwindcss-animate npm install -D tailwindcss-animate @plugin "tailwindcss-animate"; <div class="animate-in fade-in slide-in-from-bottom-4 duration-500"> Animated content </div> <div class="animate-out fade-out slide-out-to-top-4 duration-300"> Exiting content </div> Best Practices 1. Load Only What You Need /* Only load plugins you actually use */ @plugin "@tailwindcss/typography"; /* @plugin "@tailwindcss/forms"; -- commented out if not using */ 2. Use CSS Utilities First Before creating a JavaScript plugin, try the @utility directive: /* Simple custom utility - no JS needed */ @utility glass { backdrop-filter: blur(10px); background: rgba(255, 255, 255, 0.1); } 3. Document Custom Plugins /** * @name Text Gradient Plugin * @description Adds text gradient utilities * @usage class="text-gradient-primary" */ export default plugin(...) 4. Test Plugin Compatibility When upgrading Tailwind, verify all plugins work with the new version: npm outdated | grep tailwind npm update @tailwindcss/typography @tailwindcss/forms </article> <a href="/" class="back-link">← <span data-i18n="detail.backToLeaderboard">返回排行榜</span></a> </div> <aside class="sidebar"> <section class="related-skills" id="relatedSkillsSection"> <h2 class="related-title" data-i18n="detail.relatedSkills">相关 Skills</h2> <div class="related-list" id="relatedSkillsList"> <a href="/zh-CN/skill/josiahsiegel/claude-plugin-marketplace/tailwindcss-advanced-layouts" class="related-card"> <div class="related-name">tailwindcss-advanced-layouts</div> <div class="related-meta"> <span class="related-owner">josiahsiegel</span> <span class="related-installs">3.4K</span> </div> <div class="related-desc">Tailwind CSS Advanced Layout Techniques CSS Grid Mastery Com...</div> </a> <a href="/zh-CN/skill/josiahsiegel/claude-plugin-marketplace/tailwindcss-animations" class="related-card"> <div class="related-name">tailwindcss-animations</div> <div class="related-meta"> <span class="related-owner">josiahsiegel</span> <span class="related-installs">987</span> </div> <div class="related-desc">Tailwind CSS Animations & Transitions Built-in Animations Sp...</div> </a> <a href="/zh-CN/skill/josiahsiegel/claude-plugin-marketplace/tailwindcss-mobile-first" class="related-card"> <div class="related-name">tailwindcss-mobile-first</div> <div class="related-meta"> <span class="related-owner">josiahsiegel</span> <span class="related-installs">903</span> </div> <div class="related-desc">Mobile-First Responsive Design (2025/2026) Core Philosophy ...</div> </a> <a href="/zh-CN/skill/josiahsiegel/claude-plugin-marketplace/docker-best-practices" class="related-card"> <div class="related-name">docker-best-practices</div> <div class="related-meta"> <span class="related-owner">josiahsiegel</span> <span class="related-installs">444</span> </div> <div class="related-desc">🚨 CRITICAL GUIDELINES Windows File Path Requirements MANDAT...</div> </a> <a href="/zh-CN/skill/josiahsiegel/claude-plugin-marketplace/tailwindcss-advanced-design-systems" class="related-card"> <div class="related-name">tailwindcss-advanced-design-systems</div> <div class="related-meta"> <span class="related-owner">josiahsiegel</span> <span class="related-installs">271</span> </div> <div class="related-desc">Tailwind CSS Advanced Design Systems Building Design Tokens ...</div> </a> <a href="/zh-CN/skill/josiahsiegel/claude-plugin-marketplace/tailwindcss-responsive-darkmode" class="related-card"> <div class="related-name">tailwindcss-responsive-darkmode</div> <div class="related-meta"> <span class="related-owner">josiahsiegel</span> <span class="related-installs">227</span> </div> <div class="related-desc">Tailwind CSS Responsive Design & Dark Mode (2025/2026) Respo...</div> </a> </div> </section> </aside> </div> </div> <script src="https://unpkg.com/i18next@23.11.5/i18next.min.js" defer></script> <script src="https://unpkg.com/i18next-browser-languagedetector@7.2.1/i18nextBrowserLanguageDetector.min.js" defer></script> <script defer> // Language resources - same pattern as index page const resources = { 'zh-CN': null, 'en': null, 'ja': null, 'ko': null, 'zh-TW': null, 'es': null, 'fr': null }; // Load language files (only current + fallback for performance) async function loadLanguageResources() { const savedLang = localStorage.getItem('i18nextLng') || 'en'; const langsToLoad = new Set([savedLang, 'en']); // current + fallback await Promise.all([...langsToLoad].map(async (lang) => { try { const response = await fetch(`/locales/${lang}.json`); if (response.ok) { resources[lang] = { translation: await response.json() }; } } catch (error) { console.warn(`Failed to load ${lang} language file:`, error); } })); } // Load a single language on demand (for language switching) async function loadLanguage(lang) { if (resources[lang]) return; try { const response = await fetch(`/locales/${lang}.json`); if (response.ok) { resources[lang] = { translation: await response.json() }; i18next.addResourceBundle(lang, 'translation', resources[lang].translation); } } catch (error) { console.warn(`Failed to load ${lang} language file:`, error); } } // Initialize i18next async function initI18n() { try { await loadLanguageResources(); // Filter out null values from resources const validResources = {}; for (const [lang, data] of Object.entries(resources)) { if (data !== null) { validResources[lang] = data; } } console.log('Loaded languages:', Object.keys(validResources)); console.log('zh-CN resource:', validResources['zh-CN']); console.log('detail.home in resource:', validResources['zh-CN']?.translation?.detail?.home); // 检查是否有保存的语言偏好 const savedLang = localStorage.getItem('i18nextLng'); // 如果没有保存的语言偏好，默认使用英文 const defaultLang = savedLang && ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'].includes(savedLang) ? savedLang : 'en'; await i18next .use(i18nextBrowserLanguageDetector) .init({ lng: defaultLang, // 强制设置初始语言 fallbackLng: 'en', supportedLngs: ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'], resources: validResources, detection: { order: ['localStorage'], // 只使用 localStorage，不检测浏览器语言 caches: ['localStorage'], lookupLocalStorage: 'i18nextLng' }, interpolation: { escapeValue: false } }); console.log('i18next initialized, language:', i18next.language); console.log('Test translation:', i18next.t('detail.home')); // Set initial language in selector const langSwitcher = document.getElementById('langSwitcher'); langSwitcher.value = i18next.language; // Update page language updatePageLanguage(); // Language switch event langSwitcher.addEventListener('change', async (e) => { await loadLanguage(e.target.value); // load on demand i18next.changeLanguage(e.target.value).then(() => { updatePageLanguage(); localStorage.setItem('i18nextLng', e.target.value); }); }); } catch (error) { console.error('i18next init failed:', error); } } // Translation helper function t(key, options = {}) { return i18next.t(key, options); } // Update all translatable elements function updatePageLanguage() { // Update HTML lang attribute document.documentElement.lang = i18next.language; // Update elements with data-i18n attribute document.querySelectorAll('[data-i18n]').forEach(el => { const key = el.getAttribute('data-i18n'); el.textContent = t(key); }); } // Copy command function function copyCommand() { const command = document.getElementById('installCommand').textContent; const btn = document.getElementById('copyBtn'); navigator.clipboard.writeText(command).then(() => { btn.textContent = t('copied'); btn.classList.add('copied'); setTimeout(() => { btn.textContent = t('copy'); btn.classList.remove('copied'); }, 2000); }).catch(() => { // Fallback for non-HTTPS const textArea = document.createElement('textarea'); textArea.value = command; textArea.style.position = 'fixed'; textArea.style.left = '-9999px'; document.body.appendChild(textArea); textArea.select(); document.execCommand('copy'); document.body.removeChild(textArea); btn.textContent = t('copied'); btn.classList.add('copied'); setTimeout(() => { btn.textContent = t('copy'); btn.classList.remove('copied'); }, 2000); }); } // Initialize document.getElementById('copyBtn').addEventListener('click', copyCommand); initI18n(); // 异步加载相关 Skills async function loadRelatedSkills() { const owner = 'josiahsiegel'; const skillName = 'tailwindcss-plugins'; const currentLang = 'zh-CN'; const listContainer = document.getElementById('relatedSkillsList'); const section = document.getElementById('relatedSkillsSection'); try { const response = await fetch(`/api/related-skills/${encodeURIComponent(owner)}/${encodeURIComponent(skillName)}?limit=6`); if (!response.ok) { throw new Error('Failed to load'); } const data = await response.json(); const relatedSkills = data.related_skills || []; if (relatedSkills.length === 0) { // 没有相关推荐时隐藏整个区域 section.style.display = 'none'; return; } // 渲染相关 Skills listContainer.innerHTML = relatedSkills.map(skill => { const desc = skill.description || ''; const truncatedDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc; return ` <a href="${currentLang === 'en' ? '' : '/' + currentLang}/skill/${skill.owner}/${skill.repo}/${skill.skill_name}" class="related-card fade-in"> <div class="related-name">${escapeHtml(skill.skill_name)}</div> <div class="related-meta"> <span class="related-owner">${escapeHtml(skill.owner)}</span> <span class="related-installs">${skill.installs}</span> </div> <div class="related-desc">${escapeHtml(truncatedDesc)}</div> </a> `; }).join(''); } catch (error) { console.error('Failed to load related skills:', error); // 加载失败时显示提示或隐藏 listContainer.innerHTML = '<div class="related-empty">暂无相关推荐</div>'; } } // HTML 转义 function escapeHtml(text) { const div = document.createElement('div'); div.textContent = text; return div.innerHTML; } // 页面加载完成后异步加载相关 Skills if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', loadRelatedSkills); } else { loadRelatedSkills(); } </script> </body> </html>