Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Class ml-auto no longer working with 3.4.5+ #14013

Closed
ilkon opened this issue Jul 17, 2024 · 6 comments
Closed

Class ml-auto no longer working with 3.4.5+ #14013

ilkon opened this issue Jul 17, 2024 · 6 comments
Assignees

Comments

@ilkon
Copy link

ilkon commented Jul 17, 2024

With the release of version 3.4.5, the class ml-auto stopped working and is no longer recognized as CSS class.

For example I have html from this example (simplified):

<div class="flex items-center gap-x-6">
  <div>Block 1</div>
  <div class="ml-auto">Block 2</div>
</div>

The CSS class ml-auto is not recognized by tailwind and not added to the styles.css, so the last block is not aligned to the right.

What version of Tailwind CSS are you using?

v3.4.5, v3.4.6

What build tool (or framework if it abstracts the build tool) are you using?

Standalone CLI that comes with Tailwindcss-rails gem: tailwindcss-rails (2.6.3-x86_64-linux)

What browser are you using?

Tested in the latest Chrome and Firefox

What operating system are you using?

Linux (Debian 12)

@adamwathan
Copy link
Member

Hey! Can you provide a reproduction? I can't reproduce this when I paste that exact HTML into a fresh project.

What does your source HTML actually look like, are you using Slim or something for the HTML?

@ilkon
Copy link
Author

ilkon commented Jul 17, 2024

Hey!

Sure. Here is the page built with tailwindcss-rails v.2.6.1:

Screenshot

Screenshot from 2024-07-17 13-46-10

And here is the same page after upgrade to v.2.6.3:

Screenshot

Screenshot from 2024-07-17 13-49-37

I use Slim. Here is the relevant code:

      .flex.items-center.gap-x-6
        a[class='-m-1.5 p-1.5' href=root_path]
          span.sr-only
            | Grocelio
          = render 'shared/full_logo', html_class: 'h-6 w-auto'
        .ml-auto[
          data-ui--sidebar-target='hideButton'
          data-action='click->ui--sidebar#hide'
          data-transition-enter='ease-in-out duration-300'
          data-transition-enter-start='opacity-0'
          data-transition-enter-end='opacity-100'
          data-transition-leave='ease-in-out duration-300'
          data-transition-leave-start='opacity-100'
          data-transition-leave-end='opacity-0'
        ]
          button class='-m-2.5 p-2.5 rounded-md text-gray-700'
            span.sr-only
              | Close menu
            svg.h-6.w-6[fill='none' viewbox='0 0 24 24' stroke-width='1.5' stroke='currentColor' aria-hidden='true']
              path[stroke-linecap='round' stroke-linejoin='round' d='M6 18L18 6M6 6l12 12']

@Skulli
Copy link

Skulli commented Jul 19, 2024

Think my bug from here has the same cause

I use haml and following code is not working:

.xl:col-span-2.xl:pr-8{class: border_classes}

but

.xl:col-span-2.xl:pr-8

without custom attributes does.

In this bug the .xl:col-span-2 is not extracted, when custom attrributes are attached. border_classes are just some classes for the border inside a variable/method.

@adamwathan
Copy link
Member

Hey! This should be fixed in v3.4.7 which we released yesterday 👍

https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.4.7

@ilkon
Copy link
Author

ilkon commented Jul 27, 2024

Great! I confirm the bug is fixed.
Thanks!

@Skulli
Copy link

Skulli commented Jul 29, 2024

same for me

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants