“tailwind”的搜索结果

Write, review, and refactor styles using Tailwind CSS v4 conventions. Consult guidance on CSS configuration, renamed classes, built-in styling features, and behavior changes when updating older v3 code or creating new styles.

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

• Updating Tailwind CSS v3 syntax for v4
• Defining colors and spacing through CSS configuration
• Reviewing classes and behavior changes

Set up Tailwind CSS v4 in Expo using react-native-css and NativeWind v5. Configure styling across iOS, Android, and Web, create components that accept CSS class names, and define shared themes with platform-specific fonts and colors.

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

• Add Tailwind CSS v4 to an Expo project
• Create components that accept CSS class names
• Define shared themes with platform-specific fonts and colors

Build reusable interface components with Tailwind CSS v4, using shared design values for colors, corners, and themes. Covers buttons, forms, responsive layouts, accessibility, and dark mode to help standardize interfaces across a project.

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

• Build a reusable UI component library
• Standardize colors and component styles
• Add responsive layouts and dark mode

Build a consistent interface foundation with Tailwind CSS v4 using shared design values and reusable components. Covers responsive layouts, dark mode, accessibility, and component variations to help standardize UI patterns across a codebase.

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

• Building a reusable UI component library
• Standardizing colors, corner radii, and themes
• Creating responsive and accessible components

Build interfaces with Tailwind CSS v4 using CSS-based configuration, layouts that adapt to their container, and shared color and spacing values. The skill guides responsive styling, dark mode, and reusable component patterns.

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

• Moving Tailwind CSS v3 configuration to v4
• Making cards adapt to their parent container
• Standardizing colors, spacing, and typography

Create complex HTML artifacts for claude.ai using React and Tailwind. The skill follows Anthropic’s reference workflow to produce rich web content that can be embedded, supporting artifact development with these tools.

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

• Creating complex HTML artifacts for claude.ai
• Building web artifacts with React and Tailwind
• Preparing rich web content for embedding

Build accessible interfaces with shadcn/ui components and Tailwind CSS styling. Create forms, tables, and layouts that adapt to screen size, then coordinate colors, spacing, and dark mode across the application.

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

• Build forms with keyboard navigation
• Adapt layouts for phones and desktops
• Unify colors and dark mode

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. Keywords: Tailwind v4, shadcn/ui, @tailwindcss/vite, @theme inline, dark mode, CSS variables, hsl() wrapper, components.json, React theming, theme switching, colors not working, variables broken, theme not applying, @plugin directive, typography plugin, forms plugin, prose class, @tailwindcss/typography, @tailwindcss/forms

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

Create DESIGN.md files that combine exact design values with explanations for coding agents. Validate file structure and color contrast, compare versions, and export shared design settings to Tailwind or a standard design-token JSON format.

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

• Turning a style guide into a specification for agents
• Sharing consistent design settings across projects
• Checking color contrast and token references

Create HTML artifacts for claude.ai using React, Tailwind CSS, and shadcn/ui. This skill supports building elaborate interfaces with multiple components, helping turn a web prototype request into a structured, styled artifact.

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

• Creating an HTML artifact for claude.ai
• Prototyping an interface with multiple components
• Building an artifact with React and shadcn/ui

Review an existing interface component and identify three visual or interaction problems. Get concrete layout, spacing, color, and code changes that follow the project’s existing design conventions, with short before-and-after examples.

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

• Polishing an existing component
• Reviewing spacing and visual hierarchy
• Improving a React and Tailwind interface

Apply subtle gradient borders to cards, pricing panels, buttons, and other web surfaces. Choose layered CSS backgrounds or a masked border to suit existing designs, with guidance on Tailwind syntax, corner alignment, opacity, and light and dark themes.

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

• Adding subtle borders to cards and pricing panels
• Decorating edges without replacing a complex background
• Adding brand accents to hover and focus states

Tailwind CSS (ユーティリティファースト CSS フレームワーク, v4) のリファレンス。 @theme, @source, @utility, @custom-variant, @apply, @import "tailwindcss", Preflight, CSS-first 設定, @tailwindcss/vite, @tailwindcss/postcss, @tailwindcss/cli, upgrade ツール, variants, arbitrary values, container queries。 Chakra UI のトークン・style props は chakra-ui スキルの担当。

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

Build React interfaces with HeroUI v3, including buttons, forms, cards, and modals. The skill guides installation, component documentation lookup, and light or dark theme configuration using Tailwind CSS v4 and reusable interface components.

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

• Set up HeroUI v3 in a React project
• Build forms and modals from documented examples
• Customize light and dark themes

Build and update Mastra application interfaces using existing components from @mastra/playground-ui. Follow shared visual styles, arrange layouts with Tailwind utilities, and connect themes and stylesheets while avoiding duplicated components or unsupported appearance overrides.

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

• Building a new Mastra application screen
• Adjusting layouts with existing components
• Connecting shared themes and stylesheets

Turn a product description into a landing page with headlines, feature sections, pricing, FAQs, and calls to action. Receive Next.js/React components styled with Tailwind CSS, plus search metadata, structured data, and alternative copy.

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

• Creating a landing page for a new product
• Building a campaign or lead capture page
• Comparing headline and page variants

Build web applications from a bundled Express, Vite, React, Tailwind CSS, and Drizzle ORM template. Follow a schema-first workflow to create pages, backend APIs, and connected forms, with guidance for styling, testing, and deployment.

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

• Building a dashboard with data displays
• Creating an admin panel with forms and APIs
• Prototyping an online store

Build Svelte interfaces for json-render using 36 ready-made components. This skill guides component selection, connects component definitions to implementations, and explains form validation settings for apps using Svelte 5 and Tailwind CSS.

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

• Add standard UI components to a Svelte app
• Build forms with configurable validation
• Prepare component definitions for server-side prompts

Tailwind CSS v4 with CSS-first configuration and design tokens. Use when setting up Tailwind v4, defining theme variables, using OKLCH colors, or configuring dark mode. Triggers on @theme, @tailwindcss/vite, oklch, CSS variables, --color-, tailwind v4.

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

Use this skill when styling components, adding shadcn/ui components, or configuring Tailwind v4 design tokens. Trigger words: スタイリング, Tailwind, shadcn, コンポーネント追加, デザイントークン, テーマ, CSS, クラス, ボタン, カード, ダークモード.

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

Build complex interactive artifacts for claude.ai with React, Tailwind CSS, and shadcn/ui. Start from a configured project, develop interfaces with state management or navigation, and bundle the result into one shareable HTML file.

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

• Building interactive interfaces with multiple components
• Creating artifacts with state management and navigation
• Developing interfaces with shadcn/ui components

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