diff --git a/__tests__/fixtures/tailwind-output-important.css b/__tests__/fixtures/tailwind-output-important.css index 70e500103..43917dc86 100644 --- a/__tests__/fixtures/tailwind-output-important.css +++ b/__tests__/fixtures/tailwind-output-important.css @@ -3340,11 +3340,11 @@ video { } .box-border { - box-sizing: border !important; + box-sizing: border-box !important; } .box-content { - box-sizing: content !important; + box-sizing: content-box !important; } .cursor-auto { @@ -3395,6 +3395,10 @@ video { display: inline-flex !important; } +.grid { + display: grid !important; +} + .table { display: table !important; } @@ -6861,6 +6865,18 @@ video { stroke: currentColor !important; } +.stroke-0 { + stroke-width: 0 !important; +} + +.stroke-1 { + stroke-width: 1 !important; +} + +.stroke-2 { + stroke-width: 2 !important; +} + .table-auto { table-layout: auto !important; } @@ -8442,6 +8458,333 @@ video { z-index: auto !important; } +.gap-0 { + grid-gap: 0 !important; + gap: 0 !important; +} + +.gap-1 { + grid-gap: 0.25rem !important; + gap: 0.25rem !important; +} + +.gap-2 { + grid-gap: 0.5rem !important; + gap: 0.5rem !important; +} + +.gap-3 { + grid-gap: 0.75rem !important; + gap: 0.75rem !important; +} + +.gap-4 { + grid-gap: 1rem !important; + gap: 1rem !important; +} + +.gap-5 { + grid-gap: 1.25rem !important; + gap: 1.25rem !important; +} + +.gap-6 { + grid-gap: 1.5rem !important; + gap: 1.5rem !important; +} + +.gap-8 { + grid-gap: 2rem !important; + gap: 2rem !important; +} + +.gap-10 { + grid-gap: 2.5rem !important; + gap: 2.5rem !important; +} + +.gap-12 { + grid-gap: 3rem !important; + gap: 3rem !important; +} + +.gap-16 { + grid-gap: 4rem !important; + gap: 4rem !important; +} + +.gap-20 { + grid-gap: 5rem !important; + gap: 5rem !important; +} + +.gap-24 { + grid-gap: 6rem !important; + gap: 6rem !important; +} + +.gap-32 { + grid-gap: 8rem !important; + gap: 8rem !important; +} + +.gap-40 { + grid-gap: 10rem !important; + gap: 10rem !important; +} + +.gap-48 { + grid-gap: 12rem !important; + gap: 12rem !important; +} + +.gap-56 { + grid-gap: 14rem !important; + gap: 14rem !important; +} + +.gap-64 { + grid-gap: 16rem !important; + gap: 16rem !important; +} + +.gap-px { + grid-gap: 1px !important; + gap: 1px !important; +} + +.grid-flow-row { + grid-auto-flow: row !important; +} + +.grid-flow-col { + grid-auto-flow: column !important; +} + +.grid-flow-row-dense { + grid-auto-flow: row dense !important; +} + +.grid-flow-col-dense { + grid-auto-flow: column dense !important; +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; +} + +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; +} + +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; +} + +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; +} + +.grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; +} + +.grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; +} + +.grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)) !important; +} + +.grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)) !important; +} + +.grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)) !important; +} + +.grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)) !important; +} + +.grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)) !important; +} + +.grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; +} + +.grid-cols-none { + grid-template-columns: none !important; +} + +.col-auto { + grid-column: auto !important; +} + +.col-span-1 { + grid-column: span 1 / span 1 !important; +} + +.col-span-2 { + grid-column: span 2 / span 2 !important; +} + +.col-span-3 { + grid-column: span 3 / span 3 !important; +} + +.col-span-4 { + grid-column: span 4 / span 4 !important; +} + +.col-span-5 { + grid-column: span 5 / span 5 !important; +} + +.col-span-6 { + grid-column: span 6 / span 6 !important; +} + +.col-span-7 { + grid-column: span 7 / span 7 !important; +} + +.col-span-8 { + grid-column: span 8 / span 8 !important; +} + +.col-span-9 { + grid-column: span 9 / span 9 !important; +} + +.col-span-10 { + grid-column: span 10 / span 10 !important; +} + +.col-span-11 { + grid-column: span 11 / span 11 !important; +} + +.col-span-12 { + grid-column: span 12 / span 12 !important; +} + +.col-start-1 { + grid-column-start: 1 !important; +} + +.col-start-2 { + grid-column-start: 2 !important; +} + +.col-start-3 { + grid-column-start: 3 !important; +} + +.col-start-4 { + grid-column-start: 4 !important; +} + +.col-start-5 { + grid-column-start: 5 !important; +} + +.col-start-6 { + grid-column-start: 6 !important; +} + +.col-start-7 { + grid-column-start: 7 !important; +} + +.col-start-8 { + grid-column-start: 8 !important; +} + +.col-start-9 { + grid-column-start: 9 !important; +} + +.col-start-10 { + grid-column-start: 10 !important; +} + +.col-start-11 { + grid-column-start: 11 !important; +} + +.col-start-12 { + grid-column-start: 12 !important; +} + +.col-start-13 { + grid-column-start: 13 !important; +} + +.col-start-auto { + grid-column-start: auto !important; +} + +.col-end-1 { + grid-column-end: 1 !important; +} + +.col-end-2 { + grid-column-end: 2 !important; +} + +.col-end-3 { + grid-column-end: 3 !important; +} + +.col-end-4 { + grid-column-end: 4 !important; +} + +.col-end-5 { + grid-column-end: 5 !important; +} + +.col-end-6 { + grid-column-end: 6 !important; +} + +.col-end-7 { + grid-column-end: 7 !important; +} + +.col-end-8 { + grid-column-end: 8 !important; +} + +.col-end-9 { + grid-column-end: 9 !important; +} + +.col-end-10 { + grid-column-end: 10 !important; +} + +.col-end-11 { + grid-column-end: 11 !important; +} + +.col-end-12 { + grid-column-end: 12 !important; +} + +.col-end-13 { + grid-column-end: 13 !important; +} + +.col-end-auto { + grid-column-end: auto !important; +} + .transform { --transform-translate-x: 0 !important; --transform-translate-y: 0 !important; @@ -12692,11 +13035,11 @@ video { } .sm\:box-border { - box-sizing: border !important; + box-sizing: border-box !important; } .sm\:box-content { - box-sizing: content !important; + box-sizing: content-box !important; } .sm\:cursor-auto { @@ -12747,6 +13090,10 @@ video { display: inline-flex !important; } + .sm\:grid { + display: grid !important; + } + .sm\:table { display: table !important; } @@ -16213,6 +16560,18 @@ video { stroke: currentColor !important; } + .sm\:stroke-0 { + stroke-width: 0 !important; + } + + .sm\:stroke-1 { + stroke-width: 1 !important; + } + + .sm\:stroke-2 { + stroke-width: 2 !important; + } + .sm\:table-auto { table-layout: auto !important; } @@ -17794,6 +18153,333 @@ video { z-index: auto !important; } + .sm\:gap-0 { + grid-gap: 0 !important; + gap: 0 !important; + } + + .sm\:gap-1 { + grid-gap: 0.25rem !important; + gap: 0.25rem !important; + } + + .sm\:gap-2 { + grid-gap: 0.5rem !important; + gap: 0.5rem !important; + } + + .sm\:gap-3 { + grid-gap: 0.75rem !important; + gap: 0.75rem !important; + } + + .sm\:gap-4 { + grid-gap: 1rem !important; + gap: 1rem !important; + } + + .sm\:gap-5 { + grid-gap: 1.25rem !important; + gap: 1.25rem !important; + } + + .sm\:gap-6 { + grid-gap: 1.5rem !important; + gap: 1.5rem !important; + } + + .sm\:gap-8 { + grid-gap: 2rem !important; + gap: 2rem !important; + } + + .sm\:gap-10 { + grid-gap: 2.5rem !important; + gap: 2.5rem !important; + } + + .sm\:gap-12 { + grid-gap: 3rem !important; + gap: 3rem !important; + } + + .sm\:gap-16 { + grid-gap: 4rem !important; + gap: 4rem !important; + } + + .sm\:gap-20 { + grid-gap: 5rem !important; + gap: 5rem !important; + } + + .sm\:gap-24 { + grid-gap: 6rem !important; + gap: 6rem !important; + } + + .sm\:gap-32 { + grid-gap: 8rem !important; + gap: 8rem !important; + } + + .sm\:gap-40 { + grid-gap: 10rem !important; + gap: 10rem !important; + } + + .sm\:gap-48 { + grid-gap: 12rem !important; + gap: 12rem !important; + } + + .sm\:gap-56 { + grid-gap: 14rem !important; + gap: 14rem !important; + } + + .sm\:gap-64 { + grid-gap: 16rem !important; + gap: 16rem !important; + } + + .sm\:gap-px { + grid-gap: 1px !important; + gap: 1px !important; + } + + .sm\:grid-flow-row { + grid-auto-flow: row !important; + } + + .sm\:grid-flow-col { + grid-auto-flow: column !important; + } + + .sm\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .sm\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + + .sm\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; + } + + .sm\:grid-cols-none { + grid-template-columns: none !important; + } + + .sm\:col-auto { + grid-column: auto !important; + } + + .sm\:col-span-1 { + grid-column: span 1 / span 1 !important; + } + + .sm\:col-span-2 { + grid-column: span 2 / span 2 !important; + } + + .sm\:col-span-3 { + grid-column: span 3 / span 3 !important; + } + + .sm\:col-span-4 { + grid-column: span 4 / span 4 !important; + } + + .sm\:col-span-5 { + grid-column: span 5 / span 5 !important; + } + + .sm\:col-span-6 { + grid-column: span 6 / span 6 !important; + } + + .sm\:col-span-7 { + grid-column: span 7 / span 7 !important; + } + + .sm\:col-span-8 { + grid-column: span 8 / span 8 !important; + } + + .sm\:col-span-9 { + grid-column: span 9 / span 9 !important; + } + + .sm\:col-span-10 { + grid-column: span 10 / span 10 !important; + } + + .sm\:col-span-11 { + grid-column: span 11 / span 11 !important; + } + + .sm\:col-span-12 { + grid-column: span 12 / span 12 !important; + } + + .sm\:col-start-1 { + grid-column-start: 1 !important; + } + + .sm\:col-start-2 { + grid-column-start: 2 !important; + } + + .sm\:col-start-3 { + grid-column-start: 3 !important; + } + + .sm\:col-start-4 { + grid-column-start: 4 !important; + } + + .sm\:col-start-5 { + grid-column-start: 5 !important; + } + + .sm\:col-start-6 { + grid-column-start: 6 !important; + } + + .sm\:col-start-7 { + grid-column-start: 7 !important; + } + + .sm\:col-start-8 { + grid-column-start: 8 !important; + } + + .sm\:col-start-9 { + grid-column-start: 9 !important; + } + + .sm\:col-start-10 { + grid-column-start: 10 !important; + } + + .sm\:col-start-11 { + grid-column-start: 11 !important; + } + + .sm\:col-start-12 { + grid-column-start: 12 !important; + } + + .sm\:col-start-13 { + grid-column-start: 13 !important; + } + + .sm\:col-start-auto { + grid-column-start: auto !important; + } + + .sm\:col-end-1 { + grid-column-end: 1 !important; + } + + .sm\:col-end-2 { + grid-column-end: 2 !important; + } + + .sm\:col-end-3 { + grid-column-end: 3 !important; + } + + .sm\:col-end-4 { + grid-column-end: 4 !important; + } + + .sm\:col-end-5 { + grid-column-end: 5 !important; + } + + .sm\:col-end-6 { + grid-column-end: 6 !important; + } + + .sm\:col-end-7 { + grid-column-end: 7 !important; + } + + .sm\:col-end-8 { + grid-column-end: 8 !important; + } + + .sm\:col-end-9 { + grid-column-end: 9 !important; + } + + .sm\:col-end-10 { + grid-column-end: 10 !important; + } + + .sm\:col-end-11 { + grid-column-end: 11 !important; + } + + .sm\:col-end-12 { + grid-column-end: 12 !important; + } + + .sm\:col-end-13 { + grid-column-end: 13 !important; + } + + .sm\:col-end-auto { + grid-column-end: auto !important; + } + .sm\:transform { --transform-translate-x: 0 !important; --transform-translate-y: 0 !important; @@ -22045,11 +22731,11 @@ video { } .md\:box-border { - box-sizing: border !important; + box-sizing: border-box !important; } .md\:box-content { - box-sizing: content !important; + box-sizing: content-box !important; } .md\:cursor-auto { @@ -22100,6 +22786,10 @@ video { display: inline-flex !important; } + .md\:grid { + display: grid !important; + } + .md\:table { display: table !important; } @@ -25566,6 +26256,18 @@ video { stroke: currentColor !important; } + .md\:stroke-0 { + stroke-width: 0 !important; + } + + .md\:stroke-1 { + stroke-width: 1 !important; + } + + .md\:stroke-2 { + stroke-width: 2 !important; + } + .md\:table-auto { table-layout: auto !important; } @@ -27147,6 +27849,333 @@ video { z-index: auto !important; } + .md\:gap-0 { + grid-gap: 0 !important; + gap: 0 !important; + } + + .md\:gap-1 { + grid-gap: 0.25rem !important; + gap: 0.25rem !important; + } + + .md\:gap-2 { + grid-gap: 0.5rem !important; + gap: 0.5rem !important; + } + + .md\:gap-3 { + grid-gap: 0.75rem !important; + gap: 0.75rem !important; + } + + .md\:gap-4 { + grid-gap: 1rem !important; + gap: 1rem !important; + } + + .md\:gap-5 { + grid-gap: 1.25rem !important; + gap: 1.25rem !important; + } + + .md\:gap-6 { + grid-gap: 1.5rem !important; + gap: 1.5rem !important; + } + + .md\:gap-8 { + grid-gap: 2rem !important; + gap: 2rem !important; + } + + .md\:gap-10 { + grid-gap: 2.5rem !important; + gap: 2.5rem !important; + } + + .md\:gap-12 { + grid-gap: 3rem !important; + gap: 3rem !important; + } + + .md\:gap-16 { + grid-gap: 4rem !important; + gap: 4rem !important; + } + + .md\:gap-20 { + grid-gap: 5rem !important; + gap: 5rem !important; + } + + .md\:gap-24 { + grid-gap: 6rem !important; + gap: 6rem !important; + } + + .md\:gap-32 { + grid-gap: 8rem !important; + gap: 8rem !important; + } + + .md\:gap-40 { + grid-gap: 10rem !important; + gap: 10rem !important; + } + + .md\:gap-48 { + grid-gap: 12rem !important; + gap: 12rem !important; + } + + .md\:gap-56 { + grid-gap: 14rem !important; + gap: 14rem !important; + } + + .md\:gap-64 { + grid-gap: 16rem !important; + gap: 16rem !important; + } + + .md\:gap-px { + grid-gap: 1px !important; + gap: 1px !important; + } + + .md\:grid-flow-row { + grid-auto-flow: row !important; + } + + .md\:grid-flow-col { + grid-auto-flow: column !important; + } + + .md\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .md\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + + .md\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; + } + + .md\:grid-cols-none { + grid-template-columns: none !important; + } + + .md\:col-auto { + grid-column: auto !important; + } + + .md\:col-span-1 { + grid-column: span 1 / span 1 !important; + } + + .md\:col-span-2 { + grid-column: span 2 / span 2 !important; + } + + .md\:col-span-3 { + grid-column: span 3 / span 3 !important; + } + + .md\:col-span-4 { + grid-column: span 4 / span 4 !important; + } + + .md\:col-span-5 { + grid-column: span 5 / span 5 !important; + } + + .md\:col-span-6 { + grid-column: span 6 / span 6 !important; + } + + .md\:col-span-7 { + grid-column: span 7 / span 7 !important; + } + + .md\:col-span-8 { + grid-column: span 8 / span 8 !important; + } + + .md\:col-span-9 { + grid-column: span 9 / span 9 !important; + } + + .md\:col-span-10 { + grid-column: span 10 / span 10 !important; + } + + .md\:col-span-11 { + grid-column: span 11 / span 11 !important; + } + + .md\:col-span-12 { + grid-column: span 12 / span 12 !important; + } + + .md\:col-start-1 { + grid-column-start: 1 !important; + } + + .md\:col-start-2 { + grid-column-start: 2 !important; + } + + .md\:col-start-3 { + grid-column-start: 3 !important; + } + + .md\:col-start-4 { + grid-column-start: 4 !important; + } + + .md\:col-start-5 { + grid-column-start: 5 !important; + } + + .md\:col-start-6 { + grid-column-start: 6 !important; + } + + .md\:col-start-7 { + grid-column-start: 7 !important; + } + + .md\:col-start-8 { + grid-column-start: 8 !important; + } + + .md\:col-start-9 { + grid-column-start: 9 !important; + } + + .md\:col-start-10 { + grid-column-start: 10 !important; + } + + .md\:col-start-11 { + grid-column-start: 11 !important; + } + + .md\:col-start-12 { + grid-column-start: 12 !important; + } + + .md\:col-start-13 { + grid-column-start: 13 !important; + } + + .md\:col-start-auto { + grid-column-start: auto !important; + } + + .md\:col-end-1 { + grid-column-end: 1 !important; + } + + .md\:col-end-2 { + grid-column-end: 2 !important; + } + + .md\:col-end-3 { + grid-column-end: 3 !important; + } + + .md\:col-end-4 { + grid-column-end: 4 !important; + } + + .md\:col-end-5 { + grid-column-end: 5 !important; + } + + .md\:col-end-6 { + grid-column-end: 6 !important; + } + + .md\:col-end-7 { + grid-column-end: 7 !important; + } + + .md\:col-end-8 { + grid-column-end: 8 !important; + } + + .md\:col-end-9 { + grid-column-end: 9 !important; + } + + .md\:col-end-10 { + grid-column-end: 10 !important; + } + + .md\:col-end-11 { + grid-column-end: 11 !important; + } + + .md\:col-end-12 { + grid-column-end: 12 !important; + } + + .md\:col-end-13 { + grid-column-end: 13 !important; + } + + .md\:col-end-auto { + grid-column-end: auto !important; + } + .md\:transform { --transform-translate-x: 0 !important; --transform-translate-y: 0 !important; @@ -31398,11 +32427,11 @@ video { } .lg\:box-border { - box-sizing: border !important; + box-sizing: border-box !important; } .lg\:box-content { - box-sizing: content !important; + box-sizing: content-box !important; } .lg\:cursor-auto { @@ -31453,6 +32482,10 @@ video { display: inline-flex !important; } + .lg\:grid { + display: grid !important; + } + .lg\:table { display: table !important; } @@ -34919,6 +35952,18 @@ video { stroke: currentColor !important; } + .lg\:stroke-0 { + stroke-width: 0 !important; + } + + .lg\:stroke-1 { + stroke-width: 1 !important; + } + + .lg\:stroke-2 { + stroke-width: 2 !important; + } + .lg\:table-auto { table-layout: auto !important; } @@ -36500,6 +37545,333 @@ video { z-index: auto !important; } + .lg\:gap-0 { + grid-gap: 0 !important; + gap: 0 !important; + } + + .lg\:gap-1 { + grid-gap: 0.25rem !important; + gap: 0.25rem !important; + } + + .lg\:gap-2 { + grid-gap: 0.5rem !important; + gap: 0.5rem !important; + } + + .lg\:gap-3 { + grid-gap: 0.75rem !important; + gap: 0.75rem !important; + } + + .lg\:gap-4 { + grid-gap: 1rem !important; + gap: 1rem !important; + } + + .lg\:gap-5 { + grid-gap: 1.25rem !important; + gap: 1.25rem !important; + } + + .lg\:gap-6 { + grid-gap: 1.5rem !important; + gap: 1.5rem !important; + } + + .lg\:gap-8 { + grid-gap: 2rem !important; + gap: 2rem !important; + } + + .lg\:gap-10 { + grid-gap: 2.5rem !important; + gap: 2.5rem !important; + } + + .lg\:gap-12 { + grid-gap: 3rem !important; + gap: 3rem !important; + } + + .lg\:gap-16 { + grid-gap: 4rem !important; + gap: 4rem !important; + } + + .lg\:gap-20 { + grid-gap: 5rem !important; + gap: 5rem !important; + } + + .lg\:gap-24 { + grid-gap: 6rem !important; + gap: 6rem !important; + } + + .lg\:gap-32 { + grid-gap: 8rem !important; + gap: 8rem !important; + } + + .lg\:gap-40 { + grid-gap: 10rem !important; + gap: 10rem !important; + } + + .lg\:gap-48 { + grid-gap: 12rem !important; + gap: 12rem !important; + } + + .lg\:gap-56 { + grid-gap: 14rem !important; + gap: 14rem !important; + } + + .lg\:gap-64 { + grid-gap: 16rem !important; + gap: 16rem !important; + } + + .lg\:gap-px { + grid-gap: 1px !important; + gap: 1px !important; + } + + .lg\:grid-flow-row { + grid-auto-flow: row !important; + } + + .lg\:grid-flow-col { + grid-auto-flow: column !important; + } + + .lg\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .lg\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + + .lg\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; + } + + .lg\:grid-cols-none { + grid-template-columns: none !important; + } + + .lg\:col-auto { + grid-column: auto !important; + } + + .lg\:col-span-1 { + grid-column: span 1 / span 1 !important; + } + + .lg\:col-span-2 { + grid-column: span 2 / span 2 !important; + } + + .lg\:col-span-3 { + grid-column: span 3 / span 3 !important; + } + + .lg\:col-span-4 { + grid-column: span 4 / span 4 !important; + } + + .lg\:col-span-5 { + grid-column: span 5 / span 5 !important; + } + + .lg\:col-span-6 { + grid-column: span 6 / span 6 !important; + } + + .lg\:col-span-7 { + grid-column: span 7 / span 7 !important; + } + + .lg\:col-span-8 { + grid-column: span 8 / span 8 !important; + } + + .lg\:col-span-9 { + grid-column: span 9 / span 9 !important; + } + + .lg\:col-span-10 { + grid-column: span 10 / span 10 !important; + } + + .lg\:col-span-11 { + grid-column: span 11 / span 11 !important; + } + + .lg\:col-span-12 { + grid-column: span 12 / span 12 !important; + } + + .lg\:col-start-1 { + grid-column-start: 1 !important; + } + + .lg\:col-start-2 { + grid-column-start: 2 !important; + } + + .lg\:col-start-3 { + grid-column-start: 3 !important; + } + + .lg\:col-start-4 { + grid-column-start: 4 !important; + } + + .lg\:col-start-5 { + grid-column-start: 5 !important; + } + + .lg\:col-start-6 { + grid-column-start: 6 !important; + } + + .lg\:col-start-7 { + grid-column-start: 7 !important; + } + + .lg\:col-start-8 { + grid-column-start: 8 !important; + } + + .lg\:col-start-9 { + grid-column-start: 9 !important; + } + + .lg\:col-start-10 { + grid-column-start: 10 !important; + } + + .lg\:col-start-11 { + grid-column-start: 11 !important; + } + + .lg\:col-start-12 { + grid-column-start: 12 !important; + } + + .lg\:col-start-13 { + grid-column-start: 13 !important; + } + + .lg\:col-start-auto { + grid-column-start: auto !important; + } + + .lg\:col-end-1 { + grid-column-end: 1 !important; + } + + .lg\:col-end-2 { + grid-column-end: 2 !important; + } + + .lg\:col-end-3 { + grid-column-end: 3 !important; + } + + .lg\:col-end-4 { + grid-column-end: 4 !important; + } + + .lg\:col-end-5 { + grid-column-end: 5 !important; + } + + .lg\:col-end-6 { + grid-column-end: 6 !important; + } + + .lg\:col-end-7 { + grid-column-end: 7 !important; + } + + .lg\:col-end-8 { + grid-column-end: 8 !important; + } + + .lg\:col-end-9 { + grid-column-end: 9 !important; + } + + .lg\:col-end-10 { + grid-column-end: 10 !important; + } + + .lg\:col-end-11 { + grid-column-end: 11 !important; + } + + .lg\:col-end-12 { + grid-column-end: 12 !important; + } + + .lg\:col-end-13 { + grid-column-end: 13 !important; + } + + .lg\:col-end-auto { + grid-column-end: auto !important; + } + .lg\:transform { --transform-translate-x: 0 !important; --transform-translate-y: 0 !important; @@ -40751,11 +42123,11 @@ video { } .xl\:box-border { - box-sizing: border !important; + box-sizing: border-box !important; } .xl\:box-content { - box-sizing: content !important; + box-sizing: content-box !important; } .xl\:cursor-auto { @@ -40806,6 +42178,10 @@ video { display: inline-flex !important; } + .xl\:grid { + display: grid !important; + } + .xl\:table { display: table !important; } @@ -44272,6 +45648,18 @@ video { stroke: currentColor !important; } + .xl\:stroke-0 { + stroke-width: 0 !important; + } + + .xl\:stroke-1 { + stroke-width: 1 !important; + } + + .xl\:stroke-2 { + stroke-width: 2 !important; + } + .xl\:table-auto { table-layout: auto !important; } @@ -45853,6 +47241,333 @@ video { z-index: auto !important; } + .xl\:gap-0 { + grid-gap: 0 !important; + gap: 0 !important; + } + + .xl\:gap-1 { + grid-gap: 0.25rem !important; + gap: 0.25rem !important; + } + + .xl\:gap-2 { + grid-gap: 0.5rem !important; + gap: 0.5rem !important; + } + + .xl\:gap-3 { + grid-gap: 0.75rem !important; + gap: 0.75rem !important; + } + + .xl\:gap-4 { + grid-gap: 1rem !important; + gap: 1rem !important; + } + + .xl\:gap-5 { + grid-gap: 1.25rem !important; + gap: 1.25rem !important; + } + + .xl\:gap-6 { + grid-gap: 1.5rem !important; + gap: 1.5rem !important; + } + + .xl\:gap-8 { + grid-gap: 2rem !important; + gap: 2rem !important; + } + + .xl\:gap-10 { + grid-gap: 2.5rem !important; + gap: 2.5rem !important; + } + + .xl\:gap-12 { + grid-gap: 3rem !important; + gap: 3rem !important; + } + + .xl\:gap-16 { + grid-gap: 4rem !important; + gap: 4rem !important; + } + + .xl\:gap-20 { + grid-gap: 5rem !important; + gap: 5rem !important; + } + + .xl\:gap-24 { + grid-gap: 6rem !important; + gap: 6rem !important; + } + + .xl\:gap-32 { + grid-gap: 8rem !important; + gap: 8rem !important; + } + + .xl\:gap-40 { + grid-gap: 10rem !important; + gap: 10rem !important; + } + + .xl\:gap-48 { + grid-gap: 12rem !important; + gap: 12rem !important; + } + + .xl\:gap-56 { + grid-gap: 14rem !important; + gap: 14rem !important; + } + + .xl\:gap-64 { + grid-gap: 16rem !important; + gap: 16rem !important; + } + + .xl\:gap-px { + grid-gap: 1px !important; + gap: 1px !important; + } + + .xl\:grid-flow-row { + grid-auto-flow: row !important; + } + + .xl\:grid-flow-col { + grid-auto-flow: column !important; + } + + .xl\:grid-flow-row-dense { + grid-auto-flow: row dense !important; + } + + .xl\:grid-flow-col-dense { + grid-auto-flow: column dense !important; + } + + .xl\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)) !important; + } + + .xl\:grid-cols-none { + grid-template-columns: none !important; + } + + .xl\:col-auto { + grid-column: auto !important; + } + + .xl\:col-span-1 { + grid-column: span 1 / span 1 !important; + } + + .xl\:col-span-2 { + grid-column: span 2 / span 2 !important; + } + + .xl\:col-span-3 { + grid-column: span 3 / span 3 !important; + } + + .xl\:col-span-4 { + grid-column: span 4 / span 4 !important; + } + + .xl\:col-span-5 { + grid-column: span 5 / span 5 !important; + } + + .xl\:col-span-6 { + grid-column: span 6 / span 6 !important; + } + + .xl\:col-span-7 { + grid-column: span 7 / span 7 !important; + } + + .xl\:col-span-8 { + grid-column: span 8 / span 8 !important; + } + + .xl\:col-span-9 { + grid-column: span 9 / span 9 !important; + } + + .xl\:col-span-10 { + grid-column: span 10 / span 10 !important; + } + + .xl\:col-span-11 { + grid-column: span 11 / span 11 !important; + } + + .xl\:col-span-12 { + grid-column: span 12 / span 12 !important; + } + + .xl\:col-start-1 { + grid-column-start: 1 !important; + } + + .xl\:col-start-2 { + grid-column-start: 2 !important; + } + + .xl\:col-start-3 { + grid-column-start: 3 !important; + } + + .xl\:col-start-4 { + grid-column-start: 4 !important; + } + + .xl\:col-start-5 { + grid-column-start: 5 !important; + } + + .xl\:col-start-6 { + grid-column-start: 6 !important; + } + + .xl\:col-start-7 { + grid-column-start: 7 !important; + } + + .xl\:col-start-8 { + grid-column-start: 8 !important; + } + + .xl\:col-start-9 { + grid-column-start: 9 !important; + } + + .xl\:col-start-10 { + grid-column-start: 10 !important; + } + + .xl\:col-start-11 { + grid-column-start: 11 !important; + } + + .xl\:col-start-12 { + grid-column-start: 12 !important; + } + + .xl\:col-start-13 { + grid-column-start: 13 !important; + } + + .xl\:col-start-auto { + grid-column-start: auto !important; + } + + .xl\:col-end-1 { + grid-column-end: 1 !important; + } + + .xl\:col-end-2 { + grid-column-end: 2 !important; + } + + .xl\:col-end-3 { + grid-column-end: 3 !important; + } + + .xl\:col-end-4 { + grid-column-end: 4 !important; + } + + .xl\:col-end-5 { + grid-column-end: 5 !important; + } + + .xl\:col-end-6 { + grid-column-end: 6 !important; + } + + .xl\:col-end-7 { + grid-column-end: 7 !important; + } + + .xl\:col-end-8 { + grid-column-end: 8 !important; + } + + .xl\:col-end-9 { + grid-column-end: 9 !important; + } + + .xl\:col-end-10 { + grid-column-end: 10 !important; + } + + .xl\:col-end-11 { + grid-column-end: 11 !important; + } + + .xl\:col-end-12 { + grid-column-end: 12 !important; + } + + .xl\:col-end-13 { + grid-column-end: 13 !important; + } + + .xl\:col-end-auto { + grid-column-end: auto !important; + } + .xl\:transform { --transform-translate-x: 0 !important; --transform-translate-y: 0 !important; diff --git a/__tests__/fixtures/tailwind-output.css b/__tests__/fixtures/tailwind-output.css index 410d2403a..4561a5af8 100644 --- a/__tests__/fixtures/tailwind-output.css +++ b/__tests__/fixtures/tailwind-output.css @@ -3340,11 +3340,11 @@ video { } .box-border { - box-sizing: border; + box-sizing: border-box; } .box-content { - box-sizing: content; + box-sizing: content-box; } .cursor-auto { @@ -3395,6 +3395,10 @@ video { display: inline-flex; } +.grid { + display: grid; +} + .table { display: table; } @@ -6861,6 +6865,18 @@ video { stroke: currentColor; } +.stroke-0 { + stroke-width: 0; +} + +.stroke-1 { + stroke-width: 1; +} + +.stroke-2 { + stroke-width: 2; +} + .table-auto { table-layout: auto; } @@ -8442,6 +8458,333 @@ video { z-index: auto; } +.gap-0 { + grid-gap: 0; + gap: 0; +} + +.gap-1 { + grid-gap: 0.25rem; + gap: 0.25rem; +} + +.gap-2 { + grid-gap: 0.5rem; + gap: 0.5rem; +} + +.gap-3 { + grid-gap: 0.75rem; + gap: 0.75rem; +} + +.gap-4 { + grid-gap: 1rem; + gap: 1rem; +} + +.gap-5 { + grid-gap: 1.25rem; + gap: 1.25rem; +} + +.gap-6 { + grid-gap: 1.5rem; + gap: 1.5rem; +} + +.gap-8 { + grid-gap: 2rem; + gap: 2rem; +} + +.gap-10 { + grid-gap: 2.5rem; + gap: 2.5rem; +} + +.gap-12 { + grid-gap: 3rem; + gap: 3rem; +} + +.gap-16 { + grid-gap: 4rem; + gap: 4rem; +} + +.gap-20 { + grid-gap: 5rem; + gap: 5rem; +} + +.gap-24 { + grid-gap: 6rem; + gap: 6rem; +} + +.gap-32 { + grid-gap: 8rem; + gap: 8rem; +} + +.gap-40 { + grid-gap: 10rem; + gap: 10rem; +} + +.gap-48 { + grid-gap: 12rem; + gap: 12rem; +} + +.gap-56 { + grid-gap: 14rem; + gap: 14rem; +} + +.gap-64 { + grid-gap: 16rem; + gap: 16rem; +} + +.gap-px { + grid-gap: 1px; + gap: 1px; +} + +.grid-flow-row { + grid-auto-flow: row; +} + +.grid-flow-col { + grid-auto-flow: column; +} + +.grid-flow-row-dense { + grid-auto-flow: row dense; +} + +.grid-flow-col-dense { + grid-auto-flow: column dense; +} + +.grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); +} + +.grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); +} + +.grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); +} + +.grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); +} + +.grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); +} + +.grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); +} + +.grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); +} + +.grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); +} + +.grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); +} + +.grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); +} + +.grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); +} + +.grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); +} + +.grid-cols-none { + grid-template-columns: none; +} + +.col-auto { + grid-column: auto; +} + +.col-span-1 { + grid-column: span 1 / span 1; +} + +.col-span-2 { + grid-column: span 2 / span 2; +} + +.col-span-3 { + grid-column: span 3 / span 3; +} + +.col-span-4 { + grid-column: span 4 / span 4; +} + +.col-span-5 { + grid-column: span 5 / span 5; +} + +.col-span-6 { + grid-column: span 6 / span 6; +} + +.col-span-7 { + grid-column: span 7 / span 7; +} + +.col-span-8 { + grid-column: span 8 / span 8; +} + +.col-span-9 { + grid-column: span 9 / span 9; +} + +.col-span-10 { + grid-column: span 10 / span 10; +} + +.col-span-11 { + grid-column: span 11 / span 11; +} + +.col-span-12 { + grid-column: span 12 / span 12; +} + +.col-start-1 { + grid-column-start: 1; +} + +.col-start-2 { + grid-column-start: 2; +} + +.col-start-3 { + grid-column-start: 3; +} + +.col-start-4 { + grid-column-start: 4; +} + +.col-start-5 { + grid-column-start: 5; +} + +.col-start-6 { + grid-column-start: 6; +} + +.col-start-7 { + grid-column-start: 7; +} + +.col-start-8 { + grid-column-start: 8; +} + +.col-start-9 { + grid-column-start: 9; +} + +.col-start-10 { + grid-column-start: 10; +} + +.col-start-11 { + grid-column-start: 11; +} + +.col-start-12 { + grid-column-start: 12; +} + +.col-start-13 { + grid-column-start: 13; +} + +.col-start-auto { + grid-column-start: auto; +} + +.col-end-1 { + grid-column-end: 1; +} + +.col-end-2 { + grid-column-end: 2; +} + +.col-end-3 { + grid-column-end: 3; +} + +.col-end-4 { + grid-column-end: 4; +} + +.col-end-5 { + grid-column-end: 5; +} + +.col-end-6 { + grid-column-end: 6; +} + +.col-end-7 { + grid-column-end: 7; +} + +.col-end-8 { + grid-column-end: 8; +} + +.col-end-9 { + grid-column-end: 9; +} + +.col-end-10 { + grid-column-end: 10; +} + +.col-end-11 { + grid-column-end: 11; +} + +.col-end-12 { + grid-column-end: 12; +} + +.col-end-13 { + grid-column-end: 13; +} + +.col-end-auto { + grid-column-end: auto; +} + .transform { --transform-translate-x: 0; --transform-translate-y: 0; @@ -12692,11 +13035,11 @@ video { } .sm\:box-border { - box-sizing: border; + box-sizing: border-box; } .sm\:box-content { - box-sizing: content; + box-sizing: content-box; } .sm\:cursor-auto { @@ -12747,6 +13090,10 @@ video { display: inline-flex; } + .sm\:grid { + display: grid; + } + .sm\:table { display: table; } @@ -16213,6 +16560,18 @@ video { stroke: currentColor; } + .sm\:stroke-0 { + stroke-width: 0; + } + + .sm\:stroke-1 { + stroke-width: 1; + } + + .sm\:stroke-2 { + stroke-width: 2; + } + .sm\:table-auto { table-layout: auto; } @@ -17794,6 +18153,333 @@ video { z-index: auto; } + .sm\:gap-0 { + grid-gap: 0; + gap: 0; + } + + .sm\:gap-1 { + grid-gap: 0.25rem; + gap: 0.25rem; + } + + .sm\:gap-2 { + grid-gap: 0.5rem; + gap: 0.5rem; + } + + .sm\:gap-3 { + grid-gap: 0.75rem; + gap: 0.75rem; + } + + .sm\:gap-4 { + grid-gap: 1rem; + gap: 1rem; + } + + .sm\:gap-5 { + grid-gap: 1.25rem; + gap: 1.25rem; + } + + .sm\:gap-6 { + grid-gap: 1.5rem; + gap: 1.5rem; + } + + .sm\:gap-8 { + grid-gap: 2rem; + gap: 2rem; + } + + .sm\:gap-10 { + grid-gap: 2.5rem; + gap: 2.5rem; + } + + .sm\:gap-12 { + grid-gap: 3rem; + gap: 3rem; + } + + .sm\:gap-16 { + grid-gap: 4rem; + gap: 4rem; + } + + .sm\:gap-20 { + grid-gap: 5rem; + gap: 5rem; + } + + .sm\:gap-24 { + grid-gap: 6rem; + gap: 6rem; + } + + .sm\:gap-32 { + grid-gap: 8rem; + gap: 8rem; + } + + .sm\:gap-40 { + grid-gap: 10rem; + gap: 10rem; + } + + .sm\:gap-48 { + grid-gap: 12rem; + gap: 12rem; + } + + .sm\:gap-56 { + grid-gap: 14rem; + gap: 14rem; + } + + .sm\:gap-64 { + grid-gap: 16rem; + gap: 16rem; + } + + .sm\:gap-px { + grid-gap: 1px; + gap: 1px; + } + + .sm\:grid-flow-row { + grid-auto-flow: row; + } + + .sm\:grid-flow-col { + grid-auto-flow: column; + } + + .sm\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .sm\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .sm\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .sm\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .sm\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .sm\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .sm\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .sm\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .sm\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .sm\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .sm\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .sm\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .sm\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .sm\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .sm\:grid-cols-none { + grid-template-columns: none; + } + + .sm\:col-auto { + grid-column: auto; + } + + .sm\:col-span-1 { + grid-column: span 1 / span 1; + } + + .sm\:col-span-2 { + grid-column: span 2 / span 2; + } + + .sm\:col-span-3 { + grid-column: span 3 / span 3; + } + + .sm\:col-span-4 { + grid-column: span 4 / span 4; + } + + .sm\:col-span-5 { + grid-column: span 5 / span 5; + } + + .sm\:col-span-6 { + grid-column: span 6 / span 6; + } + + .sm\:col-span-7 { + grid-column: span 7 / span 7; + } + + .sm\:col-span-8 { + grid-column: span 8 / span 8; + } + + .sm\:col-span-9 { + grid-column: span 9 / span 9; + } + + .sm\:col-span-10 { + grid-column: span 10 / span 10; + } + + .sm\:col-span-11 { + grid-column: span 11 / span 11; + } + + .sm\:col-span-12 { + grid-column: span 12 / span 12; + } + + .sm\:col-start-1 { + grid-column-start: 1; + } + + .sm\:col-start-2 { + grid-column-start: 2; + } + + .sm\:col-start-3 { + grid-column-start: 3; + } + + .sm\:col-start-4 { + grid-column-start: 4; + } + + .sm\:col-start-5 { + grid-column-start: 5; + } + + .sm\:col-start-6 { + grid-column-start: 6; + } + + .sm\:col-start-7 { + grid-column-start: 7; + } + + .sm\:col-start-8 { + grid-column-start: 8; + } + + .sm\:col-start-9 { + grid-column-start: 9; + } + + .sm\:col-start-10 { + grid-column-start: 10; + } + + .sm\:col-start-11 { + grid-column-start: 11; + } + + .sm\:col-start-12 { + grid-column-start: 12; + } + + .sm\:col-start-13 { + grid-column-start: 13; + } + + .sm\:col-start-auto { + grid-column-start: auto; + } + + .sm\:col-end-1 { + grid-column-end: 1; + } + + .sm\:col-end-2 { + grid-column-end: 2; + } + + .sm\:col-end-3 { + grid-column-end: 3; + } + + .sm\:col-end-4 { + grid-column-end: 4; + } + + .sm\:col-end-5 { + grid-column-end: 5; + } + + .sm\:col-end-6 { + grid-column-end: 6; + } + + .sm\:col-end-7 { + grid-column-end: 7; + } + + .sm\:col-end-8 { + grid-column-end: 8; + } + + .sm\:col-end-9 { + grid-column-end: 9; + } + + .sm\:col-end-10 { + grid-column-end: 10; + } + + .sm\:col-end-11 { + grid-column-end: 11; + } + + .sm\:col-end-12 { + grid-column-end: 12; + } + + .sm\:col-end-13 { + grid-column-end: 13; + } + + .sm\:col-end-auto { + grid-column-end: auto; + } + .sm\:transform { --transform-translate-x: 0; --transform-translate-y: 0; @@ -22045,11 +22731,11 @@ video { } .md\:box-border { - box-sizing: border; + box-sizing: border-box; } .md\:box-content { - box-sizing: content; + box-sizing: content-box; } .md\:cursor-auto { @@ -22100,6 +22786,10 @@ video { display: inline-flex; } + .md\:grid { + display: grid; + } + .md\:table { display: table; } @@ -25566,6 +26256,18 @@ video { stroke: currentColor; } + .md\:stroke-0 { + stroke-width: 0; + } + + .md\:stroke-1 { + stroke-width: 1; + } + + .md\:stroke-2 { + stroke-width: 2; + } + .md\:table-auto { table-layout: auto; } @@ -27147,6 +27849,333 @@ video { z-index: auto; } + .md\:gap-0 { + grid-gap: 0; + gap: 0; + } + + .md\:gap-1 { + grid-gap: 0.25rem; + gap: 0.25rem; + } + + .md\:gap-2 { + grid-gap: 0.5rem; + gap: 0.5rem; + } + + .md\:gap-3 { + grid-gap: 0.75rem; + gap: 0.75rem; + } + + .md\:gap-4 { + grid-gap: 1rem; + gap: 1rem; + } + + .md\:gap-5 { + grid-gap: 1.25rem; + gap: 1.25rem; + } + + .md\:gap-6 { + grid-gap: 1.5rem; + gap: 1.5rem; + } + + .md\:gap-8 { + grid-gap: 2rem; + gap: 2rem; + } + + .md\:gap-10 { + grid-gap: 2.5rem; + gap: 2.5rem; + } + + .md\:gap-12 { + grid-gap: 3rem; + gap: 3rem; + } + + .md\:gap-16 { + grid-gap: 4rem; + gap: 4rem; + } + + .md\:gap-20 { + grid-gap: 5rem; + gap: 5rem; + } + + .md\:gap-24 { + grid-gap: 6rem; + gap: 6rem; + } + + .md\:gap-32 { + grid-gap: 8rem; + gap: 8rem; + } + + .md\:gap-40 { + grid-gap: 10rem; + gap: 10rem; + } + + .md\:gap-48 { + grid-gap: 12rem; + gap: 12rem; + } + + .md\:gap-56 { + grid-gap: 14rem; + gap: 14rem; + } + + .md\:gap-64 { + grid-gap: 16rem; + gap: 16rem; + } + + .md\:gap-px { + grid-gap: 1px; + gap: 1px; + } + + .md\:grid-flow-row { + grid-auto-flow: row; + } + + .md\:grid-flow-col { + grid-auto-flow: column; + } + + .md\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .md\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .md\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .md\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .md\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .md\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .md\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .md\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .md\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .md\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .md\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .md\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .md\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .md\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .md\:grid-cols-none { + grid-template-columns: none; + } + + .md\:col-auto { + grid-column: auto; + } + + .md\:col-span-1 { + grid-column: span 1 / span 1; + } + + .md\:col-span-2 { + grid-column: span 2 / span 2; + } + + .md\:col-span-3 { + grid-column: span 3 / span 3; + } + + .md\:col-span-4 { + grid-column: span 4 / span 4; + } + + .md\:col-span-5 { + grid-column: span 5 / span 5; + } + + .md\:col-span-6 { + grid-column: span 6 / span 6; + } + + .md\:col-span-7 { + grid-column: span 7 / span 7; + } + + .md\:col-span-8 { + grid-column: span 8 / span 8; + } + + .md\:col-span-9 { + grid-column: span 9 / span 9; + } + + .md\:col-span-10 { + grid-column: span 10 / span 10; + } + + .md\:col-span-11 { + grid-column: span 11 / span 11; + } + + .md\:col-span-12 { + grid-column: span 12 / span 12; + } + + .md\:col-start-1 { + grid-column-start: 1; + } + + .md\:col-start-2 { + grid-column-start: 2; + } + + .md\:col-start-3 { + grid-column-start: 3; + } + + .md\:col-start-4 { + grid-column-start: 4; + } + + .md\:col-start-5 { + grid-column-start: 5; + } + + .md\:col-start-6 { + grid-column-start: 6; + } + + .md\:col-start-7 { + grid-column-start: 7; + } + + .md\:col-start-8 { + grid-column-start: 8; + } + + .md\:col-start-9 { + grid-column-start: 9; + } + + .md\:col-start-10 { + grid-column-start: 10; + } + + .md\:col-start-11 { + grid-column-start: 11; + } + + .md\:col-start-12 { + grid-column-start: 12; + } + + .md\:col-start-13 { + grid-column-start: 13; + } + + .md\:col-start-auto { + grid-column-start: auto; + } + + .md\:col-end-1 { + grid-column-end: 1; + } + + .md\:col-end-2 { + grid-column-end: 2; + } + + .md\:col-end-3 { + grid-column-end: 3; + } + + .md\:col-end-4 { + grid-column-end: 4; + } + + .md\:col-end-5 { + grid-column-end: 5; + } + + .md\:col-end-6 { + grid-column-end: 6; + } + + .md\:col-end-7 { + grid-column-end: 7; + } + + .md\:col-end-8 { + grid-column-end: 8; + } + + .md\:col-end-9 { + grid-column-end: 9; + } + + .md\:col-end-10 { + grid-column-end: 10; + } + + .md\:col-end-11 { + grid-column-end: 11; + } + + .md\:col-end-12 { + grid-column-end: 12; + } + + .md\:col-end-13 { + grid-column-end: 13; + } + + .md\:col-end-auto { + grid-column-end: auto; + } + .md\:transform { --transform-translate-x: 0; --transform-translate-y: 0; @@ -31398,11 +32427,11 @@ video { } .lg\:box-border { - box-sizing: border; + box-sizing: border-box; } .lg\:box-content { - box-sizing: content; + box-sizing: content-box; } .lg\:cursor-auto { @@ -31453,6 +32482,10 @@ video { display: inline-flex; } + .lg\:grid { + display: grid; + } + .lg\:table { display: table; } @@ -34919,6 +35952,18 @@ video { stroke: currentColor; } + .lg\:stroke-0 { + stroke-width: 0; + } + + .lg\:stroke-1 { + stroke-width: 1; + } + + .lg\:stroke-2 { + stroke-width: 2; + } + .lg\:table-auto { table-layout: auto; } @@ -36500,6 +37545,333 @@ video { z-index: auto; } + .lg\:gap-0 { + grid-gap: 0; + gap: 0; + } + + .lg\:gap-1 { + grid-gap: 0.25rem; + gap: 0.25rem; + } + + .lg\:gap-2 { + grid-gap: 0.5rem; + gap: 0.5rem; + } + + .lg\:gap-3 { + grid-gap: 0.75rem; + gap: 0.75rem; + } + + .lg\:gap-4 { + grid-gap: 1rem; + gap: 1rem; + } + + .lg\:gap-5 { + grid-gap: 1.25rem; + gap: 1.25rem; + } + + .lg\:gap-6 { + grid-gap: 1.5rem; + gap: 1.5rem; + } + + .lg\:gap-8 { + grid-gap: 2rem; + gap: 2rem; + } + + .lg\:gap-10 { + grid-gap: 2.5rem; + gap: 2.5rem; + } + + .lg\:gap-12 { + grid-gap: 3rem; + gap: 3rem; + } + + .lg\:gap-16 { + grid-gap: 4rem; + gap: 4rem; + } + + .lg\:gap-20 { + grid-gap: 5rem; + gap: 5rem; + } + + .lg\:gap-24 { + grid-gap: 6rem; + gap: 6rem; + } + + .lg\:gap-32 { + grid-gap: 8rem; + gap: 8rem; + } + + .lg\:gap-40 { + grid-gap: 10rem; + gap: 10rem; + } + + .lg\:gap-48 { + grid-gap: 12rem; + gap: 12rem; + } + + .lg\:gap-56 { + grid-gap: 14rem; + gap: 14rem; + } + + .lg\:gap-64 { + grid-gap: 16rem; + gap: 16rem; + } + + .lg\:gap-px { + grid-gap: 1px; + gap: 1px; + } + + .lg\:grid-flow-row { + grid-auto-flow: row; + } + + .lg\:grid-flow-col { + grid-auto-flow: column; + } + + .lg\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .lg\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .lg\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .lg\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .lg\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .lg\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .lg\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .lg\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .lg\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .lg\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .lg\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .lg\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .lg\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .lg\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .lg\:grid-cols-none { + grid-template-columns: none; + } + + .lg\:col-auto { + grid-column: auto; + } + + .lg\:col-span-1 { + grid-column: span 1 / span 1; + } + + .lg\:col-span-2 { + grid-column: span 2 / span 2; + } + + .lg\:col-span-3 { + grid-column: span 3 / span 3; + } + + .lg\:col-span-4 { + grid-column: span 4 / span 4; + } + + .lg\:col-span-5 { + grid-column: span 5 / span 5; + } + + .lg\:col-span-6 { + grid-column: span 6 / span 6; + } + + .lg\:col-span-7 { + grid-column: span 7 / span 7; + } + + .lg\:col-span-8 { + grid-column: span 8 / span 8; + } + + .lg\:col-span-9 { + grid-column: span 9 / span 9; + } + + .lg\:col-span-10 { + grid-column: span 10 / span 10; + } + + .lg\:col-span-11 { + grid-column: span 11 / span 11; + } + + .lg\:col-span-12 { + grid-column: span 12 / span 12; + } + + .lg\:col-start-1 { + grid-column-start: 1; + } + + .lg\:col-start-2 { + grid-column-start: 2; + } + + .lg\:col-start-3 { + grid-column-start: 3; + } + + .lg\:col-start-4 { + grid-column-start: 4; + } + + .lg\:col-start-5 { + grid-column-start: 5; + } + + .lg\:col-start-6 { + grid-column-start: 6; + } + + .lg\:col-start-7 { + grid-column-start: 7; + } + + .lg\:col-start-8 { + grid-column-start: 8; + } + + .lg\:col-start-9 { + grid-column-start: 9; + } + + .lg\:col-start-10 { + grid-column-start: 10; + } + + .lg\:col-start-11 { + grid-column-start: 11; + } + + .lg\:col-start-12 { + grid-column-start: 12; + } + + .lg\:col-start-13 { + grid-column-start: 13; + } + + .lg\:col-start-auto { + grid-column-start: auto; + } + + .lg\:col-end-1 { + grid-column-end: 1; + } + + .lg\:col-end-2 { + grid-column-end: 2; + } + + .lg\:col-end-3 { + grid-column-end: 3; + } + + .lg\:col-end-4 { + grid-column-end: 4; + } + + .lg\:col-end-5 { + grid-column-end: 5; + } + + .lg\:col-end-6 { + grid-column-end: 6; + } + + .lg\:col-end-7 { + grid-column-end: 7; + } + + .lg\:col-end-8 { + grid-column-end: 8; + } + + .lg\:col-end-9 { + grid-column-end: 9; + } + + .lg\:col-end-10 { + grid-column-end: 10; + } + + .lg\:col-end-11 { + grid-column-end: 11; + } + + .lg\:col-end-12 { + grid-column-end: 12; + } + + .lg\:col-end-13 { + grid-column-end: 13; + } + + .lg\:col-end-auto { + grid-column-end: auto; + } + .lg\:transform { --transform-translate-x: 0; --transform-translate-y: 0; @@ -40751,11 +42123,11 @@ video { } .xl\:box-border { - box-sizing: border; + box-sizing: border-box; } .xl\:box-content { - box-sizing: content; + box-sizing: content-box; } .xl\:cursor-auto { @@ -40806,6 +42178,10 @@ video { display: inline-flex; } + .xl\:grid { + display: grid; + } + .xl\:table { display: table; } @@ -44272,6 +45648,18 @@ video { stroke: currentColor; } + .xl\:stroke-0 { + stroke-width: 0; + } + + .xl\:stroke-1 { + stroke-width: 1; + } + + .xl\:stroke-2 { + stroke-width: 2; + } + .xl\:table-auto { table-layout: auto; } @@ -45853,6 +47241,333 @@ video { z-index: auto; } + .xl\:gap-0 { + grid-gap: 0; + gap: 0; + } + + .xl\:gap-1 { + grid-gap: 0.25rem; + gap: 0.25rem; + } + + .xl\:gap-2 { + grid-gap: 0.5rem; + gap: 0.5rem; + } + + .xl\:gap-3 { + grid-gap: 0.75rem; + gap: 0.75rem; + } + + .xl\:gap-4 { + grid-gap: 1rem; + gap: 1rem; + } + + .xl\:gap-5 { + grid-gap: 1.25rem; + gap: 1.25rem; + } + + .xl\:gap-6 { + grid-gap: 1.5rem; + gap: 1.5rem; + } + + .xl\:gap-8 { + grid-gap: 2rem; + gap: 2rem; + } + + .xl\:gap-10 { + grid-gap: 2.5rem; + gap: 2.5rem; + } + + .xl\:gap-12 { + grid-gap: 3rem; + gap: 3rem; + } + + .xl\:gap-16 { + grid-gap: 4rem; + gap: 4rem; + } + + .xl\:gap-20 { + grid-gap: 5rem; + gap: 5rem; + } + + .xl\:gap-24 { + grid-gap: 6rem; + gap: 6rem; + } + + .xl\:gap-32 { + grid-gap: 8rem; + gap: 8rem; + } + + .xl\:gap-40 { + grid-gap: 10rem; + gap: 10rem; + } + + .xl\:gap-48 { + grid-gap: 12rem; + gap: 12rem; + } + + .xl\:gap-56 { + grid-gap: 14rem; + gap: 14rem; + } + + .xl\:gap-64 { + grid-gap: 16rem; + gap: 16rem; + } + + .xl\:gap-px { + grid-gap: 1px; + gap: 1px; + } + + .xl\:grid-flow-row { + grid-auto-flow: row; + } + + .xl\:grid-flow-col { + grid-auto-flow: column; + } + + .xl\:grid-flow-row-dense { + grid-auto-flow: row dense; + } + + .xl\:grid-flow-col-dense { + grid-auto-flow: column dense; + } + + .xl\:grid-cols-1 { + grid-template-columns: repeat(1, minmax(0, 1fr)); + } + + .xl\:grid-cols-2 { + grid-template-columns: repeat(2, minmax(0, 1fr)); + } + + .xl\:grid-cols-3 { + grid-template-columns: repeat(3, minmax(0, 1fr)); + } + + .xl\:grid-cols-4 { + grid-template-columns: repeat(4, minmax(0, 1fr)); + } + + .xl\:grid-cols-5 { + grid-template-columns: repeat(5, minmax(0, 1fr)); + } + + .xl\:grid-cols-6 { + grid-template-columns: repeat(6, minmax(0, 1fr)); + } + + .xl\:grid-cols-7 { + grid-template-columns: repeat(7, minmax(0, 1fr)); + } + + .xl\:grid-cols-8 { + grid-template-columns: repeat(8, minmax(0, 1fr)); + } + + .xl\:grid-cols-9 { + grid-template-columns: repeat(9, minmax(0, 1fr)); + } + + .xl\:grid-cols-10 { + grid-template-columns: repeat(10, minmax(0, 1fr)); + } + + .xl\:grid-cols-11 { + grid-template-columns: repeat(11, minmax(0, 1fr)); + } + + .xl\:grid-cols-12 { + grid-template-columns: repeat(12, minmax(0, 1fr)); + } + + .xl\:grid-cols-none { + grid-template-columns: none; + } + + .xl\:col-auto { + grid-column: auto; + } + + .xl\:col-span-1 { + grid-column: span 1 / span 1; + } + + .xl\:col-span-2 { + grid-column: span 2 / span 2; + } + + .xl\:col-span-3 { + grid-column: span 3 / span 3; + } + + .xl\:col-span-4 { + grid-column: span 4 / span 4; + } + + .xl\:col-span-5 { + grid-column: span 5 / span 5; + } + + .xl\:col-span-6 { + grid-column: span 6 / span 6; + } + + .xl\:col-span-7 { + grid-column: span 7 / span 7; + } + + .xl\:col-span-8 { + grid-column: span 8 / span 8; + } + + .xl\:col-span-9 { + grid-column: span 9 / span 9; + } + + .xl\:col-span-10 { + grid-column: span 10 / span 10; + } + + .xl\:col-span-11 { + grid-column: span 11 / span 11; + } + + .xl\:col-span-12 { + grid-column: span 12 / span 12; + } + + .xl\:col-start-1 { + grid-column-start: 1; + } + + .xl\:col-start-2 { + grid-column-start: 2; + } + + .xl\:col-start-3 { + grid-column-start: 3; + } + + .xl\:col-start-4 { + grid-column-start: 4; + } + + .xl\:col-start-5 { + grid-column-start: 5; + } + + .xl\:col-start-6 { + grid-column-start: 6; + } + + .xl\:col-start-7 { + grid-column-start: 7; + } + + .xl\:col-start-8 { + grid-column-start: 8; + } + + .xl\:col-start-9 { + grid-column-start: 9; + } + + .xl\:col-start-10 { + grid-column-start: 10; + } + + .xl\:col-start-11 { + grid-column-start: 11; + } + + .xl\:col-start-12 { + grid-column-start: 12; + } + + .xl\:col-start-13 { + grid-column-start: 13; + } + + .xl\:col-start-auto { + grid-column-start: auto; + } + + .xl\:col-end-1 { + grid-column-end: 1; + } + + .xl\:col-end-2 { + grid-column-end: 2; + } + + .xl\:col-end-3 { + grid-column-end: 3; + } + + .xl\:col-end-4 { + grid-column-end: 4; + } + + .xl\:col-end-5 { + grid-column-end: 5; + } + + .xl\:col-end-6 { + grid-column-end: 6; + } + + .xl\:col-end-7 { + grid-column-end: 7; + } + + .xl\:col-end-8 { + grid-column-end: 8; + } + + .xl\:col-end-9 { + grid-column-end: 9; + } + + .xl\:col-end-10 { + grid-column-end: 10; + } + + .xl\:col-end-11 { + grid-column-end: 11; + } + + .xl\:col-end-12 { + grid-column-end: 12; + } + + .xl\:col-end-13 { + grid-column-end: 13; + } + + .xl\:col-end-auto { + grid-column-end: auto; + } + .xl\:transform { --transform-translate-x: 0; --transform-translate-y: 0; diff --git a/__tests__/plugins/strokeWidth.test.js b/__tests__/plugins/strokeWidth.test.js new file mode 100644 index 000000000..ade28e528 --- /dev/null +++ b/__tests__/plugins/strokeWidth.test.js @@ -0,0 +1,57 @@ +import _ from 'lodash' +import escapeClassName from '../../src/util/escapeClassName' +import plugin from '../../src/plugins/strokeWidth' + +test('the width of the stroke to be applied to the shape', () => { + const addedUtilities = [] + + const config = { + theme: { + strokeWidth: { + '0': '0', + '1': '1px', + '2': '2px', + '3': '3px', + '4': '4px', + }, + }, + variants: { + strokeWidth: ['responsive'], + }, + } + + const getConfigValue = (path, defaultValue) => _.get(config, path, defaultValue) + const pluginApi = { + config: getConfigValue, + e: escapeClassName, + theme: (path, defaultValue) => getConfigValue(`theme.${path}`, defaultValue), + variants: (path, defaultValue) => { + if (_.isArray(config.variants)) { + return config.variants + } + + return getConfigValue(`variants.${path}`, defaultValue) + }, + addUtilities(utilities, variants) { + addedUtilities.push({ + utilities, + variants, + }) + }, + } + + plugin()(pluginApi) + + expect(addedUtilities).toEqual([ + { + utilities: { + '.stroke-w-0': { 'stroke-width': '0' }, + '.stroke-w-1': { 'stroke-width': '1px' }, + '.stroke-w-2': { 'stroke-width': '2px' }, + '.stroke-w-3': { 'stroke-width': '3px' }, + '.stroke-w-4': { 'stroke-width': '4px' }, + }, + variants: ['responsive'], + }, + ]) +}) diff --git a/src/corePlugins.js b/src/corePlugins.js index cc9014455..6e45b078a 100644 --- a/src/corePlugins.js +++ b/src/corePlugins.js @@ -52,6 +52,7 @@ import resize from './plugins/resize' import boxShadow from './plugins/boxShadow' import fill from './plugins/fill' import stroke from './plugins/stroke' +import strokeWidth from './plugins/strokeWidth' import tableLayout from './plugins/tableLayout' import textAlign from './plugins/textAlign' import textColor from './plugins/textColor' @@ -74,6 +75,18 @@ import scale from './plugins/scale' import rotate from './plugins/rotate' import translate from './plugins/translate' import skew from './plugins/skew' +import gap from './plugins/gap' +import columnGap from './plugins/columnGap' +import rowGap from './plugins/rowGap' +import gridAutoFlow from './plugins/gridAutoFlow' +import gridTemplateColumns from './plugins/gridTemplateColumns' +import gridColumn from './plugins/gridColumn' +import gridColumnStart from './plugins/gridColumnStart' +import gridColumnEnd from './plugins/gridColumnEnd' +import gridTemplateRows from './plugins/gridTemplateRows' +import gridRow from './plugins/gridRow' +import gridRowStart from './plugins/gridRowStart' +import gridRowEnd from './plugins/gridRowEnd' import configurePlugins from './util/configurePlugins' @@ -133,6 +146,7 @@ export default function({ corePlugins: corePluginConfig }) { boxShadow, fill, stroke, + strokeWidth, tableLayout, textAlign, textColor, @@ -149,6 +163,18 @@ export default function({ corePlugins: corePluginConfig }) { wordBreak, width, zIndex, + gap, + columnGap, + rowGap, + gridAutoFlow, + gridTemplateColumns, + gridColumn, + gridColumnStart, + gridColumnEnd, + gridTemplateRows, + gridRow, + gridRowStart, + gridRowEnd, transform, transformOrigin, scale, diff --git a/src/plugins/boxSizing.js b/src/plugins/boxSizing.js index f843af8a6..90c944f3e 100644 --- a/src/plugins/boxSizing.js +++ b/src/plugins/boxSizing.js @@ -2,8 +2,8 @@ export default function() { return function({ addUtilities, variants }) { addUtilities( { - '.box-border': { 'box-sizing': 'border' }, - '.box-content': { 'box-sizing': 'content' }, + '.box-border': { 'box-sizing': 'border-box' }, + '.box-content': { 'box-sizing': 'content-box' }, }, variants('boxSizing') ) diff --git a/src/plugins/columnGap.js b/src/plugins/columnGap.js new file mode 100644 index 000000000..6fff2b6d4 --- /dev/null +++ b/src/plugins/columnGap.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('columnGap', [['col-gap', ['gridColumnGap', 'columnGap']]]) +} diff --git a/src/plugins/display.js b/src/plugins/display.js index b199f4dd0..41507755d 100644 --- a/src/plugins/display.js +++ b/src/plugins/display.js @@ -17,6 +17,9 @@ export default function() { '.inline-flex': { display: 'inline-flex', }, + '.grid': { + display: 'grid', + }, '.table': { display: 'table', }, diff --git a/src/plugins/gap.js b/src/plugins/gap.js new file mode 100644 index 000000000..c2c2090a4 --- /dev/null +++ b/src/plugins/gap.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gap', [['gap', ['gridGap', 'gap']]]) +} diff --git a/src/plugins/gridAutoFlow.js b/src/plugins/gridAutoFlow.js new file mode 100644 index 000000000..a2fa74c44 --- /dev/null +++ b/src/plugins/gridAutoFlow.js @@ -0,0 +1,13 @@ +export default function() { + return function({ addUtilities, variants }) { + addUtilities( + { + '.grid-flow-row': { gridAutoFlow: 'row' }, + '.grid-flow-col': { gridAutoFlow: 'column' }, + '.grid-flow-row-dense': { gridAutoFlow: 'row dense' }, + '.grid-flow-col-dense': { gridAutoFlow: 'column dense' }, + }, + variants('gridAutoFlow') + ) + } +} diff --git a/src/plugins/gridColumn.js b/src/plugins/gridColumn.js new file mode 100644 index 000000000..107538718 --- /dev/null +++ b/src/plugins/gridColumn.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridColumn', [['col', ['gridColumn']]]) +} diff --git a/src/plugins/gridColumnEnd.js b/src/plugins/gridColumnEnd.js new file mode 100644 index 000000000..d483227f7 --- /dev/null +++ b/src/plugins/gridColumnEnd.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridColumnEnd', [['col-end', ['gridColumnEnd']]]) +} diff --git a/src/plugins/gridColumnStart.js b/src/plugins/gridColumnStart.js new file mode 100644 index 000000000..dc3f997d8 --- /dev/null +++ b/src/plugins/gridColumnStart.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridColumnStart', [['col-start', ['gridColumnStart']]]) +} diff --git a/src/plugins/gridRow.js b/src/plugins/gridRow.js new file mode 100644 index 000000000..d89529bd5 --- /dev/null +++ b/src/plugins/gridRow.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridRow', [['row', ['gridRow']]]) +} diff --git a/src/plugins/gridRowEnd.js b/src/plugins/gridRowEnd.js new file mode 100644 index 000000000..1aa9e6eaa --- /dev/null +++ b/src/plugins/gridRowEnd.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridRowEnd', [['row-end', ['gridRowEnd']]]) +} diff --git a/src/plugins/gridRowStart.js b/src/plugins/gridRowStart.js new file mode 100644 index 000000000..2f4fe1d03 --- /dev/null +++ b/src/plugins/gridRowStart.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridRowStart', [['row-start', ['gridRowStart']]]) +} diff --git a/src/plugins/gridTemplateColumns.js b/src/plugins/gridTemplateColumns.js new file mode 100644 index 000000000..56e9f5b00 --- /dev/null +++ b/src/plugins/gridTemplateColumns.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridTemplateColumns', [['grid-cols', ['gridTemplateColumns']]]) +} diff --git a/src/plugins/gridTemplateRows.js b/src/plugins/gridTemplateRows.js new file mode 100644 index 000000000..90d8c962c --- /dev/null +++ b/src/plugins/gridTemplateRows.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('gridTemplateRows', [['grid-rows', ['gridTemplateRows']]]) +} diff --git a/src/plugins/rowGap.js b/src/plugins/rowGap.js new file mode 100644 index 000000000..4d63ff044 --- /dev/null +++ b/src/plugins/rowGap.js @@ -0,0 +1,5 @@ +import createUtilityPlugin from '../util/createUtilityPlugin' + +export default function() { + return createUtilityPlugin('rowGap', [['row-gap', ['gridRowGap', 'rowGap']]]) +} diff --git a/src/plugins/strokeWidth.js b/src/plugins/strokeWidth.js new file mode 100644 index 000000000..79db44fcd --- /dev/null +++ b/src/plugins/strokeWidth.js @@ -0,0 +1,18 @@ +import _ from 'lodash' + +export default function() { + return function({ addUtilities, e, theme, variants }) { + const utilities = _.fromPairs( + _.map(theme('strokeWidth'), (value, modifier) => { + return [ + `.${e(`stroke-${modifier}`)}`, + { + strokeWidth: value, + }, + ] + }) + ) + + addUtilities(utilities, variants('strokeWidth')) + } +} diff --git a/stubs/defaultConfig.stub.js b/stubs/defaultConfig.stub.js index f8447e852..5a4039a27 100644 --- a/stubs/defaultConfig.stub.js +++ b/stubs/defaultConfig.stub.js @@ -368,6 +368,11 @@ module.exports = { stroke: { current: 'currentColor', }, + strokeWidth: { + '0': '0', + '1': '1', + '2': '2', + }, textColor: theme => theme('colors'), width: theme => ({ auto: 'auto', @@ -410,6 +415,75 @@ module.exports = { '40': '40', '50': '50', }, + gap: theme => theme('spacing'), + rowGap: {}, + columnGap: {}, + gridTemplateColumns: { + none: 'none', + '1': 'repeat(1, minmax(0, 1fr))', + '2': 'repeat(2, minmax(0, 1fr))', + '3': 'repeat(3, minmax(0, 1fr))', + '4': 'repeat(4, minmax(0, 1fr))', + '5': 'repeat(5, minmax(0, 1fr))', + '6': 'repeat(6, minmax(0, 1fr))', + '7': 'repeat(7, minmax(0, 1fr))', + '8': 'repeat(8, minmax(0, 1fr))', + '9': 'repeat(9, minmax(0, 1fr))', + '10': 'repeat(10, minmax(0, 1fr))', + '11': 'repeat(11, minmax(0, 1fr))', + '12': 'repeat(12, minmax(0, 1fr))', + }, + gridColumn: { + auto: 'auto', + 'span-1': 'span 1 / span 1', + 'span-2': 'span 2 / span 2', + 'span-3': 'span 3 / span 3', + 'span-4': 'span 4 / span 4', + 'span-5': 'span 5 / span 5', + 'span-6': 'span 6 / span 6', + 'span-7': 'span 7 / span 7', + 'span-8': 'span 8 / span 8', + 'span-9': 'span 9 / span 9', + 'span-10': 'span 10 / span 10', + 'span-11': 'span 11 / span 11', + 'span-12': 'span 12 / span 12', + }, + gridColumnStart: { + auto: 'auto', + '1': '1', + '2': '2', + '3': '3', + '4': '4', + '5': '5', + '6': '6', + '7': '7', + '8': '8', + '9': '9', + '10': '10', + '11': '11', + '12': '12', + '13': '13', + }, + gridColumnEnd: { + auto: 'auto', + '1': '1', + '2': '2', + '3': '3', + '4': '4', + '5': '5', + '6': '6', + '7': '7', + '8': '8', + '9': '9', + '10': '10', + '11': '11', + '12': '12', + '13': '13', + }, + gridTemplateRows: {}, + gridRow: {}, + gridRowStart: {}, + gridRowEnd: {}, transformOrigin: { center: 'center', top: 'top', @@ -509,6 +583,7 @@ module.exports = { position: ['responsive'], resize: ['responsive'], stroke: ['responsive'], + strokeWidth: ['responsive'], tableLayout: ['responsive'], textAlign: ['responsive'], textColor: ['responsive', 'hover', 'focus'], @@ -521,6 +596,18 @@ module.exports = { width: ['responsive'], wordBreak: ['responsive'], zIndex: ['responsive'], + gap: ['responsive'], + columnGap: ['responsive'], + rowGap: ['responsive'], + gridAutoFlow: ['responsive'], + gridTemplateColumns: ['responsive'], + gridColumn: ['responsive'], + gridColumnStart: ['responsive'], + gridColumnEnd: ['responsive'], + gridTemplateRows: ['responsive'], + gridRow: ['responsive'], + gridRowStart: ['responsive'], + gridRowEnd: ['responsive'], transform: ['responsive'], transformOrigin: ['responsive'], scale: ['responsive', 'hover', 'focus'], diff --git a/yarn.lock b/yarn.lock index c0b0855ae..dc1fc8604 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1822,9 +1822,9 @@ eslint-config-postcss@^2.0.2: integrity sha1-yuHGCTzteFCJSluF++HR4jK3Kvs= eslint-config-prettier@^6.0.0: - version "6.8.0" - resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.8.0.tgz#36bd7559dcef9f97d7596779b38e6a879abb89d3" - integrity sha512-aq4M7mjjVregZ2l45O9qz6Mv6f5zVMl/IqfmUL8hNOoDAzVKYMhYPJytbqE/lPIVO1iMDXIFqjiEE59BfJZpZw== + version "6.9.0" + resolved "https://registry.yarnpkg.com/eslint-config-prettier/-/eslint-config-prettier-6.9.0.tgz#430d24822e82f7deb1e22a435bfa3999fae4ad64" + integrity sha512-k4E14HBtcLv0uqThaI6I/n1LEqROp8XaPu6SO9Z32u5NlGRC07Enu1Bh2KEFw4FNHbekH8yzbIU9kUGxbiGmCA== dependencies: get-stdin "^6.0.0"