Django tailwind optimizer

Skill goldenprofile/llm-skills/django-tailwind-optimizer

LLM Skills

Install

npx -y skills add goldenprofile/llm-skills --skill django-tailwind-optimizer

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

1 stars1 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Анализирует Django шаблоны на использование Tailwind CSS, выявляет дублирование стилей, оптимизирует для production. Используй когда пользователь работает с Django templates и Tailwind CSS, просит оптимизировать CSS, отрефакторить шаблоны, перейти с Tailwind CDN на production-ready сборку, или говорит «оптимизируй tailwind», «убери дублирование стилей», «подготовь CSS к продакшену».

SKILL.md

10.8 KB, as published. Nobody here has run it

Django Tailwind Optimizer

Навык для анализа и оптимизации Django шаблонов с Tailwind CSS. Помогает перейти от CDN версии к production-ready конфигурации, выявляет дублирование и оптимизирует финальный CSS.

Основной путь — Tailwind CSS v4 (CSS-first конфигурация). Для существующих проектов на v3 — ветка Legacy в references/migration.md.

Когда использовать

Нужно проанализировать использование Tailwind в Django шаблонах
Переход с Tailwind CDN на оптимизированную сборку
Выявление дублированных стилей в <style> блоках
Подготовка CSS к production (purge, minify)
Рефакторинг шаблонов для лучшей переиспользуемости

Шаг 0. Определи версию Tailwind в проекте (ОБЯЗАТЕЛЬНО первым)

v3 и v4 несовместимы по конфигурации — не выдавай рекомендации, пока не определил версию:

Признак	Версия
`input.css` начинается с `@import "tailwindcss"`, есть `@theme`	v4
`@tailwind base; @tailwind components; @tailwind utilities;`	v3
`tailwind.config.js` с `module.exports = { content: [...] }` — единственный конфиг	v3
`package.json`: `"tailwindcss": "^4..."` / `"@tailwindcss/cli"`	v4
`package.json`: `"tailwindcss": "^3..."`	v3
Только CDN `<script src="https://cdn.tailwindcss.com">`	версии нет — новый сетап делай на v4

Проект уже на v4 → работай по этому файлу.
Проект на v3 и миграция не входит в задачу → работай по ветке Legacy v3 (references/migration.md, § Legacy), не смешивай синтаксисы.
Проект на v3 и хочет обновиться → план v3→v4 там же.
Внимание: если скачать standalone CLI latest (это v4) и скормить ему v3-конфиг с @tailwind-директивами — сборка не заработает. Версия бинаря и синтаксис конфигурации обязаны совпадать.

Быстрый старт

1. Анализ текущего состояния

При первом запросе на оптимизацию:

Найти все HTML шаблоны (Glob templates/**/*.html)
Проверить способ подключения Tailwind (Grep по шаблонам):
- CDN через <script src="https://cdn.tailwindcss.com">
- Standalone CLI
- NPM (@tailwindcss/cli / PostCSS / Vite)
- django-tailwind пакет
Собрать статистику использования:
- Количество шаблонов
- Встроенные <style> блоки (дублирование)
- Конфигурация: @theme в CSS (v4) или tailwind.config.js (v3)
- Используемые классы Tailwind

2. Выявление проблем

Типичные проблемы с Tailwind CDN:

Загружается весь фреймворк (мегабайты) вместо нужных классов
Дублирование CSS в разных шаблонах
Нет минификации, нет tree-shaking неиспользуемых классов
Медленная загрузка на production

3. Варианты оптимизации

Вариант A: Standalone CLI (рекомендуемый для Django без Node.js)

Плюс: не требует Node.js ни в dev, ни на production
Плюс: простая настройка, автоматическое обнаружение классов (v4)
Минус: требует запуск watch-процесса при разработке

Вариант B: NPM + @tailwindcss/cli или Vite (полный контроль)

Плюс: интеграция с другими фронтенд-инструментами
Минус: требует Node.js окружение

Вариант C: django-tailwind пакет

Плюс: Django-native решение, hot-reload
Минус: дополнительная зависимость; проверь поддержку v4 перед выбором

Оптимизация: Standalone CLI v4

Шаг 1: Установка (Windows / PowerShell)

Фиксируй версию явно (проверь актуальный тег v4-линейки на https://github.com/tailwindlabs/tailwindcss/releases — на момент написания v4.3.2). Не используй latest в скриптах — мажорный релиз молча сломает сборку:

$v = "v4.3.2"
Invoke-WebRequest -Uri "https://github.com/tailwindlabs/tailwindcss/releases/download/$v/tailwindcss-windows-x64.exe" -OutFile "tailwindcss.exe"

На Linux-сервере аналогично: tailwindcss-linux-x64 того же тега.

Шаг 2: Создать input.css (конфигурация живёт в CSS, tailwind.config.js не нужен)

/* static/src/tailwind.css */
@import "tailwindcss";

/* Где искать классы. v4 сканирует проект автоматически (уважая .gitignore),
   но для Django явные источники надёжнее: */
@source "../../templates";
@source "../../apps";

/* Тема — CSS-переменные вместо tailwind.config.js */
@theme {
  --color-primary: #4f46e5;
  --color-secondary: #10b981;
}

/* Кастомные компоненты из <style> блоков */
@layer components {
  .domain-card {
    @apply transition-all duration-300 hover:-translate-y-1 hover:shadow-xl;
  }
}

Шаг 3: Сборка (PowerShell)

# Development (watch mode)
.\tailwindcss.exe -i .\static\src\tailwind.css -o .\static\dist\tailwind.css --watch

# Production (minified)
.\tailwindcss.exe -i .\static\src\tailwind.css -o .\static\dist\tailwind.min.css --minify

Шаг 4: Обновить base.html

<!-- Заменить CDN на локальный файл -->
{% load static %}
<link rel="stylesheet" href="{% static 'dist/tailwind.min.css' %}">

<!-- Удалить: -->
<!-- <script src="https://cdn.tailwindcss.com"></script> -->
<!-- <script>tailwind.config = {...}</script> -->

Пошаговый план миграции CDN → v4 по фазам (подготовка → извлечение стилей → обновление base → очистка → deploy) — в references/migration.md.

Рефакторинг дублированных стилей

Паттерны не зависят от версии (v4/v3 — @layer components и @apply работают в обеих).

Повторяющиеся утилиты → Компонент

До:

<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow transition">Кнопка 1</button>
<button class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow transition">Кнопка 2</button>

После:

@layer components {
  .btn-primary {
    @apply bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-lg shadow transition;
  }
}

<button class="btn-primary">Кнопка 1</button>
<button class="btn-primary">Кнопка 2</button>

`<style>` блоки в шаблонах → централизованный input.css

До (дублирование в каждом файле):

<!-- templates/dashboard/index.html -->
<style>
  .domain-card { transition: all 0.3s ease; }
  .domain-card:hover { transform: translateY(-5px); }
</style>

После: правило один раз в input.css → @layer components (см. Шаг 2), <style> блок из шаблона удаляется.

Inline стили → Tailwind классы