If you are upgrading a Hyvä child theme from a version earlier than 1.4, review its Tailwind structure. Hyvä 1.4 and later no longer rely on a central tailwind.config.js file. The new structure uses hyva.config.json, tailwind-source.css and generated files in…
Building a Snap Slider with Tailwind CSS for Hyvä (Magento 2)
In this article I will show you how to build a modular, responsive slider using Tailwind CSS and a little JavaScript, without any external libraries. It is well suited to Hyvä, CMS pages or custom landing pages in Magento 2.…
Extension styles are not applied in Hyvä (Magento 2)
When you install an extension, such as a Hyvä compatibility module, its styles (usually from tailwind-source.css) may not immediately be picked up by Hyvä and Tailwind. To include those styles, run the following command from your Magento 2 root directory:…
Customizing radio button colors in the Hyvä theme (Magento 2)
You can easily change radio button colors in your Magento 2 Hyvä theme, for example by using a predefined color:
|
1 2 3 |
input[type='radio'] { @apply text-emerald-500 focus:ring-emerald-500 } |
If you have defined your own color, the syntax is similar. Without shades:
|
1 2 3 |
input[type='radio'] { @apply text-thecolor focus:ring-thecolor } |
With shades:
|
1 2 3 |
input[type='radio'] { @apply text-thecolor-500 focus:ring-thecolor-500 } |
Overriding Snowdog menu CSS in Hyvä (Magento 2)
The Magento 2 Snowdog menu defines its own styles, including hover text colors. To override those styles or other Snowdog menu CSS, follow these steps: Open the file app/design/frontend/Theme/hyva/web/tailwind/postcss.config.js in your Hyvä child theme. Add the following code to exclude…
Changing the focus ring color in the Hyvä theme (Magento 2)
To change the focus ring color in your Hyvä theme to a custom color, edit the file app/design/frontend/Theme/hyva/web/tailwind/tailwind.config.js erledigen:
|
1 2 3 4 5 6 7 8 9 |
... theme: { extend: { ringColor: { 'thecolor': '#123456' }, } } ... |
You can then use the color, for example, like this:
|
1 |
class="... focus:ring-thecolor ..." |
. To use an existing Tailwind CSS color instead, you…