{"id":15684,"date":"2025-05-22T17:46:30","date_gmt":"2025-05-22T12:16:30","guid":{"rendered":"https:\/\/meetanshi.com\/blog\/?p=15684"},"modified":"2025-07-14T09:17:34","modified_gmt":"2025-07-14T03:47:34","slug":"hyva-theme-css-file-directory-structure","status":"publish","type":"post","link":"https:\/\/meetanshi.com\/blog\/hyva-theme-css-file-directory-structure\/","title":{"rendered":"Learn About the Hyv\u00e4 Theme CSS File Directory Structure"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The Hyv\u00e4 theme in Magento 2 has gained significant popularity due to its modern approach and performance benefits.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since it uses the TailwindCSS framework, it is essential to understand the Hyv\u00e4 theme\u2019s CSS file directory structure to customize the theme easily.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Tailwind CSS Works in Hyv\u00e4 Theme?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hyv\u00e4 handles CSS faster compared to other Magento 2 themes, as it uses TailwindCSS, known for its fast, consistent, and responsive UI development.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">TailwindCSS is a utility-first CSS file, where you don\u2019t need to write custom CSS. You can create a design element using the predefined classes with the TailwindCSS.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">The Hyv\u00e4 default theme uses these TailwindCSS versions:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>TailwindCSS v3.x in Default Theme v1.2.x \/ v1.3.x<\/li>\n\n\n\n<li>TailwindCSS v2.x in Default Theme v1.0.x \/ v1.1.x<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">Before working with the CSS, below is the tailwindCSS file directory structure in Hyv\u00e4 theme to under the root concept of the theme better.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Directory Structure of Theme File (\/tailwind)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You will find the source CSS file of the Hyv\u00e4 theme in the <strong>web\/tailwind<\/strong> with other directories that will be mentioned in the following way:&nbsp;<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">.\/web\/tailwind\n\u251c\u2500\u2500 components\n\u2514\u2500\u2500 theme\n    \u2514\u2500\u2500 components\n        \u2514\u2500\u2500 style\n<\/pre>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Components: <\/strong>All the reusable elements will be defined under this directory like slider, buttons, modals, etc.&nbsp;<\/li>\n\n\n\n<li><strong>Theme\/Component:<\/strong> This directory generally contains larger elements or pages like category page, footer, product page etc.<\/li>\n<\/ul>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"492\" height=\"1102\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components.png\" alt=\"Components Theme Component\" class=\"wp-image-15688\" srcset=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components.png 492w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components-250x560.png 250w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components-403x903.png 403w, https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/05\/Components-theme-components-120x269.png 120w\" sizes=\"auto, (max-width: 492px) 100vw, 492px\" \/><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">It is not necessary to add only mentioned components in the directories but it is a good practice to use like this for developer\u2019s convenience.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure that all the required dependencies of the Tailwind CSS are installed within the Hyv\u00e4 theme. For that, you will need to navigate to the <strong>web\/tailwind<\/strong> directory and then run the below command:<\/p>\n\n\n\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"generic\" data-enlighter-theme=\"\" data-enlighter-highlight=\"\" data-enlighter-linenumbers=\"\" data-enlighter-lineoffset=\"\" data-enlighter-title=\"\" data-enlighter-group=\"\">npm ci<\/pre>\n\n\n\n<h2 class=\"wp-block-heading\">Get Help with Hyv\u00e4 Customization<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Customizing the Hyv\u00e4 theme allows you to create a high-performing, manageable store. Our Hyv\u00e4 theme development expertise can help you add the necessary sections, elements, and more to your theme so it runs smoothly like butter.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><div class=\"meetanshi-cta\">\r\n<div class=\"cta-content-wrapper\">\r\n<span> Hyv\u00e4 Development Service<\/span>\r\n<p>Get a fast-loading store in less than 7 weeks with Hyv\u00e4 theme<\/p>\r\n<a href=\"https:\/\/meetanshi.com\/hyva-theme-development-service\" target=\"_blank\" class=\"btn-primary\">Hire Us<\/a>\r\n<\/div>\r\n<div class=\"cta-image-new\">\r\n<img decoding=\"async\" src=\"https:\/\/meetanshi.com\/blog\/wp-content\/uploads\/2025\/11\/hyva-theme-development-service.png\" alt=\"Hyva Theme Development Service\">\r\n<\/div>\r\n<\/div><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Hyv\u00e4 theme in Magento 2 has gained significant popularity due to its modern approach and performance benefits. Since it uses the TailwindCSS framework, it&#8230;<\/p>\n","protected":false},"author":5,"featured_media":15693,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[34,5869],"tags":[],"class_list":["post-15684","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-magento","category-hyva-themes"],"acf":[],"_links":{"self":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/15684","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/comments?post=15684"}],"version-history":[{"count":4,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/15684\/revisions"}],"predecessor-version":[{"id":15697,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/posts\/15684\/revisions\/15697"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media\/15693"}],"wp:attachment":[{"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/media?parent=15684"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/categories?post=15684"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/meetanshi.com\/blog\/wp-json\/wp\/v2\/tags?post=15684"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}