“tailwind”的搜索结果

Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.

中文简介正在准备中。当前显示英语简介。

• Creating interfaces with multiple components
• Building artifacts with changing data and multiple views
• Sharing a React app as a single HTML file

Build complex claude.ai artifacts with React, Tailwind CSS, and shadcn/ui. Create interfaces with multiple components, state management for changing data, and routing between views, then package the app into one self-contained HTML file for sharing.

中文简介正在准备中。当前显示英语简介。

• Creating interfaces with multiple components
• Building artifacts with changing data and multiple views
• Sharing a React app as a single HTML file

Helps build React and Next.js interfaces with TypeScript and Tailwind CSS. Provides project and component generators, reviews dependencies for code size reductions, and guides measurable improvements to loading performance, accessibility, and frontend code quality.

中文简介正在准备中。当前显示英语简介。

• Starting a React or Next.js project
• Generating components with tests and Storybook stories
• Finding dependencies that increase download size

Set up Tailwind v4 + shadcn/ui themed UI with dark mode. Install deps, configure CSS variables via @theme inline, wire dark mode toggle, verify. Use whenever the user mentions Tailwind v4, setting up Tailwind theming, shadcn/ui colours, dark mode, or troubleshooting colours not working, tw-animate-css errors, @theme inline conflicts, @apply breaking after upgrade, or v3 → v4 migration issues.

中文简介正在准备中。当前显示原文说明。

Quick reference for Tailwind CSS utility patterns, responsive design, and configuration. Triggers on: tailwind, utility classes, responsive design, tailwind config, dark mode css, tw classes.

中文简介正在准备中。当前显示原文说明。

Set up Tailwind v4 with shadcn/ui using @theme inline pattern and CSS variable architecture. Four-step pattern: CSS variables, Tailwind mapping, base styles, automatic dark mode. Prevents 8 documented errors. Use when initializing React projects with Tailwind v4, or fixing colors not working, tw-animate-css errors, @theme inline dark mode conflicts, @apply breaking, v3 migration issues.

中文简介正在准备中。当前显示原文说明。

| Production-tested setup for Tailwind CSS v4 with shadcn/ui, Vite, and React. Use when: initializing React projects with Tailwind v4, setting up shadcn/ui, implementing dark mode, debugging CSS variable issues, fixing theme switching, migrating from Tailwind v3, or encountering color/theming problems. Covers: @theme inline pattern, CSS variable architecture, dark mode with ThemeProvider, component composition, vite.config setup, common v4 gotchas, and production-tested patterns.

中文简介正在准备中。当前显示原文说明。

Use when writing, editing, cleaning, or refactoring Tailwind classes, components, or configuration. Not for read-only audits of Tailwind code, or general CSS without Tailwind.

中文简介正在准备中。当前显示原文说明。

Build polished web pages with explicit guidance for typography, spacing, colors, layered cards, and restrained animation. The skill provides layout options and mobile adaptation rules, producing React, Tailwind, or HTML code for a consistent visual direction.

中文简介正在准备中。当前显示英语简介。

• Creating a calm landing page with refined typography
• Designing an asymmetrical SaaS feature layout
• Building a portfolio with soft shadows and generous spacing

Build React or Next.js interfaces with specific rules for typography, color, spacing, and animation. The skill guides responsive layouts, loading and error states, and performance-conscious interactions while preserving the original v1 design behavior.

中文简介正在准备中。当前显示英语简介。

• Building a marketing page with distinctive typography
• Refining dashboard layouts and interaction states
• Adjusting layout density and animation intensity

Build React or Next.js interfaces using adjustable layout variation, motion, and information density. This preserved v1 skill covers typography, color, responsive layouts, interaction states, and animation isolation for projects that require its original behavior.

中文简介正在准备中。当前显示英语简介。

• Maintaining the original v1 design behavior
• Building asymmetric React or Next.js interfaces
• Designing loading, empty, and error states

Create website interfaces with defined typography, spacing, layered cards, and animation rules. The skill guides React, Tailwind, and HTML output, combining asymmetric layouts with mobile adaptations and performance constraints for a consistent visual direction.

中文简介正在准备中。当前显示英语简介。

• Designing an asymmetric website layout
• Refining cards, buttons, and navigation
• Adding motion with mobile performance in mind

Design reusable interface components in React, Vue, and Svelte. Organize how components fit together, define clear configuration options, and choose styling approaches while addressing accessibility, responsive layouts, and maintenance across component libraries or design systems.

中文简介正在准备中。当前显示英语简介。

• Build a reusable UI component library
• Standardize component options across a design system
• Refactor complex existing components

Turn Figma designs into React and TypeScript components using coderio. The workflow uses design thumbnails to guide layout, extracts component structure and data, and generates code and assets for integration into an application.

中文简介正在准备中。当前显示英语简介。

• Build a React interface from a Figma design
• Organize component structure and input data
• Generate components while checking the design thumbnail

Build iOS and Android interfaces with HeroUI Native components such as buttons, cards, text fields, and dialogs. The skill covers setup, documentation lookup, and theme configuration with Uniwind, which brings Tailwind styling to React Native.

中文简介正在准备中。当前显示英语简介。

• Set up HeroUI Native in an Expo project
• Build mobile cards and input fields
• Configure light and dark themes

Build json-render interfaces with 36 ready-made UI components, including forms, tables, and navigation. This skill guides component selection, connects definitions to React implementations, and explains custom components and input validation.

中文简介正在准备中。当前显示英语简介。

• Add standard components to a json-render interface
• Build forms with input validation
• Combine ready-made and custom components

Build the user interface for a holaOS app whose data resources are already connected through the SDK. Choose a feed, table, kanban board, form, or calendar layout using shared components and workspace styling.

中文简介正在准备中。当前显示英语简介。

• Display scheduled items in a chronological feed
• Show CRM contacts or tickets in a table
• Organize issues by status on a kanban board

Create dark interfaces with frosted glass panels, gradient borders, and subtle glow. The skill provides CSS and Tailwind patterns for cards, hero sections, and dashboards, with checks for readable contrast, visible focus, and mobile behavior.

中文简介正在准备中。当前显示英语简介。

• Create a dark frosted glass hero section
• Convert a bright interface to dark glass styling
• Add gradient borders to cards and modals

Tailwind CSS v4 principles. CSS-first configuration, container queries, modern patterns, design token architecture. Use when building with Tailwind v4 or migrating from v3.

中文简介正在准备中。当前显示原文说明。

使用 Vite + React + TailwindCSS v4 + lucide-react 进行前端项目搭建和开发的技能。当用户需要创建前端项目、搭建 React 开发环境、使用 TailwindCSS 进行样式开发时使用此技能。

中文简介正在准备中。当前显示原文说明。

Create, implement, or review tailwind design system work with format, accessibility, performance, and visual-verification controls. Use when the requested deliverable depends on tailwind design system.

中文简介正在准备中。当前显示原文说明。

Expert guide for Tailwind CSS v4, CSS-first configuration, @theme customization, and modern responsive design / Panduan ahli untuk Tailwind CSS v4, konfigurasi CSS-first, kustomisasi @theme, dan desain responsif modern.

中文简介正在准备中。当前显示原文说明。

Tailwind CSS 4 patterns and best practices. Trigger: When styling with Tailwind - :class/class usage, theme variables, no var() in class.

中文简介正在准备中。当前显示原文说明。

Provides specific version compatibility notes for NativeWind and Tailwind CSS to prevent common installation errors.

中文简介正在准备中。当前显示原文说明。