Working with TailwindCSS in Hyvä Theme
Hyvä Theme uses the TailwindCSS framework that is very easy to customize, responsive, and fits on all devices. It creates a very small size of CSS stylesheets which reduces the amount of data your site visitor has to download.
Tailwind is a utility-based CSS framework that you don’t typically write the CSS classes yourself, instead, you can use the classes that are present within Tailwind.
Take a look at this example:
<div class="m-4 mt-8 p-2 bg-primary border border-secondary w-full md:w-1/2">
It translates to:
div {
margin: 1rem;
margin-top: 2rem;
padding: 0.5rem;
background-color: #f1f1f1; /* the color for `primary` is defined in our config */
border-width: 1px;
border-color: #c9c9c9; /* the color `secondary` is defined in our config */
width: 100%;
}
@media (min-width: 768px) {
div {
width: 50%;
}
}
Tailwind Purging settings
A typical stylesheet for a Hyvä Theme is about 35 kb (that’s 7.5 kb after GZIP).
This is because It removes all styles that aren’t used, leaving only the required styles.
It’s important to understand how Hyvä uses PurgeCSS to reduce the number of classes in the final output.
“PurgeCSS analyzes your content and your css files. Then it matches the selectors used in your files with the one in your content files. It removes unused selectors from your css, resulting in smaller css files.”
In hyvä purging, the script looks up all the Tailwind classes we use in our theme and extract them from the original, complete Tailwind stylesheet.
How Purging is done in Hyvä theme?
Tailwind needs to know which classes are used, we need to point the build script to the directories where our .phtml files are located. Typically, that would be app/design/frontend/Acme/default/templates/
If you have .phtml files with TailwindCSS classes in app/code or vendor/, you’ll have included these in your tailwind configuration, too.
Hence add the directories into the tailwind configuration with the following steps mentioned below.
- go to “tailwind.config.js” file of your theme.
- Register the directories in to the script as shown below.
module.exports = {
...
purge: {
content: [
// this theme's phtml files
'../../**/*.phtml',
// parent theme in vendor/
'../../../../../../../vendor/hyva-themes/magento2-default-theme/**/*.phtml',
// hyva theme-module templates
'../../../../../../../vendor/hyva-themes/magento2-theme-module/src/view/frontend/templates/**/*.phtml',
// app/code phtml files (if you need tailwind classes from app/code modules)
//'../../../../../../../app/code/**/*.phtml',
// react app src files (if Hyvä Checkout is installed in app/code)
//'../../../../../../../app/code/**/src/**/*.jsx',
// react app src files in vendor (If Hyvä Checkout is installed in vendor)
//'../../../../../../../vendor/hyva-themes/magento2-hyva-react-checkout/src/reactapp/src/**/*.jsx',
//'../../../../../../../vendor/hyva-themes/magento2-hyva-react-checkout/src/view/frontend/templates/react-container.phtml',
// widget block classes from app/code
//'../../../../../../../app/code/**/Block/Widget/**/*.php'
]
}
}
Advanced Configuration
This can be useful If you wish to inherit from the parent theme Hyva/default theme but not to check for any templates in it that you have overridden in your own theme. So that when you upgrade the hyvä theme then no unused Tailwind CSS classes will be added.
To achieve this add the few lines of code in the “web/tailwind/tailwind.config.js”.
const { colors } = require('tailwindcss/defaultTheme')
const path = require('path')
const fs = require('fs')
/**
* Finds and lists all files in a directory with a specific extension
* https://gist.github.com/victorsollozzo/4134793
* @return Array
*/
function recFindByExt(base,ext, files,result) {
files = files || fs.readdirSync(base)
result = result || []
files.forEach(
function (file) {
const newbase = path.join(base,file);
if (fs.statSync(newbase).isDirectory()) {
result = recFindByExt(newbase, ext, fs.readdirSync(newbase), result)
} else {
if (file.substr(-1*(ext.length+1)) == '.' + ext) {
result.push(newbase)
}
}
}
)
return result
}
/**
* Returns an array of all files to be used in tailwind purge.content
*/
const purgeContent = () => {
// Add any sub-directories you wish to be excluded by Tailwind when checking
// the hyva-default theme.
// For example you may have removed Magento_Review from your store, and therefore
// do not wish for Tailwind to generate any CSS for it.
const EXCLUDE_FROM_PARENT = []; // e.g. ['Magento_Review']
// Declare array to stores all paths for hyvaDefault theme's phtml files
let hyvaDefault = recFindByExt('../../../../../../../vendor/hyva-themes/magento2-default-theme/', 'phtml');
// Declare array to stores all paths for your current theme's phtml files
let currentTheme = recFindByExt('../../','phtml');
// Filter the array of templates from hyva-default to remove any templates overridden in your theme.
// A similar filter can be used on other parent theme's if you have a
// multi-store Magento install using a different theme structure.
hyvaDefault = hyvaDefault.filter(function(item) {
let isAllowed = true;
for(const key in this) {
if (item.includes(this[key].replace(/..//g, ''))) {
isAllowed = false;
}
}
return isAllowed;
}, currentTheme.concat(EXCLUDE_FROM_PARENT));
return currentTheme.concat(hyvaDefault);
}
module.exports = {
// ...omitted code
purge: {
content: purgeContent()
}
}
The above code is just an example. You can customize it according to your requirements for now in purgeContent() we have added only the files from Magento’s app/code directory
Generating CSS
First, you will need to install all required node packages.
cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/ npm install
Please note the minimum required Node.js version for TailwindCSS is available.
At the time of writing the minimum version is node 12.13.0.
Generating CSS for production
You can generate the styles using the command
cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/ npm run build-prod
Generating CSS during development run
cd /path/to/project/app/design/frontend/Acme/default/web/tailwind/ npm run watch
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 file immediately.
Read more about controlling file sizes with Tailwind and PurgeCSS
CSS file directory structure in Hyvä Theme
The main source CSS files are located in “web/tailwind/components" and "web/tailwind/theme/components"
The tailwind/components directory is for reusable elements such as buttons, sliders, inputs
The tailwind/theme/components directory is intended for larger components or pages, such as the category page, account pages, the header etc, “tailwind/components” also contains product-page.css and category-page.css.
Highly recommended to look into this Tailwind before working on hyvä themes.
Videos about TaliwindCSS:- https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0
Previous Blog: – Working with AlpineJs in Hyvä Themes
Next Blog : – How to create your own theme in Hyvä Theme?