Results for “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

The English summary is being prepared. Showing the original description.

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

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 スキルの担当。

The English summary is being prepared. Showing the original description.

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.

The English summary is being prepared. Showing the original description.

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

The English summary is being prepared. Showing the original description.

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

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.

The English summary is being prepared. Showing the original description.