Name: Tailwindcss Development
Author: n00ki

Tailwindcss Development

Styles applications using Tailwind CSS v4 utilities. Activates when adding styles, restyling components, working with gradients, spacing, layout, flex, grid, responsive design, dark mode, colors, typography, or borders; or when the user mentions CSS, styling, classes, Tailwind, restyle, hero section, cards, buttons, or any visual/UI changes.

n00ki0 스타2026. 2. 15.

직업
카테고리: Frontend

Tailwind CSS Development

When to Apply

Activate this skill when:

Adding styles to components or pages
Working with responsive design
Implementing dark mode
Extracting repeated patterns into components
Debugging spacing or layout issues

Documentation

Use search-docs for detailed Tailwind CSS v4 patterns and documentation.

Basic Usage

Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.
Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).
Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.

Tailwind CSS v4 Specifics

<code-snippet name="CSS-First Config" lang="css"> @theme { --color-brand: oklch(0.72 0.11 178); } </code-snippet> <code-snippet name="v4 Import Syntax" lang="diff"> - @tailwind base; - @tailwind components; - @tailwind utilities; + @import "tailwindcss"; </code-snippet> <code-snippet name="Gap Utilities" lang="html"> <div class="flex gap-8"> <div>Item 1</div> <div>Item 2</div> </div> </code-snippet> <code-snippet name="Dark Mode" lang="html"> <div class="bg-white dark:bg-gray-900 text-gray-900 dark:text-white"> Content adapts to color scheme </div> </code-snippet> <code-snippet name="Flexbox Layout" lang="html"> <div class="flex items-center justify-between gap-4"> <div>Left content</div> <div>Right content</div> </div> </code-snippet> <code-snippet name="Grid Layout" lang="html"> <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6"> <div>Card 1</div> <div>Card 2</div> <div>Card 3</div> </div> </code-snippet>

Tailwindcss Development

n00ki0 스타2026. 2. 15.

직업
카테고리: Frontend

Basic Usage

Use Tailwind CSS classes to style HTML. Check and follow existing Tailwind conventions in the project before introducing new patterns.

Offer to extract repeated patterns into components that match the project's conventions (e.g., Blade, JSX, Vue).

Consider class placement, order, priority, and defaults. Remove redundant classes, add classes to parent or child elements carefully to reduce repetition, and group elements logically.

Deprecated	Replacement
bg-opacity-*	bg-black/*
text-opacity-*	text-black/*
border-opacity-*	border-black/*
divide-opacity-*	divide-black/*
ring-opacity-*	ring-black/*
placeholder-opacity-*	placeholder-black/*
flex-shrink-*	shrink-*
flex-grow-*	grow-*
overflow-ellipsis	text-ellipsis
decoration-slice	box-decoration-slice
decoration-clone	box-decoration-clone

Tailwindcss Development

Tailwind CSS Development

When to Apply

Documentation

Basic Usage

Tailwind CSS v4 Specifics

Tailwindcss Development

Tailwind CSS Development

When to Apply

Documentation

Basic Usage

Tailwind CSS v4 Specifics

CSS-First Configuration

Import Syntax

Replaced Utilities

Spacing

Dark Mode

Common Patterns

Flexbox Layout

Grid Layout

Common Pitfalls

Extract Errors

Frontend Patterns

Coding Standards

Coding Standards

Coding Standards

Frontend Patterns