glh123456/OmniGIRL huggingface dataset:
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Div content with brackets `[]` prevents arbitrary class from being generated
## This works: https://play.tailwindcss.com/0VLICQ8oUW

<img width="810" alt="image" src="https://user-images.githubusercontent.com/111561/209682078-7e43a107-52ff-4006-8c37-ec44414abe12.png">

## This does not work: https://play.tailwindcss.com/5KJf7xDKv6
<img width="821" alt="image" src="https://user-images.githubusercontent.com/111561/209682172-de1dcaaa-6e69-429b-907f-840691e35ceb.png">



Hints:
Hey @tordans I am trying to understand the problem statement. If you elaborate about the project and the problem it will be helpful for me cause I am new in this project and I am trying to contribute in this project.
I did check through your code and didnt find any issue just pust a space before  ending "


Patch:
diff --git a/src/lib/defaultExtractor.js b/src/lib/defaultExtractor.js
--- a/src/lib/defaultExtractor.js
+++ b/src/lib/defaultExtractor.js
@@ -28,8 +28,14 @@ function* buildRegExps(context) {
       : ''
 
   let utility = regex.any([
-    // Arbitrary properties
-    /\[[^\s:'"`]+:[^\s]+\]/,
+    // Arbitrary properties (without square brackets)
+    /\[[^\s:'"`]+:[^\s\[\]]+\]/,
+
+    // Arbitrary properties with balanced square brackets
+    // This is a targeted fix to continue to allow theme()
+    // with square brackets to work in arbitrary properties
+    // while fixing a problem with the regex matching too much
+    /\[[^\s:'"`]+:[^\s]+?\[[^\s]+?\][^\s]+?\]/,
 
     // Utilities
     regex.pattern([


Test patch:
diff --git a/tests/default-extractor.test.js b/tests/default-extractor.test.js
--- a/tests/default-extractor.test.js
+++ b/tests/default-extractor.test.js
@@ -488,3 +488,11 @@ test('ruby percent string array', () => {
 
   expect(extractions).toContain(`text-[#bada55]`)
 })
+
+test('arbitrary properties followed by square bracketed stuff', () => {
+  let extractions = defaultExtractor(
+    '<div class="h-16 items-end border border-white [display:inherit]">[foo]</div>'
+  )
+
+  expect(extractions).toContain(`[display:inherit]`)
+})
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
@apply method is invalid after upgrade to 3.3.1
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v3.3.1

**What build tool (or framework if it abstracts the build tool) are you using?**

webpack 5.77.0

**What version of Node.js are you using?**

v16.16.0

**What browser are you using?**
Chrome

**What operating system are you using?**

macOS

**Reproduction URL**
https://github.com/Postcatlab/postcat/blob/3411792892633e5c53d4e86466a0fd52f4599f4a/src/browser/src/app/pages/workspace/overview/project-list/project-list.component.scss

**Describe your issue**
My previous version was 3.2.4 After upgrading to the latest version of 3.3.1, @apply is invalid.
* Angular 15.2.5

```scss
:host {
  .operate-btn-list {
    display: none;
  }

  .ant-card {
    @include hover-item;
  }

  ::ng-deep {
    .ant-list-items {
      .ant-list-item {
        @apply px-[10px] rounded-[3px];
        @include hover-item;

        border: 1px solid transparent;
      }
    }
  }
}
```
previous display

![image](https://user-images.githubusercontent.com/15225835/229733712-d9d19b15-8461-4113-b2a5-7298d8cb71c4.png)

current display

![](https://user-images.githubusercontent.com/15225835/229733180-e01260c1-4772-45dd-848c-32ceb7696db1.png)





Hints:

Patch:
diff --git a/src/util/formatVariantSelector.js b/src/util/formatVariantSelector.js
--- a/src/util/formatVariantSelector.js
+++ b/src/util/formatVariantSelector.js
@@ -337,6 +337,9 @@ let pseudoElementExceptions = [
   '::-webkit-scrollbar-track-piece',
   '::-webkit-scrollbar-corner',
   '::-webkit-resizer',
+
+  // Old-style Angular Shadow DOM piercing pseudo element
+  '::ng-deep',
 ]
 
 /**


Test patch:
diff --git a/tests/apply.test.js b/tests/apply.test.js
--- a/tests/apply.test.js
+++ b/tests/apply.test.js
@@ -2427,4 +2427,34 @@ crosscheck(({ stable, oxide }) => {
       `)
     })
   })
+
+  stable.test('::ng-deep pseudo element is left alone', () => {
+    let config = {
+      darkMode: 'class',
+      content: [
+        {
+          raw: html` <div class="foo bar"></div> `,
+        },
+      ],
+    }
+
+    let input = css`
+      ::ng-deep .foo .bar {
+        @apply font-bold;
+      }
+    `
+
+    return run(input, config).then((result) => {
+      expect(result.css).toMatchFormattedCss(css`
+        ::ng-deep .foo .bar {
+          font-weight: 700;
+        }
+      `)
+    })
+  })
+
+  // 1. `::ng-deep` is deprecated
+  // 2. It uses invalid selector syntax that Lightning CSS does not support
+  // It may be enough for Oxide to not support it at all
+  oxide.test.todo('::ng-deep pseudo element is left alone')
 })
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Animation Names Won't Be Escaped If Prefix Contains Especial Characters
**What version of Tailwind CSS are you using?**

v3.3.2

**What build tool (or framework if it abstracts the build tool) are you using?**

Tailwind Play

**What version of Node.js are you using?**

N/A

**What browser are you using?**

Chrome, Safari

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/ojvPuQftlm

**Describe your issue**

Using the `@` prefix in my configuration file will allow me to create animation utilities without escaping it, therefore not producing valid animations.

The link above allows you to test the same implementation with the `animate-spin` and `@animate-spin` utilities (by tweaking the prefix) to see that the output CSS does not escape the `@spin` animation.


Hints:

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -933,7 +933,7 @@ export let corePlugins = {
   },
 
   animation: ({ matchUtilities, theme, config }) => {
-    let prefixName = (name) => `${config('prefix')}${escapeClassName(name)}`
+    let prefixName = (name) => escapeClassName(config('prefix') + name)
     let keyframes = Object.fromEntries(
       Object.entries(theme('keyframes') ?? {}).map(([key, value]) => {
         return [key, { [`@keyframes ${prefixName(key)}`]: value }]


Test patch:
diff --git a/tests/animations.test.js b/tests/animations.test.js
--- a/tests/animations.test.js
+++ b/tests/animations.test.js
@@ -277,3 +277,33 @@ test('with dots in the name and prefix', () => {
     `)
   })
 })
+
+test('special character prefixes are escaped in animation names', () => {
+  let config = {
+    prefix: '@',
+    content: [{ raw: `<div class="@animate-one"></div>` }],
+    theme: {
+      extend: {
+        keyframes: {
+          one: { to: { transform: 'rotate(360deg)' } },
+        },
+        animation: {
+          one: 'one 2s',
+        },
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @keyframes \@one {
+        to {
+          transform: rotate(360deg);
+        }
+      }
+      .\@animate-one {
+        animation: 2s \@one;
+      }
+    `)
+  })
+})
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
`/` is not allowed in arbitrary modifier
Version: 3.3.5
Repro: https://play.tailwindcss.com/yLjHBexR1d

Not really something I wrote in real life, just something I though of when testing edge cases of my own implementation.
So could be considered as not supported, this is issue is just to let you know. Feel free to close!




Hints:

Patch:
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -87,6 +87,22 @@ function isArbitraryValue(input) {
 function splitUtilityModifier(modifier) {
   let slashIdx = modifier.lastIndexOf('/')
 
+  // If the `/` is inside an arbitrary, we want to find the previous one if any
+  // This logic probably isn't perfect but it should work for most cases
+  let arbitraryStartIdx = modifier.lastIndexOf('[', slashIdx)
+  let arbitraryEndIdx = modifier.indexOf(']', slashIdx)
+
+  let isNextToArbitrary = modifier[slashIdx - 1] === ']' || modifier[slashIdx + 1] === '['
+
+  // Backtrack to the previous `/` if the one we found was inside an arbitrary
+  if (!isNextToArbitrary) {
+    if (arbitraryStartIdx !== -1 && arbitraryEndIdx !== -1) {
+      if (arbitraryStartIdx < slashIdx && slashIdx < arbitraryEndIdx) {
+        slashIdx = modifier.lastIndexOf('/', arbitraryStartIdx)
+      }
+    }
+  }
+
   if (slashIdx === -1 || slashIdx === modifier.length - 1) {
     return [modifier, undefined]
   }


Test patch:
diff --git a/tests/arbitrary-values.test.js b/tests/arbitrary-values.test.js
--- a/tests/arbitrary-values.test.js
+++ b/tests/arbitrary-values.test.js
@@ -639,6 +639,21 @@ it('should support underscores in arbitrary modifiers', () => {
   })
 })
 
+it('should support slashes in arbitrary modifiers', () => {
+  let config = {
+    content: [{ raw: html`<div class="text-lg/[calc(50px/1rem)]"></div>` }],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .text-lg\/\[calc\(50px\/1rem\)\] {
+        font-size: 1.125rem;
+        line-height: calc(50px / 1rem);
+      }
+    `)
+  })
+})
+
 it('should not insert spaces around operators inside `env()`', () => {
   let config = {
     content: [{ raw: html`<div class="grid-cols-[calc(env(safe-area-inset-bottom)+1px)]"></div>` }],
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
important modifier on animation breaks keyframes
<!-- Please provide all of the information requested below. We're a small team and without all of this information it's not possible for us to help and your bug report will be closed. -->

**What version of Tailwind CSS are you using?**

v3.4.0

**What build tool (or framework if it abstracts the build tool) are you using?**

postcss 8.4.32

**What version of Node.js are you using?**

v21.4.0

**What browser are you using?**

Chrome

**What operating system are you using?**

macOS

**Reproduction URL**

https://play.tailwindcss.com/4mir5NtQdV

**Describe your issue**

If you use the !important modifier for animations, the keyframe steps of the animation are removed (and the animation breaks). You can also see this in tailwind intellisense.

![CleanShot 2023-12-19 at 23 02 29@2x](https://github.com/tailwindlabs/tailwindcss/assets/2500670/f2079572-00a0-4825-a79f-2e4d7015eeed)



Hints:

Patch:
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -118,10 +118,20 @@ function applyImportant(matches, classCandidate) {
 
   let result = []
 
+  function isInKeyframes(rule) {
+    return rule.parent && rule.parent.type === 'atrule' && rule.parent.name === 'keyframes'
+  }
+
   for (let [meta, rule] of matches) {
     let container = postcss.root({ nodes: [rule.clone()] })
 
     container.walkRules((r) => {
+      // Declarations inside keyframes cannot be marked as important
+      // They will be ignored by the browser
+      if (isInKeyframes(r)) {
+        return
+      }
+
       let ast = selectorParser().astSync(r.selector)
 
       // Remove extraneous selectors that do not include the base candidate


Test patch:
diff --git a/tests/important-modifier.test.js b/tests/important-modifier.test.js
--- a/tests/important-modifier.test.js
+++ b/tests/important-modifier.test.js
@@ -147,3 +147,32 @@ test('the important modifier works on utilities using :where()', () => {
     `)
   })
 })
+
+test('the important modifier does not break keyframes', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="!animate-pulse"></div> `,
+      },
+    ],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  return run(input, config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      @keyframes pulse {
+        50% {
+          opacity: 0.5;
+        }
+      }
+
+      .\!animate-pulse {
+        animation: 2s cubic-bezier(0.4, 0, 0.6, 1) infinite pulse !important;
+      }
+    `)
+  })
+})
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
`<alpha-value>` is not recognized on reuse
**What version of Tailwind CSS are you using?**

v3.4.3 (last)

**Reproduction URL**

https://play.tailwindcss.com/iK3QZJynRz?file=config

**Describe your issue**

<img width="800" alt="image" src="https://github.com/tailwindlabs/tailwindcss/assets/625005/d43b6f8d-47a8-4994-8568-3767c0ce76cb">

Tailwind config
```
/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    extend: {
      colors: {
                                         ⬇⬇⬇⬇⬇⬇⬇⬇                     ⬇⬇⬇⬇⬇⬇⬇⬇
        primary: 'light-dark(rgb(0 0 0 / <alpha-value>), rgb(255 255 255 / <alpha-value>))',
      }
    },
  },
}
```

CSS
```
                              ⬇⬇                     ⬇⬇⬇⬇⬇⬇⬇⬇
color: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / <alpha-value>));
```

When adding a color to a Tailwind setting with more than one use of `<alpha-value>` in a single value, only the first occurrence of `<alpha-value>` is recognized.

More information is available [here](https://github.com/tailwindlabs/tailwindcss/discussions/12172#discussioncomment-9236533) (сс @olyckne).


Hints:

Patch:
diff --git a/src/util/pluginUtils.js b/src/util/pluginUtils.js
--- a/src/util/pluginUtils.js
+++ b/src/util/pluginUtils.js
@@ -124,7 +124,7 @@ export function parseColorFormat(value) {
   if (typeof value === 'string' && value.includes('<alpha-value>')) {
     let oldValue = value
 
-    return ({ opacityValue = 1 }) => oldValue.replace('<alpha-value>', opacityValue)
+    return ({ opacityValue = 1 }) => oldValue.replace(/<alpha-value>/g, opacityValue)
   }
 
   return value


Test patch:
diff --git a/tests/opacity.test.js b/tests/opacity.test.js
--- a/tests/opacity.test.js
+++ b/tests/opacity.test.js
@@ -673,6 +673,30 @@ it('should be possible to use an <alpha-value> as part of the color definition w
   })
 })
 
+it('should be possible to use multiple <alpha-value>s as part of the color definition with an opacity modifiers', () => {
+  let config = {
+    content: [
+      {
+        raw: html` <div class="bg-primary/50"></div> `,
+      },
+    ],
+    corePlugins: ['backgroundColor'],
+    theme: {
+      colors: {
+        primary: 'light-dark(rgb(0 0 0 / <alpha-value>), rgb(255 255 255 / <alpha-value>))',
+      },
+    },
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    expect(result.css).toMatchFormattedCss(css`
+      .bg-primary\/50 {
+        background-color: light-dark(rgb(0 0 0 / 0.5), rgb(255 255 255 / 0.5));
+      }
+    `)
+  })
+})
+
 it('should be possible to use an <alpha-value> as part of the color definition with an opacity modifiers', () => {
   let config = {
     content: [
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Col-end does not support negative values
This is a very small issue, col-end does not support negative values out of the box, but negative values makes a lot of sense there. This happens on **v3.4.3**.

https://play.tailwindcss.com/8L8o0VhDfr

The code is here:

~~~ html
<div class="grid grid-cols-3">
  <div class="-col-end-1">BROKEN</div>
  <div class="col-end-[-1]">WORKS</div>
</div>
~~~

I'm not sure if this is exactly a bug, because it is not explicitly described in the documentation, but it is a broken expectation (I've expected that to work for consistency).


Hints:

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -741,11 +741,19 @@ export let corePlugins = {
   zIndex: createUtilityPlugin('zIndex', [['z', ['zIndex']]], { supportsNegativeValues: true }),
   order: createUtilityPlugin('order', undefined, { supportsNegativeValues: true }),
   gridColumn: createUtilityPlugin('gridColumn', [['col', ['gridColumn']]]),
-  gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]]),
-  gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]]),
+  gridColumnStart: createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]], {
+    supportsNegativeValues: true,
+  }),
+  gridColumnEnd: createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]], {
+    supportsNegativeValues: true,
+  }),
   gridRow: createUtilityPlugin('gridRow', [['row', ['gridRow']]]),
-  gridRowStart: createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]]),
-  gridRowEnd: createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]]),
+  gridRowStart: createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]], {
+    supportsNegativeValues: true,
+  }),
+  gridRowEnd: createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]], {
+    supportsNegativeValues: true,
+  }),
 
   float: ({ addUtilities }) => {
     addUtilities({


Test patch:
diff --git a/tests/negative-prefix.test.js b/tests/negative-prefix.test.js
--- a/tests/negative-prefix.test.js
+++ b/tests/negative-prefix.test.js
@@ -360,3 +360,27 @@ test('addUtilities without negative prefix + variant + negative prefix in conten
 
   expect(result.css).toMatchCss(css``)
 })
+
+test('negative col/row-start/end utilities', () => {
+  let config = {
+    content: [{ raw: html`<div class="-col-start-4 -col-end-4 -row-start-4 -row-end-4"></div>` }],
+    corePlugins: { preflight: false },
+  }
+
+  return run('@tailwind utilities;', config).then((result) => {
+    expect(result.css).toMatchCss(css`
+      .-col-start-4 {
+        grid-column-start: -4;
+      }
+      .-col-end-4 {
+        grid-column-end: -4;
+      }
+      .-row-start-4 {
+        grid-row-start: -4;
+      }
+      .-row-end-4 {
+        grid-row-end: -4;
+      }
+    `)
+  })
+})
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
Visited classes are not generated
Visited classes are not generated

[Reproduction](https://play.tailwindcss.com/Mi5NOidSAz?file=css)


Hints:

Patch:
diff --git a/src/corePlugins.js b/src/corePlugins.js
--- a/src/corePlugins.js
+++ b/src/corePlugins.js
@@ -70,7 +70,28 @@ export let variantPlugins = {
       'only-of-type',
 
       // State
-      'visited',
+      [
+        'visited',
+        ({ container }) => {
+          let toRemove = ['--tw-text-opacity', '--tw-border-opacity', '--tw-bg-opacity']
+
+          container.walkDecls((decl) => {
+            if (toRemove.includes(decl.prop)) {
+              decl.remove()
+
+              return
+            }
+
+            for (const varName of toRemove) {
+              if (decl.value.includes(`/ var(${varName})`)) {
+                decl.value = decl.value.replace(`/ var(${varName})`, '')
+              }
+            }
+          })
+
+          return ':visited'
+        },
+      ],
       'target',
       ['open', '[open]'],
 
@@ -100,15 +121,27 @@ export let variantPlugins = {
     ].map((variant) => (Array.isArray(variant) ? variant : [variant, `:${variant}`]))
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(variantName, `&${state}`)
+      addVariant(variantName, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `&${result}`
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`group-${variantName}`, `:merge(.group)${state} &`)
+      addVariant(`group-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `:merge(.group)${result} &`
+      })
     }
 
     for (let [variantName, state] of pseudoVariants) {
-      addVariant(`peer-${variantName}`, `:merge(.peer)${state} ~ &`)
+      addVariant(`peer-${variantName}`, (ctx) => {
+        let result = typeof state === 'function' ? state(ctx) : state
+
+        return `:merge(.peer)${result} ~ &`
+      })
     }
   },
 


Test patch:
diff --git a/tests/variants.test.js b/tests/variants.test.js
--- a/tests/variants.test.js
+++ b/tests/variants.test.js
@@ -539,3 +539,32 @@ it('variants for utilities should not be produced in a file without a utilities
     `)
   })
 })
+
+test('The visited variant removes opacity support', () => {
+  let config = {
+    content: [
+      {
+        raw: html`
+          <a class="visited:border-red-500 visited:bg-red-500 visited:text-red-500"
+            >Look, it's a link!</a
+          >
+        `,
+      },
+    ],
+    plugins: [],
+  }
+
+  return run('@tailwind utilities', config).then((result) => {
+    return expect(result.css).toMatchFormattedCss(css`
+      .visited\:border-red-500:visited {
+        border-color: rgb(239 68 68);
+      }
+      .visited\:bg-red-500:visited {
+        background-color: rgb(239 68 68);
+      }
+      .visited\:text-red-500:visited {
+        color: rgb(239 68 68);
+      }
+    `)
+  })
+})
Repository: tailwindlabs/tailwindcss (TypeScript)

Issue:
🐛 Unnecessary classes are output
<details>
<summary>Environments</summary>

**What version of Tailwind CSS are you using?**

v3.0.24

**What build tool (or framework if it abstracts the build tool) are you using?**

postcss v8.4.7, webpack v5.72.0

**What version of Node.js are you using?**

v16.13.2

**What browser are you using?**

N/A

**What operating system are you using?**

macOS
</details>

**Reproduction URL**

- https://play.tailwindcss.com/KvFiBdkhw3  
  To check the output of 2 characters,  
  change `prefix:'tw_-'` to `prefix:'tw-'` in `Config` tab.
- https://play.tailwindcss.com/00iNAwt2JZ

**Describe your issue**

As the title says.
Unnecessary classes should not be output.


Hints:

Patch:
diff --git a/src/lib/generateRules.js b/src/lib/generateRules.js
--- a/src/lib/generateRules.js
+++ b/src/lib/generateRules.js
@@ -382,7 +382,11 @@ function* resolveMatchedPlugins(classCandidate, context) {
   const twConfigPrefix = context.tailwindConfig.prefix
 
   const twConfigPrefixLen = twConfigPrefix.length
-  if (candidatePrefix[twConfigPrefixLen] === '-') {
+
+  const hasMatchingPrefix =
+    candidatePrefix.startsWith(twConfigPrefix) || candidatePrefix.startsWith(`-${twConfigPrefix}`)
+
+  if (candidatePrefix[twConfigPrefixLen] === '-' && hasMatchingPrefix) {
     negative = true
     candidatePrefix = twConfigPrefix + candidatePrefix.slice(twConfigPrefixLen + 1)
   }


Test patch:
diff --git a/tests/prefix.test.js b/tests/prefix.test.js
--- a/tests/prefix.test.js
+++ b/tests/prefix.test.js
@@ -358,3 +358,19 @@ it('prefix with negative values and variants in the safelist', async () => {
     }
   `)
 })
+
+it('prefix does not detect and generate unnecessary classes', async () => {
+  let config = {
+    prefix: 'tw-_',
+    content: [{ raw: html`-aaa-filter aaaa-table aaaa-hidden` }],
+    corePlugins: { preflight: false },
+  }
+
+  let input = css`
+    @tailwind utilities;
+  `
+
+  const result = await run(input, config)
+
+  expect(result.css).toMatchFormattedCss(css``)
+})