Using TailwindCSS classes in schema: class

Technical Q&A
1

Hello, I’m using TailwindCSS in my project for main CSS framework and I need to add classes to {% shema %} but I get an error that class is invalid.

Screen Shot 2021-08-30 at 11.24.25.png
Screen Shot 2021-08-30 at 11.24.25.png1104×102 8.97 KB

Here is my shema file:

{% schema %}
  {
    "name": "t:sections.main-cart-items.name",
    "class": "order-2 lg:col-start-1 lg:col-span-3 lg:order-1"
  }
  {% endschema %}

Any help?

2

Hey, @davidfaladore .

I think that colons are not initially allowed on section classes. There’s two ways around that, though.

  1. Create another wrapper inside the section markup.
  2. Disable the validation check on ThemeCheck using a .theme-check.yml file on the root of your theme. Then, add a “ValidSchema” property and set enabled to false.
# Disabled validation of the schema.
ValidSchema:
    enabled: false

This is not recommended, though. Since it disabled other schema validation.

If those adjustments are not sufficient, please refer to the ThemeCheck checks reference on the documentation: https://shopify.dev/themes/tools/theme-check/checks/valid-schema.

Hope this helps!

3

Hey @Gulayo , thanks for the answer.

I would love to do workaround #1, but I cannot wrap another div around since the root element is created from {% schema %}.

4

What I actually wanted to suggest with #1 was, to make a different container inside the pre-rendered section by Shopify. It should look like so:

I know it’s a bit different from what you want but I’m assuming this is as far as it goes (my knowledge, that is) without resorting to magical scripts.

5

Yeah that is not what I want because the parent element of the section is grid and I need this directly below it.

I resolved this issue, creating one section instead of two, so thanks for the reply’s.