How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Which agent frameworks does tailwindcss support?

tailwindcss works with any agent framework supported by the Skills registry, including Claude Code, Cursor, GitHub Copilot, Cline, Codex, and Gemini CLI.

Is tailwindcss free to use?

Yes. tailwindcss is free to install and use. It is available from the open explainx.ai skill registry published by hairyf.

Where can I read ratings and reviews for tailwindcss?

Community ratings and review text appear on this explainx.ai skill page below the description. Reviews use a 1–5 scale and may include short written feedback from signed-in members.

How do I install tailwindcss?

Run `npx skills add https://github.com/hairyf/skills --skill tailwindcss` in your terminal. You need to have run `npx skills init` once in your project first.

Frontend

tailwindcss▌

hairyf/skills · updated Apr 17, 2026

$npx skills add https://github.com/hairyf/skills --skill tailwindcss

0 commentsdiscussion

summary

Utility-first CSS framework for rapidly building custom interfaces with composed utility classes.

›Covers layout (flexbox, grid, positioning, sizing, spacing), transforms, typography, visual effects, and interactivity through organized utility categories
›Supports responsive design with mobile-first breakpoints, container queries, and conditional variants for state, pseudo-classes, and media queries
›Tailwind v4 introduces CSS-first configuration using theme variables and directives ( @

skill.md

Tailwind CSS

The skill is based on Tailwind CSS v4.1.18, generated at 2026-01-28.

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. Instead of writing custom CSS, you compose designs using utility classes directly in your markup. Tailwind v4 introduces CSS-first configuration with theme variables, making it easier to customize your design system.

Core References

Topic	Description	Reference
Installation	Vite, PostCSS, CLI, and CDN setup	core-installation
Utility Classes	Understanding Tailwind's utility-first approach and styling elements	core-utility-classes
Theme Variables	Design tokens, customizing theme, and theme variable namespaces	core-theme
Responsive Design	Mobile-first breakpoints, responsive variants, and container queries	core-responsive
Variants	Applying utilities conditionally with state, pseudo-class, and media query variants	core-variants
Preflight	Tailwind's base styles and how to extend or disable them	core-preflight

Layout

Display & Flexbox & Grid

Topic	Description	Reference
Display	flex, grid, block, inline, hidden, sr-only, flow-root, contents	layout-display
Flexbox	flex-direction, justify, items, gap, grow, shrink, wrap, order	layout-flexbox
Grid	grid-cols, grid-rows, gap, place-items, col-span, row-span, subgrid	layout-grid
Aspect Ratio	Controlling element aspect ratio for responsive media	layout-aspect-ratio
Columns	Multi-column layout for magazine-style or masonry layouts	layout-columns

Positioning

Topic	Description	Reference
Position	Controlling element positioning with static, relative, absolute, fixed, and sticky	layout-position
Inset	Controlling placement of positioned elements with top, right, bottom, left, and inset utilities	layout-inset

Sizing

Topic	Description	Reference
Width	Setting element width with spacing scale, fractions, container sizes, and viewport units	layout-width
Height	Setting element height with spacing scale, fractions, viewport units, and content-based sizing	layout-height
Min & Max Sizing	min-width, max-width, min-height, max-height constraints	layout-min-max-sizing

Spacing

Topic	Description	Reference
Margin	Controlling element margins with spacing scale, negative values, logical properties, and space utilities	layout-margin
Padding	Controlling element padding with spacing scale, logical properties, and directional utilities	layout-padding

Overflow

Topic	Description	Reference
Overflow	Controlling how elements handle content that overflows their container	layout-overflow

Images & Replaced Elements

Topic	Description	Reference
Object Fit & Position	Controlling how images and video are resized and positioned	layout-object-fit-position

Tables

Topic	Description	Reference
Table Layout	border-collapse, table-auto, table-fixed	layout-tables

Transforms

Topic	Description	Reference
Transform Base	Base transform utilities for enabling transforms, hardware acceleration, and custom transform values	transform-base
Translate	Translating elements on x, y, and z axes with spacing scale, percentages, and custom values	transform-translate
Rotate	Rotating elements in 2D and 3D space with degree values and custom rotations	transform-rotate
Scale	Scaling elements uniformly or on specific axes with percentage values	transform-scale
Skew	Skewing elements on x and y axes with degree values	transform-skew

Typography

Topic	Description	Reference
Font & Text	Font size, weight, color, line-height, letter-spacing, decoration, truncate	typography-font-text
Text Align	Controlling text alignment with left, center, right, justify, and logical properties	typography-text-align
List Style	list-style-type, list-style-position for bullets and markers	typography-list-style

Visual

Topic	Description	Reference
Background	Background color, gradient, image, size, position	visual-background
Border	Border width, color, radius, divide, ring	visual-border
Effects	Box shadow, opacity, mix-blend, backdrop-blur, filter	visual-effects
SVG	fill, stroke, stroke-width for SVG and icon styling	visual-svg

Effects & Interactivity

Topic	Description	Reference
Transition & Animation	CSS transitions, animation keyframes, reduced motion	effects-transition-animation
Visibility & Interactivity	Visibility, cursor, pointer-events, user-select, z-index	effects-visibility-interactivity
Form Controls	accent-color, appearance, caret-color, resize	effects-form-controls
Scroll Snap	scroll-snap-type, scroll-snap-align for carousels	effects-scroll-snap

Features

Dark Mode

Topic	Description	Reference
Dark Mode	Implementing dark mode with the dark variant and custom strategies	features-dark-mode

Migration

Topic	Description	Reference
Upgrade Guide	Migrating from v3 to v4, breaking changes, rename mappings	features-upgrade

Customization

Topic	Description	Reference
Custom Styles	Adding custom styles, utilities, variants, and working with arbitrary values	features-custom-styles
Functions & Directives	Tailwind's CSS directives and functions for working with your design system	features-functions-directives
Content Detection	How Tailwind detects classes and how to customize content scanning	features-content-detection

Best Practices

Topic	Description	Reference
Utility Patterns	Managing duplication, conflicts, important modifier, when to use components	best-practices-utility-patterns

Key Recommendations

Use utility classes directly in markup - Compose designs by combining utilities
Customize with theme variables - Use @theme directive to define design tokens
Mobile-first responsive design - Use unprefixed utilities for mobile, prefixed for breakpoints
Use complete class names - Never construct classes dynamically with string interpolation
Leverage variants - Stack variants for complex conditional styling
Prefer CSS-first configuration - Use @theme, @utility, and @custom-variant over JavaScript configs

Discussion

Product Hunt–style comments (not star reviews)

No comments yet — start the thread.

general reviews

Ratings

4.8★★★★★57 reviews

★★★★★Fatima Brown· Dec 28, 2024
Solid pick for teams standardizing on skills: tailwindcss is focused, and the summary matches what you get after install.
★★★★★Lucas Farah· Dec 28, 2024
tailwindcss reduced setup friction for our internal harness; good balance of opinion and flexibility.
★★★★★Hassan Malhotra· Dec 24, 2024
I recommend tailwindcss for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.
★★★★★Michael Huang· Dec 24, 2024
tailwindcss has been reliable in day-to-day use. Documentation quality is above average for community skills.
★★★★★Benjamin Park· Dec 20, 2024
Useful defaults in tailwindcss — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.
★★★★★Fatima Khanna· Nov 19, 2024
tailwindcss has been reliable in day-to-day use. Documentation quality is above average for community skills.
★★★★★Lucas Liu· Nov 19, 2024
Registry listing for tailwindcss matched our evaluation — installs cleanly and behaves as described in the markdown.
★★★★★Liam Chen· Nov 15, 2024
tailwindcss fits our agent workflows well — practical, well scoped, and easy to wire into existing repos.
★★★★★Michael Singh· Nov 15, 2024
Solid pick for teams standardizing on skills: tailwindcss is focused, and the summary matches what you get after install.
★★★★★Fatima Chen· Oct 10, 2024
Keeps context tight: tailwindcss is the kind of skill you can hand to a new teammate without a long onboarding doc.

showing 1-10 of 57

1 / 6