skills.rest
ProxiBlue
ProxiBlueCOMMUNITY
Explore all skills by this author →
Website𝕏@proxiblueGitHub

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
One-click install
npx skills add https://github.com/ProxiBlue/claude-skills --skill hyva-tailwind-integration
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
Happy-HorizonHappy-Horizon

hyva-compile-tailwind-css

Compile Tailwind CSS for Hyvä themes in Magento 2.

Official
Intermediate
Eng0AIEng0AI
15

nextjs-blog-netlify

Provision a Next.js blog with Tailwind CSS and deploy to Netlify.

Official
Basic
Chris-MaskeyChris-Maskey

tailwind-v4-configuration

Configure Tailwind CSS v4 projects with the CSS-first @theme system.

Community
Intermediate
InchooInchoo
18

Hyvä Theme: Setup & Alpine.js Components

Create Hyvä child themes and Alpine.js components in Magento 2.

Official
Intermediate