#

Tailwind CSS

PrettyBlocks now implements a CSS layer to manage the style of its own components. The library used is Tailwind CSS. To avoid conflicts with other PrestaShop components, themes, or modules, Tailwind classes are prefixed with tw_.

Example:

1<article class="tw_border tw_shadow tw_rounded-md tw_max-w-sm tw_w-full tw_mx-auto tw_pb-2 tw_mb-2" data-id-product="{$product.id_product|escape:'htmlall':'UTF-8'}" data-id-product-attribute="{$product.id_product_attribute|escape:'htmlall':'UTF-8'}">
2...
3</article>

To modify PrettyBlocks elements from your child theme, override the views/css/_dev folder.

#

Spacings

In version 3.1, PrettyBlocks allows you to add margins and paddings directly to your Blocks. On a range of 1-12, the classes mt-1 ... mt-12, pt-1...pt-12 etc. are automatically imported via Tailwind CSS.

You can use your own styles if you don't want to import the PrettyBlocks CSS Core (in the Settings management). You can find the imported classes in this link