Styling the Checkout

The classes used in the checkout are compiled into the same styles.css file as any other tailwind classes used in a theme, no additional steps are required.

Overriding checkout styles

Available since @hyva-themes/hyva-modules 1.0.7

The excludeDirs option is available since release 1.0.7 of the @hyva-themes/hyva-modules library.
To check the currently installed version, change into your themes' web/tailwind directory
and run npm list @hyva-themes/hyva-modules

The magento2-hyva-checkout module includes a number of css styles in src/view/frontend/tailwind/tailwind-source.css.

If those styles don't work for you, the file can be excluded on a theme level in the themes' web/tailwind/postcss.config.js file by adding an excludeDirs option to the postcssImportHyvaModules plugin as shown in the following example:

const { postcssImportHyvaModules } = require("@hyva-themes/hyva-modules");

module.exports = {
    plugins: [
        postcssImportHyvaModules({
            excludeDirs: ["vendor/hyva-themes/magento2-hyva-checkout/src"],
        }),
        require("postcss-import"),
        require("tailwindcss/nesting"),
        require("tailwindcss"),
        require("autoprefixer"),
    ],
};

Upgrading @hyva-themes/hyva-modules

To update the library to a newer version, first change into your themes' web/tailwind directory.
To upgrade to 1.0.7 specifically, run npm upgrade @hyva-themes/hyva-modules@1.0.7
To upgrade to the latest version, run npm upgrade @hyva-themes/hyva-modules