diff --git a/src/corePlugins.js b/src/corePlugins.js index e1de2c595162..f20741605612 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -2054,9 +2054,13 @@ export let corePlugins = { ) }, - ringOpacity: createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], { - filterDefault: true, - }), + ringOpacity: (helpers) => { + let { config } = helpers + + return createUtilityPlugin('ringOpacity', [['ring-opacity', ['--tw-ring-opacity']]], { + filterDefault: !flagEnabled(config(), 'respectDefaultRingColorOpacity'), + })(helpers) + }, ringOffsetWidth: createUtilityPlugin( 'ringOffsetWidth', [['ring-offset', ['--tw-ring-offset-width']]], diff --git a/tests/basic-usage.test.js b/tests/basic-usage.test.js index 9f5c4c19be77..2c037da4fc90 100644 --- a/tests/basic-usage.test.js +++ b/tests/basic-usage.test.js @@ -664,3 +664,48 @@ it('Customizing the default ring color preserves its opacity when using respectD `) }) }) + +it('A bare ring-opacity utility is not supported when not using respectDefaultRingColorOpacity', () => { + let config = { + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + theme: { + ringOpacity: { + DEFAULT: '0.33', + }, + }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css``) + }) +}) + +it('A bare ring-opacity utility is supported when using respectDefaultRingColorOpacity', () => { + let config = { + future: { respectDefaultRingColorOpacity: true }, + content: [{ raw: html`
` }], + corePlugins: { preflight: false }, + theme: { + ringOpacity: { + DEFAULT: '0.33', + }, + }, + } + + let input = css` + @tailwind utilities; + ` + + return run(input, config).then((result) => { + expect(result.css).toMatchFormattedCss(css` + .ring-opacity { + --tw-ring-opacity: 0.33; + } + `) + }) +})