hyva-tailwind-integration

Integrate Tailwind CSS and JavaScript into Hyvä Themes for Magento 2.

15|1|Updated Oct 24, 2025

Search Tags:#Tailwind #build-system #Magento #integrate #Hyva #config-merging

Ready to run

npx skills add https://github.com/ProxiBlue/claude-skills --skill hyva-tailwind-integration

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: hyva-tailwind-integration
Source: https://github.com/ProxiBlue/claude-skills/tree/main/hyva-tailwind-integration
Command: npx skills add https://github.com/ProxiBlue/claude-skills --skill hyva-tailwind-integration

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a clear blueprint for integrating Tailwind CSS and JavaScript within Hyvä Themes for Magento 2, unifying styles across theme, parent themes, and modules to streamline UI development.

Core Features & Use Cases

Tailwind config merging across multiple modules and themes to ensure consistent styling
Build and debug Hyvä Tailwind setups, including postcss config and Browser JIT integration
Create compatibility modules and module-specific CSS that work with Hyvä's build pipeline

Quick Start

Install dependencies in your theme's web/tailwind directory

Run: npm install
Run: npm run build-prod

Frequently Asked Questions about hyva-tailwind-integration

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

FAQPage Schema

How do I integrate Tailwind CSS into a Hyva theme for Magento 2?▼

Integrating Tailwind CSS into a Hyva theme involves using mergeTailwindConfig and postcss.config.js with postcss-importHyvaModules. This configuration unifies styles across parent themes and modules to streamline Magento 2 UI development.

How does Tailwind config merging work across multiple Magento modules?▼

Tailwind config merging across Magento modules uses the mergeTailwindConfig function to combine settings. This ensures consistent styling across your Hyva theme, parent themes, and registered modules during the build process.

Can I use Browser JIT for dynamic styling in Magento CMS content?▼

Yes, you can use Browser JIT support for dynamic styling when Magento CMS content requires it. This allows the Hyva build workflow to generate necessary CSS variables via twProps on the fly.

Does the Hyva Tailwind build workflow support module-specific CSS?▼

Yes, the Hyva Tailwind build workflow supports module-specific CSS through compatibility modules and module registration. This ensures module-specific styles work seamlessly with Hyva's build pipeline and postcss configuration.

What is the best way to debug a Hyva Tailwind build setup?▼

The best way to debug a Hyva Tailwind build setup is to inspect the postcss.config.js file and verify postcss-importHyvaModules execution. This validates that configuration merging and module registration produce consistent styles across projects.