Creating Custom Theme

To create Custom Theme based on Venta Theme, firstly, create a new theme with instructions from The Official Magento Docs, and set the parent theme as Magebit/venta.

Once that is done, you can create a web/tailwind folder under your newly created theme, and add these files:

.gitignore, with content:

node_modules/

package.json and package-lock.json to be copied from Venta Theme:

cp vendor/magebitcom/magento2-venta-theme/web/tailwind/package.json app/design/frontend/<Vendor>/<theme>/web/tailwind/
cp vendor/magebitcom/magento2-venta-theme/web/tailwind/package-lock.json app/design/frontend/<Vendor>/<theme>/web/tailwind/

postcss.config.js with content:

const baseConfig = {

}

// -------- DO NOT EDIT AFTER THIS LINE ----------

module.exports = require('deepmerge')(require('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/postcss.config.js'), baseConfig)

tailwind-source.css with content:

/* purgecss start ignore */
@import url('tailwindcss/base');
@import url('tailwindcss/components');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/category-page.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/product-prices.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/forms.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/messages.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/wishlist.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/modal.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/slider.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/structure.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/button.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/theming.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/transitions.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/typography.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/page-builder.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/lists.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/links.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/shimmer.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/product-list.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/table.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/search-results-page.css');

/* purgecss end ignore */

@import url('tailwindcss/utilities');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/theme.css');

tailwind.config.js with content:

const hyvaModules = require('@hyva-themes/hyva-modules');
const defaultConfig = require('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/tailwind.config.js')
const path = require('path');
const fs = require('fs');
const utils = require('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/tailwind-content.js');

// -------- DO NOT EDIT BEFORE THIS LINE ----------

function getFilteredContent() {
    const themeRoot = path.resolve(__dirname, '../../');
    const projectRoot = utils.resolveProjectRoot(themeRoot);
    const ventaRoot = path.join(projectRoot, 'vendor/magebitcom/magento2-venta-theme/');
    const hyvaRoot = path.join(projectRoot, 'vendor/hyva-themes/magento2-default-theme/');
    return utils.buildContent(themeRoot, projectRoot, [ventaRoot, hyvaRoot]);
}

const baseConfig = hyvaModules.mergeTailwindConfig({
    presets: [
        defaultConfig,
        require('./tailwind.browser-jit-config.js')
    ],
    content: getFilteredContent()
});

// -------- DO NOT EDIT AFTER THIS LINE ----------

module.exports = baseConfig;

tailwind.browser-jit-config.js with content:

module.exports = {
    theme: {
        extend: {
        }
    }
}

Multi-Theme Setup

If you require more websites to be based off of one theme, you can set up a Base -> Child approach, to have only the minimal changes in each of your child themes. To achieve this Base -> Child approach, follow the steps above to create the Base theme.

To create a child theme, firstly, create a new theme with instructions from The Official Magento Docs, and set the parent theme as your base theme.

Once that is done, you can create a web/tailwind folder under your newly created theme, and add these files:

.gitignore, with content:

node_modules/

package.json and package-lock.json to be copied from your base theme:

cp app/design/frontend/<Vendor>/<theme>/web/tailwind/package.json app/design/frontend/<Vendor>/<theme_child>/web/tailwind/
cp app/design/frontend/<Vendor>/<theme>/web/tailwind/package-lock.json app/design/frontend/<Vendor>/<theme_child>/web/tailwind/

postcss.config.js with content:

const baseConfig = {

}

// -------- DO NOT EDIT AFTER THIS LINE ----------

module.exports = require('deepmerge')(require('../../../BaseTheme/web/tailwind/postcss.config.js'), baseConfig)

tailwind-source.css with content:

/* purgecss start ignore */
@import url('tailwindcss/base');
@import url('tailwindcss/components');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/category-page.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/product-prices.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/forms.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/messages.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/wishlist.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/modal.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/slider.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/structure.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/button.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/theming.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/transitions.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/typography.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/page-builder.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/lists.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/links.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/shimmer.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/product-list.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/table.css');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/components/search-results-page.css');

/* purgecss end ignore */

@import url('tailwindcss/utilities');
@import url('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/theme.css');

INFO

If you have any of these files created in your base theme, replace the path here with the path to the base theme.

tailwind.config.js with content:

const hyvaModules = require('@hyva-themes/hyva-modules');
const defaultConfig = require('../../../BaseTheme/web/tailwind/tailwind.config.js')
const path = require('path');
const fs = require('fs');
const utils = require('../../../../../../../vendor/magebitcom/magento2-venta-theme/web/tailwind/tailwind-content.js');

// -------- DO NOT EDIT BEFORE THIS LINE ----------

function getFilteredContent() {
    const childThemeRoot = path.resolve(__dirname, '../../');
    const projectRoot = utils.resolveProjectRoot(childThemeRoot);
    const baseThemeRoot = path.join(childThemeRoot, '../BaseTheme');
    const ventaRoot = path.join(projectRoot, 'vendor/magebitcom/magento2-venta-theme/');
    const hyvaRoot = path.join(projectRoot, 'vendor/hyva-themes/magento2-default-theme/');

    return utils.buildContent(childThemeRoot, projectRoot, [baseThemeRoot, ventaRoot, hyvaRoot]);
}

const baseConfig = hyvaModules.mergeTailwindConfig({
    presets: [
        defaultConfig,
        require('./tailwind.browser-jit-config.js')
    ],
    content: getFilteredContent()
});

// -------- DO NOT EDIT AFTER THIS LINE ----------

module.exports = baseConfig

tailwind.browser-jit-config.js with content:

module.exports = {
    theme: {
        extend: {
        }
    }
}

Compiling the new theme

To compile the new theme, we must run some commands:

npm --prefix app/design/frontend/<Vendor>/<theme>/web/tailwind ci
npm --prefix app/design/frontend/<Vendor>/<theme>/web/tailwind run build-prod

Theme Installation

For the theme to compile, npm ci must be run in the vendor directory of Venta Theme as indicated in the Installation steps.

Theme Installation

Each of your Base / Child themes need to be compiled.

After the compilation is complete, you can set the theme in the Content -> Design -> Configuration section in the Admin panel.