The Hyvä theme in Magento 2 has gained significant popularity due to its modern approach and performance benefits.
Since it uses the TailwindCSS framework, it is essential to understand the Hyvä theme’s CSS file directory structure to customize the theme easily.
How Tailwind CSS Works in Hyvä Theme?
Hyvä handles CSS faster compared to other Magento 2 themes, as it uses TailwindCSS, known for its fast, consistent, and responsive UI development.
TailwindCSS is a utility-first CSS file, where you don’t need to write custom CSS. You can create a design element using the predefined classes with the TailwindCSS.
The Hyvä default theme uses these TailwindCSS versions:
- TailwindCSS v3.x in Default Theme v1.2.x / v1.3.x
- TailwindCSS v2.x in Default Theme v1.0.x / v1.1.x
Before working with the CSS, below is the tailwindCSS file directory structure in Hyvä theme to under the root concept of the theme better.
Directory Structure of Theme File (/tailwind)
You will find the source CSS file of the Hyvä theme in the web/tailwind with other directories that will be mentioned in the following way:
./web/tailwind
├── components
└── theme
└── components
└── style
- Components: All the reusable elements will be defined under this directory like slider, buttons, modals, etc.
- Theme/Component: This directory generally contains larger elements or pages like category page, footer, product page etc.
It is not necessary to add only mentioned components in the directories but it is a good practice to use like this for developer’s convenience.
Make sure that all the required dependencies of the Tailwind CSS are installed within the Hyvä theme. For that, you will need to navigate to the web/tailwind directory and then run the below command:
npm ci
Get Help with Hyvä Customization
Customizing the Hyvä theme allows you to create a high-performing, manageable store. Our Hyvä theme development expertise can help you add the necessary sections, elements, and more to your theme so it runs smoothly like butter.
