shopifyshopify-appshopify-template

Create a shared css asset for all the blocks theme app extension


I am developing custom blocks through a theme app extension, however, I am planning to use tailwind to add the styles to these components, so I need to have a common css asset to use these styles on any block, if I add this resource in every block the same file it will be loaded multiple times.

{{ 'tailwind-styles.css' | asset_url | stylesheet_tag }} // -> I have to add this line to every block in my extension folder

<div>
  Custom Block
</div>

{% schema %}

{% endschema %}

I would like to know if there is a way to load this style file only once and that every block in my extension can access to these styles.

Thanks a lot


Solution

  • {% schema %}
      {
        "name": "Block name",
        "target": "section",
        "stylesheet": "custom.css",
        "javascript": "custom.js"
      }
    {% endschema %}
    

    That's how you have to add the CSS or JS to your block.

    Shopify theme extension example