Principal/WordPress Fullstack/Blueprints/Temas personalizados/Integración de Vite 6, Tailwind CSS v4 y TypeScript en tema WordPress
Volver a tarjetas «Temas personalizados»
Temas personalizados(ТЗ 21 из 54)
Especificación: Integración de Vite 6, Tailwind CSS v4 y TypeScript en tema WordPress
Temas personalizados5 шагов • +25 XP

Especificación: Integración de Vite 6, Tailwind CSS v4 y TypeScript en tema WordPress

Flujo moderno de desarrollo frontend para WordPress: Hot Module Replacement (HMR) instantáneo en desarrollo, cargador PHP basado en manifest.json de Vite 6, compilación Tailwind CSS v4 y TypeScript con tipado estricto.

~8 ч работыУровень: MiddlePHP 8.3/8.4Vite 6Tailwind CSS v4TypeScriptHot Module Replacement (HMR)dist/.vite/manifest.jsonwp_enqueue_scripts
+5 XP за шаг
Выполнено 0 из 5 шагов (0%)
Трудозатраты~8 рабочих часов
Фриланс вилка~$360 – $600 (€320 – €560)
Оценка веб-студии~$760 – $1,280 (€720 – €1200)

ТЗ заказчика (исходный бриф):

Nuestro entorno anterior con Gulp/Webpack es demasiado lento: guardar un archivo CSS tarda 5 segundos en recargarse. Queremos un flujo ultrarrápido con Vite 6, Tailwind CSS v4 y TypeScript que admita HMR instantáneo y genere paquetes de producción optimizados.
Ключевые требования:
  • •Sistema de compilación Vite 6 configurado con proxy para el entorno local de WordPress
  • •Tailwind CSS v4 con plugin oficial para Vite y configuración basada en CSS
  • •Configuración estricta de TypeScript con integración de tipos de WordPress
  • •Clase cargadora de recursos en PHP que lea manifest.json en producción e inyecte el cliente HMR de Vite en desarrollo
  • •Compilación de producción con minificación y fragmentación de código en /dist
Ограничения проекта:
  • •Funcionamiento impecable de HMR bajo HTTPS en entornos locales (LocalWP, DDEV, Docker)
  • •Cero rutas rotas para imágenes o fuentes referenciadas en CSS
  • •Exclusión de node_modules, src y archivos de configuración del zip de distribución del tema
Критерии приёмки (KPI):
  • Velocidad de actualización HMR < 50ms al modificar archivos
  • Paquete JS de producción < 40KB gzipped
  • Cero necesidad de invalidación manual de caché tras despliegues

Конфигурация блупринта под условия проекта

Выберите архитектуру и стек — шаги роадмапа, структура файлов и примеры кода переключатся автоматически:

Пошаговое практическое руководство по ТЗ

Подробный разбор архитектуры, код реализации и советы эксперта по каждому этапу:

1
Этап 1 из 5

Paso 1: Inicialización de npm e instalación de paquetes

~30 минЛегкий

Практическое руководство:

Inicialice package.json en la raíz del tema. Instale vite, @tailwindcss/vite, tailwindcss, typescript y @types/wordpress__blocks como dependencias de desarrollo.

План и контрольные точки реализации:
1Создать package.json в корне темы
2Установить vite, tailwindcss, @tailwindcss/vite и typescript
3Настроить tsconfig.json с целевой версией ES2022
4Добавить папки node_modules и dist в .gitignore
Важные технические нюансы и подводные камни:

Configure los scripts de package.json para desarrollo ('vite') y compilación ('tsc && vite build').

Совет эксперта (Best Practice):

Используйте pnpm для мгновенной установки зависимостей с жесткими ссылками, экономящими место на диске.

Ожидаемый артефакт этапа:

Готовое npm-окружение с поддержкой Vite 6 и TypeScript.

JSON
// package.json в папке темы wp-content/themes/my-custom-theme/
{
  "name": "agenticlab-custom-theme",
  "private": true,
  "version": "1.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "@tailwindcss/vite": "^4.0.0",
    "tailwindcss": "^4.0.0",
    "typescript": "^5.7.0",
    "vite": "^6.0.0"
  }
}
2
Этап 2 из 5

Paso 2: Configuración de vite.config.ts con generación de manifest.json

~40 минСредний
3
Этап 3 из 5

Paso 3: Creación de puntos de entrada src/style.css y src/main.ts

~25 минЛегкий
4
Этап 4 из 5

Paso 4: Cargador PHP de recursos con detección automática Dev / Prod

~50 минСредний
5
Этап 5 из 5

Paso 5: Validación de HMR y compilación final para producción

~30 минЛегкий

Типичные грабли на этом ТЗ

2 антипаттерна

Инструменты экосистемы Fullstack AI Lab для этого ТЗ

Интеграция

AI-Собеседование

Пройти голосовое или текстовое интервью по технологиям ТЗ

Архитектурные Воркфлоу

43 пошаговых сценария с командами CLI и готовыми конфигами