Tailwind Classes not recognised due to string storage

Created on 10 March 2024, 9 months ago
Updated 17 May 2024, 7 months ago

Thanks for this module, I use it everywhere I use Layout Builder - which is most sites I touch.

Problem/Motivation

I have Tailwind set up to scan the Drupal config directory during build and this then adds any classes that it finds into the final css. This way anything added to the config of a view, block or layout builder class etc gets added.

The problem is that TW build doesn't recognise:

classes: "container\r\nmax-w-md\r\ntw-mx-auto"

as containing any valid TW classes.

It does recognise:

classes: " container \r\n max-w-md \r\n tw-mx-auto "
so there is an easy workaround, it results in a bit more whitespace in the HTML, but that's okay with me.
Putting multiple classes on a single line with spaces as needed also works, but is contrary to the instructions on the field when adding/editing classes.

Proposed resolution

If the classes were stored as an array then it would solve the issue without any need for a workaround.

classes: 
  - container
  - max-w-md
  - mx-auto
✨ Feature request
Status

Active

Version

2.0

Component

Code

Created by

πŸ‡³πŸ‡ΏNew Zealand andyd328 Lyttelton, NZ πŸ‡³πŸ‡Ώ

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Comments & Activities

  • Issue created by @andyd328
  • πŸ‡³πŸ‡ΏNew Zealand andyd328 Lyttelton, NZ πŸ‡³πŸ‡Ώ
  • πŸ‡ΊπŸ‡ΈUnited States anilu@ Houston, TX

    We have a similar use case on a decoupled website. When we expose the data to GraphQL we are getting a string with the styles machine names but not the classes.

    query MyQuery {
      node(id: "749d54d4-04f9-443f-a2cc-3ca56f7266f2") {
        ... on NodePage {
          id
          path
          title
          sections {
            components {
              id
            }
            settings
            id
          }
        }
      }
    }
Production build 0.71.5 2024