Skip to content

Commit 79761b8

Browse files
adamwathanadamwathan
authored
Merge pull request #964 from tailwindcss/sr-only-utilities
Add sr-only and not-sr-only utilities
2 parents b87aedb + 9b94cc1 commit 79761b8

File tree

5 files changed

+493
-0
lines changed

5 files changed

+493
-0
lines changed

‎__tests__/fixtures/tailwind-output-important.css

Lines changed: 230 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,52 @@ video {
610610
}
611611
}
612612

613+
.sr-only {
614+
position: absolute !important;
615+
width: 1px !important;
616+
height: 1px !important;
617+
padding: 0 !important;
618+
margin: -1px !important;
619+
overflow: hidden !important;
620+
clip: rect(0, 0, 0, 0) !important;
621+
white-space: nowrap !important;
622+
border-width: 0 !important;
623+
}
624+
625+
.not-sr-only {
626+
position: static !important;
627+
width: auto !important;
628+
height: auto !important;
629+
padding: 0 !important;
630+
margin: 0 !important;
631+
overflow: visible !important;
632+
clip: auto !important;
633+
white-space: normal !important;
634+
}
635+
636+
.focus\:sr-only:focus {
637+
position: absolute !important;
638+
width: 1px !important;
639+
height: 1px !important;
640+
padding: 0 !important;
641+
margin: -1px !important;
642+
overflow: hidden !important;
643+
clip: rect(0, 0, 0, 0) !important;
644+
white-space: nowrap !important;
645+
border-width: 0 !important;
646+
}
647+
648+
.focus\:not-sr-only:focus {
649+
position: static !important;
650+
width: auto !important;
651+
height: auto !important;
652+
padding: 0 !important;
653+
margin: 0 !important;
654+
overflow: visible !important;
655+
clip: auto !important;
656+
white-space: normal !important;
657+
}
658+
613659
.appearance-none {
614660
appearance: none !important;
615661
}
@@ -7511,6 +7557,52 @@ video {
75117557
}
75127558

75137559
@media (min-width: 640px) {
7560+
.sm\:sr-only {
7561+
position: absolute !important;
7562+
width: 1px !important;
7563+
height: 1px !important;
7564+
padding: 0 !important;
7565+
margin: -1px !important;
7566+
overflow: hidden !important;
7567+
clip: rect(0, 0, 0, 0) !important;
7568+
white-space: nowrap !important;
7569+
border-width: 0 !important;
7570+
}
7571+
7572+
.sm\:not-sr-only {
7573+
position: static !important;
7574+
width: auto !important;
7575+
height: auto !important;
7576+
padding: 0 !important;
7577+
margin: 0 !important;
7578+
overflow: visible !important;
7579+
clip: auto !important;
7580+
white-space: normal !important;
7581+
}
7582+
7583+
.sm\:focus\:sr-only:focus {
7584+
position: absolute !important;
7585+
width: 1px !important;
7586+
height: 1px !important;
7587+
padding: 0 !important;
7588+
margin: -1px !important;
7589+
overflow: hidden !important;
7590+
clip: rect(0, 0, 0, 0) !important;
7591+
white-space: nowrap !important;
7592+
border-width: 0 !important;
7593+
}
7594+
7595+
.sm\:focus\:not-sr-only:focus {
7596+
position: static !important;
7597+
width: auto !important;
7598+
height: auto !important;
7599+
padding: 0 !important;
7600+
margin: 0 !important;
7601+
overflow: visible !important;
7602+
clip: auto !important;
7603+
white-space: normal !important;
7604+
}
7605+
75147606
.sm\:appearance-none {
75157607
appearance: none !important;
75167608
}
@@ -14413,6 +14505,52 @@ video {
1441314505
}
1441414506

1441514507
@media (min-width: 768px) {
14508+
.md\:sr-only {
14509+
position: absolute !important;
14510+
width: 1px !important;
14511+
height: 1px !important;
14512+
padding: 0 !important;
14513+
margin: -1px !important;
14514+
overflow: hidden !important;
14515+
clip: rect(0, 0, 0, 0) !important;
14516+
white-space: nowrap !important;
14517+
border-width: 0 !important;
14518+
}
14519+
14520+
.md\:not-sr-only {
14521+
position: static !important;
14522+
width: auto !important;
14523+
height: auto !important;
14524+
padding: 0 !important;
14525+
margin: 0 !important;
14526+
overflow: visible !important;
14527+
clip: auto !important;
14528+
white-space: normal !important;
14529+
}
14530+
14531+
.md\:focus\:sr-only:focus {
14532+
position: absolute !important;
14533+
width: 1px !important;
14534+
height: 1px !important;
14535+
padding: 0 !important;
14536+
margin: -1px !important;
14537+
overflow: hidden !important;
14538+
clip: rect(0, 0, 0, 0) !important;
14539+
white-space: nowrap !important;
14540+
border-width: 0 !important;
14541+
}
14542+
14543+
.md\:focus\:not-sr-only:focus {
14544+
position: static !important;
14545+
width: auto !important;
14546+
height: auto !important;
14547+
padding: 0 !important;
14548+
margin: 0 !important;
14549+
overflow: visible !important;
14550+
clip: auto !important;
14551+
white-space: normal !important;
14552+
}
14553+
1441614554
.md\:appearance-none {
1441714555
appearance: none !important;
1441814556
}
@@ -21315,6 +21453,52 @@ video {
2131521453
}
2131621454

2131721455
@media (min-width: 1024px) {
21456+
.lg\:sr-only {
21457+
position: absolute !important;
21458+
width: 1px !important;
21459+
height: 1px !important;
21460+
padding: 0 !important;
21461+
margin: -1px !important;
21462+
overflow: hidden !important;
21463+
clip: rect(0, 0, 0, 0) !important;
21464+
white-space: nowrap !important;
21465+
border-width: 0 !important;
21466+
}
21467+
21468+
.lg\:not-sr-only {
21469+
position: static !important;
21470+
width: auto !important;
21471+
height: auto !important;
21472+
padding: 0 !important;
21473+
margin: 0 !important;
21474+
overflow: visible !important;
21475+
clip: auto !important;
21476+
white-space: normal !important;
21477+
}
21478+
21479+
.lg\:focus\:sr-only:focus {
21480+
position: absolute !important;
21481+
width: 1px !important;
21482+
height: 1px !important;
21483+
padding: 0 !important;
21484+
margin: -1px !important;
21485+
overflow: hidden !important;
21486+
clip: rect(0, 0, 0, 0) !important;
21487+
white-space: nowrap !important;
21488+
border-width: 0 !important;
21489+
}
21490+
21491+
.lg\:focus\:not-sr-only:focus {
21492+
position: static !important;
21493+
width: auto !important;
21494+
height: auto !important;
21495+
padding: 0 !important;
21496+
margin: 0 !important;
21497+
overflow: visible !important;
21498+
clip: auto !important;
21499+
white-space: normal !important;
21500+
}
21501+
2131821502
.lg\:appearance-none {
2131921503
appearance: none !important;
2132021504
}
@@ -28217,6 +28401,52 @@ video {
2821728401
}
2821828402

2821928403
@media (min-width: 1280px) {
28404+
.xl\:sr-only {
28405+
position: absolute !important;
28406+
width: 1px !important;
28407+
height: 1px !important;
28408+
padding: 0 !important;
28409+
margin: -1px !important;
28410+
overflow: hidden !important;
28411+
clip: rect(0, 0, 0, 0) !important;
28412+
white-space: nowrap !important;
28413+
border-width: 0 !important;
28414+
}
28415+
28416+
.xl\:not-sr-only {
28417+
position: static !important;
28418+
width: auto !important;
28419+
height: auto !important;
28420+
padding: 0 !important;
28421+
margin: 0 !important;
28422+
overflow: visible !important;
28423+
clip: auto !important;
28424+
white-space: normal !important;
28425+
}
28426+
28427+
.xl\:focus\:sr-only:focus {
28428+
position: absolute !important;
28429+
width: 1px !important;
28430+
height: 1px !important;
28431+
padding: 0 !important;
28432+
margin: -1px !important;
28433+
overflow: hidden !important;
28434+
clip: rect(0, 0, 0, 0) !important;
28435+
white-space: nowrap !important;
28436+
border-width: 0 !important;
28437+
}
28438+
28439+
.xl\:focus\:not-sr-only:focus {
28440+
position: static !important;
28441+
width: auto !important;
28442+
height: auto !important;
28443+
padding: 0 !important;
28444+
margin: 0 !important;
28445+
overflow: visible !important;
28446+
clip: auto !important;
28447+
white-space: normal !important;
28448+
}
28449+
2822028450
.xl\:appearance-none {
2822128451
appearance: none !important;
2822228452
}

0 commit comments

Comments
 (0)