diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index 8eff70f72fee..121836f3c527 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -1317,6 +1317,26 @@ video { border-color: #702459; } +.divide-solid > :not(template) ~ :not(template) { + border-style: solid; +} + +.divide-dashed > :not(template) ~ :not(template) { + border-style: dashed; +} + +.divide-dotted > :not(template) ~ :not(template) { + border-style: dotted; +} + +.divide-double > :not(template) ~ :not(template) { + border-style: double; +} + +.divide-none > :not(template) ~ :not(template) { + border-style: none; +} + .sr-only { position: absolute; width: 1px; diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index c8dfb407351f..2450b7be33b4 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -1685,6 +1685,26 @@ video { border-color: rgba(112, 36, 89, var(--divide-opacity)) !important; } +.divide-solid > :not(template) ~ :not(template) { + border-style: solid !important; +} + +.divide-dashed > :not(template) ~ :not(template) { + border-style: dashed !important; +} + +.divide-dotted > :not(template) ~ :not(template) { + border-style: dotted !important; +} + +.divide-double > :not(template) ~ :not(template) { + border-style: double !important; +} + +.divide-none > :not(template) ~ :not(template) { + border-style: none !important; +} + .divide-opacity-0 > :not(template) ~ :not(template) { --divide-opacity: 0 !important; } diff --git a/__tests__/fixtures/tailwind-output-no-color-opacity.css b/__tests__/fixtures/tailwind-output-no-color-opacity.css index ae0fcf3c2ac4..b042aec8839a 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -1501,6 +1501,26 @@ video { border-color: #702459; } +.divide-solid > :not(template) ~ :not(template) { + border-style: solid; +} + +.divide-dashed > :not(template) ~ :not(template) { + border-style: dashed; +} + +.divide-dotted > :not(template) ~ :not(template) { + border-style: dotted; +} + +.divide-double > :not(template) ~ :not(template) { + border-style: double; +} + +.divide-none > :not(template) ~ :not(template) { + border-style: none; +} + .sr-only { position: absolute; width: 1px; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 2a4543d3c047..c7fd4ed619e7 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -1685,6 +1685,26 @@ video { border-color: rgba(112, 36, 89, var(--divide-opacity)); } +.divide-solid > :not(template) ~ :not(template) { + border-style: solid; +} + +.divide-dashed > :not(template) ~ :not(template) { + border-style: dashed; +} + +.divide-dotted > :not(template) ~ :not(template) { + border-style: dotted; +} + +.divide-double > :not(template) ~ :not(template) { + border-style: double; +} + +.divide-none > :not(template) ~ :not(template) { + border-style: none; +} + .divide-opacity-0 > :not(template) ~ :not(template) { --divide-opacity: 0; } diff --git a/src/corePlugins.js b/src/corePlugins.js index e9c6e9cd3770..a8c02a339830 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -3,6 +3,7 @@ import container from './plugins/container' import space from './plugins/space' import divideWidth from './plugins/divideWidth' import divideColor from './plugins/divideColor' +import divideStyle from './plugins/divideStyle' import accessibility from './plugins/accessibility' import appearance from './plugins/appearance' import backgroundAttachment from './plugins/backgroundAttachment' @@ -110,6 +111,7 @@ export default function({ corePlugins: corePluginConfig }) { space, divideWidth, divideColor, + divideStyle, divideOpacity, accessibility, appearance, diff --git a/src/plugins/divideStyle.js b/src/plugins/divideStyle.js new file mode 100644 index 000000000000..d9ead99d43f5 --- /dev/null +++ b/src/plugins/divideStyle.js @@ -0,0 +1,24 @@ +export default function() { + return function({ addUtilities, variants }) { + addUtilities( + { + '.divide-solid > :not(template) ~ :not(template)': { + 'border-style': 'solid', + }, + '.divide-dashed > :not(template) ~ :not(template)': { + 'border-style': 'dashed', + }, + '.divide-dotted > :not(template) ~ :not(template)': { + 'border-style': 'dotted', + }, + '.divide-double > :not(template) ~ :not(template)': { + 'border-style': 'double', + }, + '.divide-none > :not(template) ~ :not(template)': { + 'border-style': 'none', + }, + }, + variants('divideStyle') + ) + } +}