{"id":398078,"date":"2023-09-01T11:32:07","date_gmt":"2023-09-01T11:32:07","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=398078"},"modified":"2023-09-07T12:35:49","modified_gmt":"2023-09-07T12:35:49","slug":"tailwind-css-management-in-hyva","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/","title":{"rendered":"Tailwind CSS Management in Hyva"},"content":{"rendered":"\n

In this blog we will discuss about css management in Hyva theme. We will use css framework tailwind with hyva themes and how to integrate tailwind css with Hyva Theme Extensions<\/a><\/p>\n\n\n\n

Adding a module to the tailwind purge config<\/strong><\/h3>\n\n\n\n

1. Create the tailwind.config.js<\/code> file<\/p>\n\n\n\n

Module tailwind.config.js merging<\/a><\/p>\n\n\n\n

Tailwind configuration for third party modules is located at<\/p>\n\n\n\n

view\/frontend\/tailwind\/tailwind.config.js<\/code>.<\/p>\n\n\n\n

Any paths are specified relative to this file. For example, to include the modules *.phtml<\/code>.<\/p>\n\n\n\n

Content of the file:<\/p>\n\n\n\n

\"tailwindconfigjs\"<\/figure>\n\n\n\n

Any type of file can be added to the content path: layout XML, *.html<\/code>, *.jsx<\/code>.<\/p>\n\n\n\n

Module tailwind-source.css merging<\/strong><\/h3>\n\n\n\n

Add CSS declarations that will be used in addition to a theme tailwind-source.css<\/code> file.<\/p>\n\n\n\n

By this one can add css file as the component just like hyva theme. <\/p>\n\n\n\n

Adding a module to the tailwind CSS source.<\/a><\/p>\n\n\n\n

1. Create the tailwind-source.css<\/code> file<\/p>\n\n\n\n

In modules tailwind-source.css<\/code> file is located at view\/frontend\/tailwind\/tailwind-source.css<\/code><\/p>\n\n\n\n

Create directory name components<\/strong> inside view\/frontend\/tailwind\/<\/code> and create css file like hyva in path vendor\/hyva-themes\/magento2-default-theme\/web\/tailwind<\/strong> for default theme. One can create the component for any third party module and specify its name in tailwind-source.css<\/code>.<\/p>\n\n\n\n

Url mentioned in tailwind-source.css for components<\/p>\n\n\n\n

@import url(components\/widget.css);<\/strong><\/p>\n\n\n\n

3. Generating CSS<\/a><\/p>\n\n\n\n

First, you will need to install all required node packages.<\/p>\n\n\n\n

Generating CSS for production<\/p>\n\n\n\n

cd vendor\/hyva-themes\/magento2-default-theme\/web\/tailwind<\/strong><\/p>\n\n\n\n

<\/a>npm run build-prod<\/strong><\/p>\n\n\n\n

Generating CSS during development<\/p>\n\n\n\n

cd vendor\/hyva-themes\/magento2-default-theme\/web\/tailwind <\/strong><\/p>\n\n\n\n

<\/a>npm run watch<\/strong><\/p>\n\n\n\n

This will start running the tailwind compiler continuously and any css classes added to templates in the purge configuration will be added to the styles.css<\/code> file immediately.<\/p>\n\n\n\n

In order to update the css via tailwind.config.js<\/code> and postcss.config.js<\/strong><\/p>\n\n\n\n

First, run the following command to install the npm module to the theme within the theme web\/tailwind<\/code> (vendor\/hyva-themes\/magento2-default-theme\/web\/tailwind<\/strong>) directory.<\/p>\n\n\n\n

npm install @hyva-themes\/hyva-modules<\/strong><\/code><\/p>\n\n\n\n

This command will create the node_modules<\/strong> directory at theme within the theme web\/tailwind<\/code><\/p>\n\n\n\n

(vendor\/hyva-themes\/magento2-default-theme\/web\/tailwind<\/strong>)<\/p>\n\n\n\n

Now run npm run watch<\/strong> or <\/p>\n\n\n\n

npx tailwindcss –postcss -i tailwind-source.css -o ..\/css\/styles.css –watch –verbose<\/strong><\/p>\n\n\n\n

For source component to create the updated and unified css file styles.css<\/p>\n\n\n\n

For more information read:<\/p>\n\n\n\n

https:\/\/docs.hyva.io\/hyva-themes\/working-with-tailwindcss\/index.html<\/a><\/p>\n\n\n\n

https:\/\/webkul.com\/blog\/working-with-tailwindcss-in-hyva-theme\/<\/a><\/p>\n\n\n\n

That\u2019s it !!<\/p>\n\n\n\n

Thanks & Happy Coding!<\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

In this blog we will discuss about css management in Hyva theme. We will use css framework tailwind with hyva themes and how to integrate tailwind css with Hyva Theme Extensions Adding a module to the tailwind purge config 1. Create the tailwind.config.js file Module tailwind.config.js merging Tailwind configuration for third party modules is located at view\/frontend\/tailwind\/tailwind.config.js. […]<\/a><\/p>\n","protected":false},"author":277,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-398078","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"yoast_head":"\nTailwind CSS Management in Hyva - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Tailwind CSS Hyva Management for third party modules. And how to purge the CSS for third party modules. How to manage the components.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Tailwind CSS Management in Hyva - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Tailwind CSS Hyva Management for third party modules. And how to purge the CSS for third party modules. How to manage the components.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-01T11:32:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-07T12:35:49+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png\" \/>\n<meta name=\"author\" content=\"Akash Rajput\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Akash Rajput\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/\"},\"author\":{\"name\":\"Akash Rajput\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2\"},\"headline\":\"Tailwind CSS Management in Hyva\",\"datePublished\":\"2023-09-01T11:32:07+00:00\",\"dateModified\":\"2023-09-07T12:35:49+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/\"},\"wordCount\":379,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/\",\"url\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/\",\"name\":\"Tailwind CSS Management in Hyva - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png\",\"datePublished\":\"2023-09-01T11:32:07+00:00\",\"dateModified\":\"2023-09-07T12:35:49+00:00\",\"description\":\"Tailwind CSS Hyva Management for third party modules. And how to purge the CSS for third party modules. How to manage the components.\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png\",\"width\":685,\"height\":158,\"caption\":\"tailwindconfigjs\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Tailwind CSS Management in Hyva\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2\",\"name\":\"Akash Rajput\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Akash Rajput\"},\"url\":\"https:\/\/webkul.com\/blog\/author\/akash-rajput648\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Tailwind CSS Management in Hyva - Webkul Blog","description":"Tailwind CSS Hyva Management for third party modules. And how to purge the CSS for third party modules. How to manage the components.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/","og_locale":"en_US","og_type":"article","og_title":"Tailwind CSS Management in Hyva - Webkul Blog","og_description":"Tailwind CSS Hyva Management for third party modules. And how to purge the CSS for third party modules. How to manage the components.","og_url":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2023-09-01T11:32:07+00:00","article_modified_time":"2023-09-07T12:35:49+00:00","og_image":[{"url":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png","type":"","width":"","height":""}],"author":"Akash Rajput","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Akash Rajput","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/"},"author":{"name":"Akash Rajput","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2"},"headline":"Tailwind CSS Management in Hyva","datePublished":"2023-09-01T11:32:07+00:00","dateModified":"2023-09-07T12:35:49+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/"},"wordCount":379,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png","inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/","url":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/","name":"Tailwind CSS Management in Hyva - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage"},"thumbnailUrl":"https:\/\/webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png","datePublished":"2023-09-01T11:32:07+00:00","dateModified":"2023-09-07T12:35:49+00:00","description":"Tailwind CSS Hyva Management for third party modules. And how to purge the CSS for third party modules. How to manage the components.","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2023\/09\/tailwindconfigjs.png","width":685,"height":158,"caption":"tailwindconfigjs"},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/tailwind-css-management-in-hyva\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Tailwind CSS Management in Hyva"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/9831fa86f42528fdcf494b59ff6cf6e2","name":"Akash Rajput","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/c7618982141d5bb19bbb0abea082fba6c06a2041a254b738d9132ec7f9c1bc20?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Akash Rajput"},"url":"https:\/\/webkul.com\/blog\/author\/akash-rajput648\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/398078","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/277"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=398078"}],"version-history":[{"count":5,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/398078\/revisions"}],"predecessor-version":[{"id":399018,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/398078\/revisions\/399018"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=398078"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=398078"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=398078"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}