Tailwind CSS Screen Readers

This class accepts lots of value in tailwind CSS in which all the properties are covered in class form. This class is used to improving accessibility with screen readers.

Screen Readers classes:

sr-only: This class is used to hide an element visually without hiding it from screen readers
not-sr-only: This class is used to undo the sr-only class effect.

Syntax:

<svg class="sr-only|not-sr-only">...</svg>

Example:

HTML

<!DOCTYPE html>  

<html> 

<head>      

    <link href=  

    "https://unpkg.com/tailwindcss@^1.0/dist/tailwind.min.css"

    rel="stylesheet">  

</head>  

<body class="text-center">  

<center>  

    <h1 class="text-green-600 text-5xl font-bold">  

        GeeksforGeeks  

    </h1>  

    <b>Tailwind CSS Screen Readers Class</b>  

    <div class="bg-green-200 p-4 mx-16 space-y-4">  

          <span class="sr-only">sr-only</span> 

          <span class="not-sr-only">not-sr-only</span> 

    </div>  

</center>  

</body>  

</html>

Output:

screen readers

Article Tags :

CSS

Web Technologies

Recommended Articles

1. React MUI Screen Readers

2. How to fill up the rest of screen height using Tailwind CSS ?

3. How to align div vertical across full screen in Tailwind CSS ?

4. How to add Full Screen Background Video using Tailwind CSS ?

5. What is the difference between “screen” and “only screen” in media queries?

6. What is the use of the tailwind.config.js file in Tailwind CSS ?

7. Storybook-tailwind. How should I add tailwind to storybook

8. Which CSS framework is better Tailwind CSS or Bootstrap ?

9. How to Add a @tailwind CSS Rule for CSS Checker ?

10. How to use CSS Animations with Tailwind CSS ?

11. How to Create Full Screen Overlay Navigation Bar using HTML CSS and JavaScript ?

12. How to Create Skeleton Screen Loading Effect using CSS ?

13. How to fit text container width dynamically according to screen size using CSS ?

14. Full screen Search bar using CSS and JavaScript

15. How to detect touch screen device using CSS ?

16. How to create advanced Loading Screen using CSS ?

17. Foundation CSS Visibility Classes Hide by Screen Size

18. Foundation CSS Reveal Full-screen

19. Foundation CSS Visibility Classes Show by Screen Size

20. Foundation CSS Progress Bar Screen Reader

21. How to make Product screen for mobile using HTML CSS and JAVASCRIPT ?

22. How to Target Specific Screen Sizes or Devices with CSS ?

23. Tailwind CSS Text Color

24. Underline Hover Animation Effect using Tailwind CSS

25. How to set width transition in Tailwind CSS ?