Skip to content

Commit bf59a88

Browse files
reininkadamwathan
reinink
and
adamwathan
authored
Add new outline style, color, width and offset utilities (#5887)
* Add new outline style, color, width and offset utilities Co-Authored-By: Adam Wathan <[email protected]> * Remove old `outline` property from default config Co-Authored-By: Adam Wathan <[email protected]> * Tweak order of outline plugins Co-Authored-By: Adam Wathan <[email protected]> * Revert to previous `outline-none` styles Co-Authored-By: Adam Wathan <[email protected]> * Drop quotes from outline property * Add offset back to `outline-none` utility Co-authored-by: Adam Wathan <[email protected]>
1 parent 06cb28d commit bf59a88

8 files changed

+69
-43
lines changed

‎src/corePlugins.js

+25-6
Original file line numberDiff line numberDiff line change
@@ -1794,17 +1794,36 @@ export let corePlugins = {
17941794
}
17951795
})(),
17961796

1797-
outline: ({ matchUtilities, theme }) => {
1797+
outlineStyle: ({ addUtilities }) => {
1798+
addUtilities({
1799+
'.outline-none': {
1800+
outline: '2px solid transparent',
1801+
'outline-offset': '2px',
1802+
},
1803+
'.outline': { 'outline-style': 'solid' },
1804+
'.outline-dashed': { 'outline-style': 'dashed' },
1805+
'.outline-dotted': { 'outline-style': 'dotted' },
1806+
'.outline-double': { 'outline-style': 'double' },
1807+
'.outline-hidden': { 'outline-style': 'hidden' },
1808+
})
1809+
},
1810+
1811+
outlineWidth: createUtilityPlugin('outlineWidth', [['outline', ['outline-width']]], {
1812+
type: ['length', 'number', 'percentage'],
1813+
}),
1814+
1815+
outlineOffset: createUtilityPlugin('outlineOffset', [['outline-offset', ['outline-offset']]], {
1816+
type: ['length', 'number', 'percentage'],
1817+
}),
1818+
1819+
outlineColor: ({ matchUtilities, theme }) => {
17981820
matchUtilities(
17991821
{
18001822
outline: (value) => {
1801-
value = Array.isArray(value) ? value : value.split(',')
1802-
let [outline, outlineOffset = '0'] = Array.isArray(value) ? value : [value]
1803-
1804-
return { outline, 'outline-offset': outlineOffset }
1823+
return { 'outline-color': toColorValue(value) }
18051824
},
18061825
},
1807-
{ values: theme('outline') }
1826+
{ values: flattenColorPalette(theme('outlineColor')), type: ['color'] }
18081827
)
18091828
},
18101829

‎stubs/defaultConfig.stub.js

+15-5
Original file line numberDiff line numberDiff line change
@@ -697,14 +697,24 @@ module.exports = {
697697
11: '11',
698698
12: '12',
699699
},
700-
outline: {
701-
none: ['2px solid transparent', '2px'],
702-
white: ['2px dotted white', '2px'],
703-
black: ['2px dotted black', '2px'],
704-
},
705700
padding: ({ theme }) => theme('spacing'),
706701
placeholderColor: ({ theme }) => theme('colors'),
707702
placeholderOpacity: ({ theme }) => theme('opacity'),
703+
outlineColor: ({ theme }) => theme('colors'),
704+
outlineOffset: {
705+
0: '0px',
706+
1: '1px',
707+
2: '2px',
708+
4: '4px',
709+
8: '8px',
710+
},
711+
outlineWidth: {
712+
0: '0px',
713+
1: '1px',
714+
2: '2px',
715+
4: '4px',
716+
8: '8px',
717+
},
708718
ringColor: ({ theme }) => ({
709719
DEFAULT: theme('colors.blue.500', '#3b82f6'),
710720
...theme('colors'),

‎tests/arbitrary-values.test.css

+10-15
Original file line numberDiff line numberDiff line change
@@ -859,25 +859,20 @@
859859
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
860860
var(--tw-shadow);
861861
}
862-
.outline-\[2px_solid_black\] {
863-
outline: 2px solid black;
864-
outline-offset: 0;
862+
.outline-\[10px\] {
863+
outline-width: 10px;
865864
}
866-
.outline-\[2px_solid_black\2c 2px\] {
867-
outline: 2px solid black;
868-
outline-offset: 2px;
865+
.outline-\[length\:var\(--outline\)\] {
866+
outline-width: var(--outline);
869867
}
870-
.outline-\[var\(--outline\)\] {
871-
outline: var(--outline);
872-
outline-offset: 0;
868+
.outline-offset-\[10px\] {
869+
outline-offset: 10px;
873870
}
874-
.outline-\[var\(--outline\)\2c 3px\] {
875-
outline: var(--outline);
876-
outline-offset: 3px;
871+
.outline-\[black\] {
872+
outline-color: black;
877873
}
878-
.outline-\[2px_solid_black\2c var\(--outline-offset\)\] {
879-
outline: 2px solid black;
880-
outline-offset: var(--outline-offset);
874+
.outline-\[color\:var\(--outline\)\] {
875+
outline-color: var(--outline);
881876
}
882877
.ring-\[10px\] {
883878
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)

‎tests/arbitrary-values.test.html

+5-5
Original file line numberDiff line numberDiff line change
@@ -321,11 +321,11 @@
321321
<div class="shadow-[0px_1px_2px_black]"></div>
322322
<div class="shadow-[var(--value)]"></div>
323323

324-
<div class="outline-[2px_solid_black]"></div>
325-
<div class="outline-[2px_solid_black,2px]"></div>
326-
<div class="outline-[var(--outline)]"></div>
327-
<div class="outline-[var(--outline),3px]"></div>
328-
<div class="outline-[2px_solid_black,var(--outline-offset)]"></div>
324+
<div class="outline-[black]"></div>
325+
<div class="outline-[10px]"></div>
326+
<div class="outline-[color:var(--outline)]"></div>
327+
<div class="outline-[length:var(--outline)]"></div>
328+
<div class="outline-offset-[10px]"></div>
329329

330330
<div class="ring-[#76ad65]"></div>
331331
<div class="ring-[color:var(--value)]"></div>

‎tests/basic-usage.test.css

+13-2
Original file line numberDiff line numberDiff line change
@@ -825,10 +825,21 @@
825825
outline: 2px solid transparent;
826826
outline-offset: 2px;
827827
}
828-
.outline-black {
829-
outline: 2px dotted black;
828+
.outline {
829+
outline-style: solid;
830+
}
831+
.outline-dashed {
832+
outline-style: dashed;
833+
}
834+
.outline-4 {
835+
outline-width: 4px;
836+
}
837+
.outline-offset-2 {
830838
outline-offset: 2px;
831839
}
840+
.outline-black {
841+
outline-color: #000;
842+
}
832843
.ring {
833844
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
834845
var(--tw-ring-offset-color);

‎tests/basic-usage.test.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -97,7 +97,7 @@
9797
<div class="bg-blend-darken bg-blend-difference"></div>
9898
<div class="mix-blend-multiply mix-blend-saturation"></div>
9999
<div class="order-last order-2"></div>
100-
<div class="outline-none outline-black"></div>
100+
<div class="outline outline-dashed outline-none outline-black outline-4 outline-offset-2"></div>
101101
<div class="overflow-hidden"></div>
102102
<div class="overscroll-contain"></div>
103103
<div class="p-4 py-2 px-3 pt-1 pr-2 pb-3 pl-4"></div>

‎tests/raw-content.test.css

-8
Original file line numberDiff line numberDiff line change
@@ -595,14 +595,6 @@
595595
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000),
596596
var(--tw-shadow);
597597
}
598-
.outline-none {
599-
outline: 2px solid transparent;
600-
outline-offset: 2px;
601-
}
602-
.outline-black {
603-
outline: 2px dotted black;
604-
outline-offset: 2px;
605-
}
606598
.ring {
607599
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width)
608600
var(--tw-ring-offset-color);

‎tests/raw-content.test.html

-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,6 @@
9393
<div class="bg-blend-darken bg-blend-difference"></div>
9494
<div class="mix-blend-multiply mix-blend-saturation"></div>
9595
<div class="order-last order-2"></div>
96-
<div class="outline-none outline-black"></div>
9796
<div class="overflow-hidden"></div>
9897
<div class="overscroll-contain"></div>
9998
<div class="scroll-smooth"></div>

0 commit comments

Comments
 (0)