Fix class detection in Slim templates with attached attributes and IDs

CHANGELOG.md

@@ -7,7 +7,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-- Nothing yet!
+- Fix class detection in Slim templates with attached attributes and ID ([#14019](https://github.com/tailwindlabs/tailwindcss/pull/14019))
 
 ## [3.4.6] - 2024-07-16
 

src/lib/defaultExtractor.js

@@ -152,6 +152,9 @@ function* buildRegExps(context) {
       utility,
     ])
   }
+
+  // 5. Inner matches
+  yield /[^<>"'`\s.(){}[\]#=%$][^<>"'`\s(){}[\]#=%$]*[^<>"'`\s.(){}[\]#=%:$]/g
 }
 
 // We want to capture any "special" characters

tests/default-extractor.test.js

@@ -486,6 +486,26 @@ test('classes in slim templates starting with number', async () => {
   expect(extractions).toContain('2xl:bg-red-300')
 })
 
+test('classes in slim templates with attributes added', () => {
+  let extractions = defaultExtractor(`
+    .ml-auto[
+      data-value='foo'
+    ]
+      Foo bar
+    .mr-auto[data-value='foo']
+      Foo bar
+    .mt-auto#omg
+      Foo bar
+    #omg.mb-auto
+      Foo bar
+  `)
+
+  expect(extractions).toContain(`ml-auto`)
+  expect(extractions).toContain(`mr-auto`)
+  expect(extractions).toContain(`mt-auto`)
+  expect(extractions).toContain(`mb-auto`)
+})
+
 test("classes with fractional numeric values don't also generate the whole number utility", async () => {
   const extractions = defaultExtractor(`
     <div class="px-1.5 py-2.75">Hello world!</div>