skills.rest
Mantis-Technology
Mantis-TechnologyOFFICIAL
Explore all skills by this author →
GitHub

tailwindcss-development

Writes and fixes Tailwind CSS v4 utility classes in HTML templates.

Updated Aug 24, 2026
Search Tags:#tailwind css#dark mode#utility classes#tailwind v4#responsive layout#frontend styling#css-first configuration
One-click install
npx skills add https://github.com/Mantis-Technology/mantis-laravel --skill tailwindcss-development-mantis-technology
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: tailwindcss-development
Source: https://github.com/Mantis-Technology/mantis-laravel/tree/main/.agents/skills/tailwindcss-development
Command: npx skills add https://github.com/Mantis-Technology/mantis-laravel --skill tailwindcss-development-mantis-technology

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Styling HTML templates with Tailwind CSS requires keeping up with v4 changes like CSS-first configuration, removed deprecated utilities, and new import syntax, which leads to broken builds and inconsistent patterns when done from memory. ## Core Features & Use Cases - Tailwind v4 Guidance: Enforces CSS-first @theme configuration, @import "tailwindcss" syntax, and replacements for deprecated utilities like bg-opacity-* and flex-shrink-*. - Layout & Component Patterns: Provides conventions for flexbox and grid layouts, gap-based spacing, dark mode variants, and common UI components like cards, navbars, and forms. - Use Case: When building a responsive product grid in a Blade or JSX template, get correct v4 utility classes with dark mode support and proper gap spacing instead of outdated v3 patterns. ## Quick Start Ask the assistant to build a responsive three-column card grid with dark mode support using Tailwind CSS v4 in your template file.

Frequently Asked Questions about tailwindcss-development

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure Tailwind CSS v4 without tailwind.config.js?▼

Tailwind v4 uses CSS-first configuration with the @theme directive directly in your CSS file, for example defining --color-brand inside @theme. The separate tailwind.config.js file is no longer needed, and corePlugins is not supported.

How to migrate from Tailwind v3 to v4 import syntax?▼

Replace the three @tailwind base, components, and utilities directives with a single @import "tailwindcss" statement. Also update deprecated utilities like bg-opacity-* to bg-black/* and flex-shrink-* to shrink-*.

What replaced bg-opacity and flex-shrink in Tailwind v4?▼

Opacity utilities like bg-opacity-*, text-opacity-*, and ring-opacity-* are replaced with slash syntax such as bg-black/*. flex-shrink-* becomes shrink-*, flex-grow-* becomes grow-*, and overflow-ellipsis becomes text-ellipsis.

Does Tailwind v4 support dark mode variants?▼

Yes, dark mode uses the dark: variant prefix, such as bg-white dark:bg-gray-900. New pages and components should follow the same dark mode conventions already used in the project.

Should I use margin or gap for spacing between flex items?▼

Use gap utilities like gap-4 or gap-8 on the flex or grid parent instead of margins on sibling elements. This avoids spacing inconsistencies and keeps class placement cleaner.

When should I not use this Tailwind styling approach?▼

Skip it for backend PHP logic, database queries, API routes, JavaScript without HTML or CSS, CSS file audits, build tool configuration, and vanilla CSS work, since it focuses on utility classes in HTML templates.

Related Skills

Explore More Software Engineering Skills→
relaticlerelaticle
1.5k

tailwindcss-development

Standardize Tailwind CSS v4 styling across Blade, JSX, and Vue templates.

Official
Intermediate
JayonLabsJayonLabs
1

tailwindcss-development

Refine Tailwind CSS utility classes in Blade, JSX, and Vue templates.

Official
Intermediate
Luqman-Ud-DinLuqman-Ud-Din

qa-detect-viewport-meta

Detect missing or misconfigured viewport meta tags in web pages.

Community
Basic
videojsvideojs
931

migrate-css-to-tailwind

Migrate CSS, SCSS, and styled-components to Tailwind v4 utilities and theme tokens.

Official
Intermediate