Using TailwindCSS classes in schema: class

Solved
davidfaladore
Tourist
3 1 0

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

 

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? 

Accepted Solution (1)

Accepted Solutions
davidfaladore
Tourist
3 1 0

This is an accepted solution.

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.

View solution in original post

Replies 4 (4)
Gulayo
Tourist
9 1 1

 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!

davidfaladore
Tourist
3 1 0

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 %}.

Gulayo
Tourist
9 1 1

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:

<section class="shopify-section">
   <!-- This is where you can place your extra wrapper for the classes. -->
   <div class="order-2 lg:col-start-1 lg:col-span-3 lg:order-1">
      <!-- Content goes here. -->
   </div>
</section>

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.

davidfaladore
Tourist
3 1 0

This is an accepted solution.

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.

View solution in original post