tailwindcss

MengTo/Skills · Agent Skill

Используйте, когда реализуете интерфейс пользователя с Tailwind и хотите многократно используемые, практичные шаблоны, основанные на утилитах.

Перейти к установке ↓

Обзор

Автор	MengToСообщество
Репозиторий	MengTo/Skills ↗
Папка скилла	`tailwindcss`
Звёзды	7 038
Форки	819
Файлы	5
Лицензия	MIT
Обновлён	25 октября 2026 г.
Ссылки	Исходник скилла ↗ · Репозиторий ↗

Проверка Mozgi

Что мы нашли в файлах скилла. Подробности — по подписке.

Безопасность

низкий риск · явных рисков не найдено — полный отчёт покажет детали

Совместимость

только инструкции — подходит большинству агентов

Похожие скиллы

найдено 62 похожих скилла

Ещё в подписке

Установка

Скилл — это папка с файлом SKILL.md. Выберите своего агента и скопируйте команды в терминал (macOS, Linux или Git Bash на Windows) в корне проекта.

Скопируйте промпт и вставьте в Claude, Codex или другого ассистента: он сам проверит скилл и подключит его.

Установи мне скилл «tailwindcss» с mozgi.io (https://mozgi.io/skills/mengto-tailwindcss/).

1. Скачай архив: https://mozgi.io/skills/mengto-tailwindcss/download
   Если не скачивается — возьми папку скилла из исходника: https://github.com/MengTo/Skills/tree/main/agent-skills/web-design/tailwindcss
2. Прочитай SKILL.md и остальные файлы. Проверь, что скилл безопасен: нет скрытых команд, отправки данных наружу или скриптов, которые делают не то, что описано. Если что-то подозрительно — остановись и скажи мне.
3. Положи папку «tailwindcss» в папку скиллов своего агента: .claude/skills/ для Claude Code, .agents/skills/ для Codex, .cursor/skills/ для Cursor, .gemini/skills/ для Gemini CLI. В проекте — внутри проекта, иначе в домашней папке (~/.claude/skills/ и т. п.).
4. Убедись, что получилось <папка скиллов>/tailwindcss/SKILL.md.
5. Коротко расскажи, что умеет этот скилл, и предложи попробовать его на моей задаче.

Если какой-то шаг не можешь сделать сам — подскажи, что нажать или ввести.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .claude/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .claude/skills/tailwindcss

Перезапустите Claude Code — скилл появится в списке, вызвать вручную: /tailwindcss. Для всех проектов сразу — папка ~/.claude/skills.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .agents/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .agents/skills/tailwindcss

Codex ищет скиллы в .agents/skills от текущей папки до корня репозитория; вызвать вручную — /skills или $tailwindcss. Для всех проектов — ~/.agents/skills.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .cursor/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .cursor/skills/tailwindcss

Cursor подхватит скилл при запуске; вызвать вручную — «/» в чате агента. Cursor также читает .claude/skills и .agents/skills. Для всех проектов — ~/.cursor/skills.

git clone --depth 1 --branch main https://github.com/MengTo/Skills.git /tmp/Skills
mkdir -p .gemini/skills
cp -r /tmp/Skills/agent-skills/web-design/tailwindcss .gemini/skills/tailwindcss

Gemini CLI сам предложит включить скилл, когда задача подходит, — вы подтверждаете. Для всех проектов — ~/.gemini/skills.

Файлы скилла

5 файлов Скачать ZIP

Просмотрите SKILL.md и сопутствующие файлы перед установкой. Клик по файлу — предпросмотр.

Содержимое SKILL.md

Оригинальный текст автора · только чтение

Tailwind CSS — Utility-first Styling Skill

When to use

Rapid UI building with consistent spacing/typography scales
Design systems where composition beats bespoke CSS
Component-driven apps (React/Vue/Svelte), marketing pages, prototypes → production

Key concepts & patterns

Utilities compose in HTML/JSX: class="flex gap-4 p-6 bg-zinc-950 text-white"
Responsive variants: sm: md: lg: xl: etc.
State variants: hover:, focus:, active:, disabled:, group-hover:, peer-checked:
Arbitrary values (use sparingly): w-[42rem], bg-[#0b1220], translate-y-[3px]
Dark mode patterns: dark: with class-based strategy
Extracting repeated patterns:
Prefer components (JSX/Vue components) first
Then @apply for small reusable patterns (avoid overuse)
Build pipeline:
Tailwind scans “content” files for class names and generates CSS (zero-runtime)

Common pitfalls

Classes not generated in production
Ensure content paths include all templates/components.
Avoid building class names dynamically (e.g. "text-" + color) unless safelisted.
Overusing @apply and losing the utility-first benefits
Conflicting styles due to class order assumptions
Huge HTML class lists with no structure
Use component composition; break into subcomponents; use clsx/cva when needed.

Quick recipes

1) A clean CTA button

<button class="inline-flex items-center justify-center rounded-xl px-5 py-3
               bg-indigo-600 text-white font-medium
               hover:bg-indigo-500 active:bg-indigo-700
               focus:outline-none focus:ring-2 focus:ring-indigo-400/60">
  Get started
</button>

2) Responsive hero layout

<section class="mx-auto max-w-6xl px-6 py-16">
  <div class="grid gap-10 lg:grid-cols-2 lg:items-center">
    <div>
      <h1 class="text-4xl font-semibold tracking-tight sm:text-5xl">
        Ship a beautiful site fast.
      </h1>
      <p class="mt-4 text-zinc-600">
        Tailwind helps you move quickly without fighting CSS.
      </p>
    </div>
    <div class="rounded-2xl border border-zinc-200 bg-white p-6 shadow-sm">
      <!-- media -->
    </div>
  </div>
</section>

3) Handling dynamic classnames safely

Prefer mapping:

const toneClass = {
  success: "bg-emerald-600",
  danger: "bg-rose-600",
  info: "bg-sky-600",
}[tone];

What to ask the user

Framework/build tool (Next/Vite/Remix/Webflow export)?
Do we need a design system (tokens, component library) or a one-off page?
Dark mode? RTL? accessibility constraints?

Вопросы и ответы

Что делает скилл tailwindcss?

Как установить tailwindcss?

Откройте блок «Установка» на этой странице и выберите своего агента — Claude Code, Codex, Cursor или Gemini CLI: там готовые команды, которые копируют папку скилла в нужное место. Либо скопируйте промпт из вкладки «Через ассистента» — ассистент сам проверит и подключит скилл.

С какими нейросетями работает tailwindcss?

Скиллы — это обычные инструкции в Markdown (формат Agent Skills), поэтому tailwindcss подходит любому агенту, который читает SKILL.md: Claude Code, Codex, Cursor, Gemini CLI, GitHub Copilot, OpenCode и другие. Модель загружает инструкции только когда задача подходит под описание скилла.

Скилл tailwindcss бесплатный?

Скилл опубликован автором MengTo в открытом доступе под лицензией MIT. Сам скилл ничего не стоит — вы платите только своему провайдеру нейросети за использованные токены.

Безопасно ли устанавливать скиллы?

Скилл — это инструкции, которые агент будет выполнять, поэтому перед установкой прочитайте SKILL.md и сопутствующие файлы. Скрипты из папки скилла запускаются только если их запустит агент — следите за тем, что он делает, и не давайте лишних прав.

Чем скилл отличается от MCP-сервера или плагина?

MCP-сервер и плагин дают модели новые инструменты — код, который выполняется и возвращает результат. Скилл даёт знания и порядок действий: как подходить к задаче, какие шаги делать и как выглядит хороший результат. Ему не нужен сервер или ключ API.