diff --git a/__tests__/fixtures/tailwind-output-ie11.css b/__tests__/fixtures/tailwind-output-ie11.css index 0970edf9cbe6..69e0743c7156 100644 --- a/__tests__/fixtures/tailwind-output-ie11.css +++ b/__tests__/fixtures/tailwind-output-ie11.css @@ -1318,6 +1318,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 779af9979a5e..1dae201c9ca0 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -1686,6 +1686,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 f7c17ca278f2..3e2283a7af8a 100644 --- a/__tests__/fixtures/tailwind-output-no-color-opacity.css +++ b/__tests__/fixtures/tailwind-output-no-color-opacity.css @@ -1502,6 +1502,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 e16f646f935f..d4aba308c311 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -1686,6 +1686,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 f1211ba361e2..b0a696769747 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' @@ -107,6 +108,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') + ) + } +}