Tailwind CSS home page
  1. Accessibility
  2. Screen Readers

Quick reference

Class
Properties
sr-onlyposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0;
not-sr-onlyposition: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal;

Basic usage

Screen-reader-only elements

Use sr-only to hide an element visually without hiding it from screen readers:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only">Settings</span>
</a>

Undoing screen-reader-only elements

Use not-sr-only to undo sr-only, making an element visible to sighted users as well as screen readers. This can be useful when you want to visually hide something on small screens but show it on larger screens for example:

<a href="#">
  <svg><!-- ... --></svg>
  <span class="sr-only sm:not-sr-only">Settings</span>
</a>

Applying conditionally

Hover, focus, and other states

Tailwind lets you conditionally apply utility classes in different states using variant modifiers. For example, use focus:not-sr-only to only apply the not-sr-only utility on focus.

<a href="#content" class="sr-only focus:not-sr-only">
  Skip to content
</a>

For a complete list of all available state modifiers, check out the Hover, Focus, & Other States documentation.

Breakpoints and media queries

You can also use variant modifiers to target media queries like responsive breakpoints, dark mode, prefers-reduced-motion, and more. For example, use md:not-sr-only to apply the not-sr-only utility at only medium screen sizes and above.

<div class="sr-only md:not-sr-only">
  <!-- ... -->
</div>

To learn more, check out the documentation on Responsive Design, Dark Mode and other media query modifiers.

Awesome Tailwind CSS

Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces.

Contents

Legend: 💙 Official resource

  • 💙 Website - Official Tailwind CSS website.
  • 💙 Repository - Official Tailwind CSS repository.
  • 💙 Tailwind UI - Component library made with Tailwind CSS.
  • 💙 Headless UI - Completely unstyled, fully accessible UI components.
  • 💙 Heroicons - Beautiful, hand-crafted SVG icons.
  • 💙 Play - Advanced online playground for Tailwind CSS.
  • 💙 Discord - Official Discord server to connect with other community members about Tailwind CSS.
  • Tailwind Weekly - Weekly newsletter about all things Tailwind CSS.

IDE Extensions

Legend: 💙 Official resource

Plugins

Legend: 💙 Official plugin · 🎨 Theming · 💼 Utilities · 🧬 Variants · 🧩 Components · 🛑 Deprecated

  • 💙🧩 Typography - Adds a prose class for beautiful typographic defaults.
  • 💙💼 Container queries - Provides utilities for container queries.
  • 💙 Forms - Adds better default styles to form elements.
  • 🎨🧬 Theme Variants - Adds theme variants based on media queries and/or CSS selectors.
  • 🎨🧬 Theme Swapper - Theming using CSS variables, with media queries support.
  • 🎨🧬 Themer - Adds theming support for Tailwind CSS with CSS variables and variants.
  • 🎨🧩 Tailwind Elements - Extends Tailwind CSS with 500+ interactive components (datepickers, modals, forms, tables, darkmode).
  • 🎨🧩 CSS Variables - Exports custom CSS variables.
  • 🎨💼 Accent - Adds accent colors for more dynamic and flexible color utilization.
  • 💼🧬 Radix - Adds utilities and variants for styling Radix UI state.
  • 💼 Image Rendering - Adds image-rendering utilities.
  • 💼 Elevation - Adds Material UI elevation utilities.
  • 💼 RFS - Adds RFS utilities.
  • 💼 Bidirectional - Adds utilities for creating multilingual bidirectional layouts.
  • 💼 Background SVG - Inject SVGs as background images with color variants.
  • 💼 Background Unsplash - Apply unsplash.com images as background.
  • 💼 Brand Colors - Adds various brand colors for background, border and text.
  • 💼 Bootstrap Grid - Generates Bootstrap’s style flexbox grid system.
  • 💼 Leading Trim - Adds utilities to trim text whitespace, using Capsize.
  • 💼 Scrollbar Hide - Adds scrollbar-hide class for visual hide scrollbar.
  • 💼 Fluid Type - Adds fluid type (font-size) utilities.
  • 💼 Grid Areas - Adds grid-areas and grid-area utilities.
  • 💼 Full bleed background and borders - Provides utilities for extended backgrounds and borders.
  • 💼 CSS Filter Order - Adds filter-order utilities for changing the order of filters in the generated CSS.
  • 💼 Tailwind CSS 3D - Adds 3D transform utilities and animations.
  • 💼 Claymorphism - Adds clay utilities for creating claymorphism style.
  • 💼🧬🧩 Fluid - Adds fluid clamp() versions of every built-in utility.
  • 🧬 FormKit - Adds variants for input and form states for FormKit.
  • 🧬 Htmx - Adds variants for styling on htmx events.
  • 🧩 Debug screens - Adds a component that shows the currently active screen (responsive breakpoint).
  • 💼 Dot & Grid Backgrounds - Adds bg-grid and bg-dot classes to add easy-to-customize grid and dot pattern backgrounds with just CSS.

-🛑 *Below are official plugins which functionalities are either deprecated or (partially) implemented in core.

  • 🛑💼💙 Line Clamp - Provides utilities for visually truncating text after a fixed number of lines.
  • 🛑🧩💙 Custom Forms - Adds better default styles to form elements.
  • 🛑💙💼 Aspect Ratio - Adds composable aspect ratio utilities.

Tools

Legend: 🌍 Accessible online · 🔼 Conversion or upgrade tool · 🔧 Generator · 🅰 Typing/enforcement · 💼 Plugins/Tools/Extensions for external services · 🎨 Color-related · 🚀 Framework · 💰 Paid plans

  • 💙💼 Prettier plugin - Official Tailwind CSS plugin for Prettier.
  • 🎨🌍🔧 Ui Colors - Color palette generator for Tailwind CSS.
  • 🎨🌍🔧 Tailwind Color Shades - Color shades generator for Tailwind CSS.
  • 🎨🌍🔧 Palette generator - Color palette generator that outputs Tailwind CSS configuration files.
  • 🎨🌍🔧 Tailwind Colors - Color configuration generator for Tailwind CSS.
  • 🎨🌍🔧 Tailwind Color Explorer - Color explorer for Tailwind CSS.
  • 🎨🌍🔧 TailwindInk - AI palette generator, trained with the Tailwind CSS palette.
  • 🎨🌍🔧 Gradient Designer - Generate gradients for Tailwind 2.0+.
  • 🎨🌍🔧 Grayscale Design - A Luminance-based color palette generator.
  • 🎨🌍🔧 Hypercolor - Collection of pre-configured Tailwind CSS gradients with directional options.
  • 🎨🌍🔧 Palettolithic - Generates harmonius color palettes based on one color.
  • 🎨🌍🔧 Tailwind Gradient Generator - Create perfect Tailwind CSS gradients with zero lines of code.
  • 🎨🌍🔧 Tints - Color palette penerator and API for Tailwind CSS.
  • 🎨🌍🔧 Tailwind CSS Colors - Cheat sheet for Tailwind CSS colors.
  • 🎨🌍🔧 Tailwind Gradients - Collection of gradients using Tailwind CSS classes.
  • 🎨🌍🔧 Fullwind CSS - Extend Tailwind CSS color palettes with additional shades.
  • 🌍🔧💼 Twind - Compiler functions that turn Tailwind’s classes into CSS at run, serve and build time.
  • 🌍🔧 tail-animista - Configurable custom animation utilities generator for Tailwind CSS.
  • 🌍🔧 brands-tail-color - Configuration generator using various brands’ colors.
  • 🌍 Typography playground - Tool for trying different Google Fonts combinations with the Tailwind CSS typography plugin.
  • 🌍 Flowrift - Beautifully designed Tailwind CSS UI blocks.
  • 🔼🌍🔧 Tailwindhelper - Visualize Tailwind CSS classes and unit converter.
  • 🔼🌍 Prefixer - Tailwind classes’ prefixer tool.
  • 🔼🌍 CSS to Tailwind CSS Converter - Converts CSS to Tailwind CSS by suggesting classes that best match.
  • 🔼🌍 ska-tailwind-editor - Edit Tailwind HTML as WordPress blocks with intuitive UI for Tailwind classes and get HTML or JSX back.
  • 🔼 Tailwindo - Bootstrap to Tailwind CSS converter.
  • 🔼 RustyWind - CLI tool for sorting Tailwind CSS classes.
  • 🚀 Maizzle - Framework for rapid email prototyping with Tailwind CSS.
  • 🅰 react-native-tailwindcss - React Native typing system.
  • 💼 Alfred Workflow - Fast Tailwind CSS documentation search application.
  • 💼 vue-cli-plugin-tailwind - Vue CLI plugin that adds Tailwind CSS to a project.
  • 💼 @nuxtjs/tailwindcss - Tailwind CSS module for NuxtJS with PurgeCSS and modern CSS (preset env 1).
  • 💼 preact-cli-tailwind - Tailwind CSS integration for Preact.
  • 💼 tailwindcss-rails - Gem for using Tailwind CSS with Rails’ asset pipeline.
  • 💼🔧 twin.macro - Use Tailwind classes within any CSS-in-JS library.
  • 💼🔧 tailwindcss-webpack-plugin - Out-of-the-box Tailwind CSS, supports “Design in DevTools” mode and visualizes Tailwind CSS configuration.
  • 💼🔧 tailwindcss-vite-plugin - Vite plugin for Tailwind CSS, supports “Design in DevTools” mode and visualizes Tailwind CSS configuration.
  • 💼🔧 Tailwind Config Viewer - Local UI tool for visualizing your Tailwind CSS configuration file.
  • 💼 clb - clb (class list builder) is a utility function that builds a class list based on a Stitches like API.
  • 💼 react-with-class - Utility function for creating primitive React components with a set of classes, props or variants.
  • 💼 twined-components - Extended component of a styled-components that prioritizes class names for use in Tailwind CSS.
  • 💼 Tails DevTools - All-in-one browser extension for Tailwind CSS.
  • 💼 Impulse.dev – UI editor for Tailwind CSS and React that edits your code.
  • 💼 Tailiscope.nvim - Tailwind CSS cheat sheet integrated in Neovim.
  • 💼 Raycast Extension - Search classes, documentation and colors in Raycast Launcher.
  • 💼 DivMagic - Copy any web element and style as Tailwind CSS component.
  • 💼 Gimli Tailwind - Smart tools for Tailwind CSS as a browser extension.
  • 🌍 Tailwind Cheat Sheet - Tailwind CSS class names in a searchable page.
  • 🌍🔧 Tailwind Grid Generator - Drag and drop Tailwind CSS grid generator.
  • 🌍🔧 Tailwind Box Shadows Generator - Box Shadows generator.
  • 💰🌍🔧 Windframe - Tailwind CSS drag and drop builder to rapidly build and prototype websites.
  • 🌍 Static Tailwind - The most used Tailwind classes, precompiled, with no build step.
  • 🎨🔧 Design GUI - AI-powered Chrome extension for managing colors in daisyUI and shadcn/ui.

UI Libraries, Components & Templates

Legend: 💙 Official resource · 📚 Library · 🧩 Components · 📁 Templates

  • 💙🧩 Tailwind UI - Component library made with Tailwind CSS.
  • 💙📚 Headless UI - Completely unstyled, fully accessible UI components.
  • 💙📁 Catalyst - Beautiful, accessible application UI kit for React.
  • 📚 VueTailwind - Vue.js UI library using Tailwind CSS.
  • 📚 Flowbite - Open-source component library built with Tailwind CSS.
  • 📚 a17t - Atomic design toolkit built to extend Tailwind CSS.
  • 📚 tails-ui - React UI library using Tailwind CSS.
  • 📚 tails - Hand-crafted templates and components using Tailwind CSS.
  • 📚 Svelte Headless UI - Unofficial Svelte port of Headless UI.
  • 📚 Xtend UI - Tailwind CSS components with advanced interactions and animations.
  • 📚 Headless UI Float - Floating UI integration for Headless UI.
  • 📚 Vanilla Components - Set of fully customizable Vue components.
  • 📚 Sailboat UI - Modern UI framework for Tailwind CSS.
  • 📚 Built At Lightspeed - Massive directory of 500+ Tailwind templates, starters and UI kits.
  • 📚 Statichunt - Open source directory of hand-picked free and premium Tailwind templates & Starters.
  • 📚 Tailkits - Curated Tailwind CSS components, templates, UI kits, resources, tools & more.
  • 📚 STDF - Mobile web component library based on Svelte and Tailwind CSS.
  • 📚 TWC - Lightweight library to create reusable React + Tailwind CSS components in one line.
  • 📚 Tremor - React library to build charts and dashboards with Tailwind CSS.
  • 📚 Preline UI - Open-source Tailwind CSS components library for any needs.
  • 🧩 TailBlocks - 60+ different ready to use Tailwind CSS blocks.
  • 🧩 Tailwind Components - Community-driven Tailwind CSS component repository.
  • 🧩 Tailwind Toolbox - Templates, components and resources.
  • 🧩 Meraki UI Components - Beautiful Tailwind CSS components that support RTL languages.
  • 🧩 Tailwind Cards - Growing collection of text/image cards.
  • 🧩📁 Tailwind Templates - Collection of templates and components.
  • 🧩📁 Treact - React UI templates and components built using Tailwind CSS.
  • 🧩📁 Jakarta LTE - Admin template using Tailwind CSS.
  • 🧩📁 themes.dev - Handcrafted, free and premium Tailwind CSS themes and components.
  • 🧩 Sail UI - Collection of basic UI components built on Tailwind CSS.
  • 🧩 jQuery Toggler - Switches using jQuery and Tailwind CSS.
  • 🧩 Tailwind Kit - Framework-agnostic, Vue.js, React and Angular components.
  • 🧩 WickedBlocks - Collection of more than 120 layout blocks and components built with Tailwind CSS.
  • 🧩 Daisy UI - UI Components for Tailwind CSS.
  • 🧩 Kometa UI Kit - Free multi-purpose UI kit, built with Tailwind CSS.
  • 🧩 Mamba UI - Free Tailwind CSS components, sections and templates.
  • 🧩 Litepie Date picker - A date range picker component for Vue.js and Tailwind CSS.
  • 🧩 Tailwind Datepicker - Adds a datepicker component built with Tailwind CSS and vanilla JavaScript.
  • 🧩 Tailwind Typeahead - Typeahead/Autocomplete component built with Vue.js and Tailwind CSS.
  • 🧩 Material Tailwind - Easy to use components library for Tailwind CSS and Material Design.
  • 🧩 Layouts for Tailwind - Layouts and UI Patterns for Tailwind CSS.
  • 🧩 HyperUI - Open source marketing and ecommerce Tailwind CSS components.
  • 🧩 Snippets - Open source collection of animation snippets made for Tailwind CSS.
  • 🧩 Fancy Tailwind - Large collection of Tailwind CSS UI components (700+).
  • 🧩 Myna UI - Open source UI Components and Marketing Elements made with Tailwind CSS.
  • 🧩 RippleUI - Clean, modern and beautiful Tailwind CSS components.
  • 🧩 Wind UI - Expertly made, responsive, accessible components in React and HTML ready to be used on your website or app.
  • 🧩 Pines UI - Alpine and Tailwind CSS UI library.
  • 🧩 NativeWind - NativeWind uses Tailwind CSS as scripting language to create a universal style system for React Native.
  • 🧩 Windstatic - Set of 161 elements & layouts made with Tailwind CSS and Alpine.js.
  • 🧩 TailwindFlex - Free library of Tailwind CSS examples.
  • 🧩 Shadcn UI - Re-usable components built using Radix UI and Tailwind CSS.
  • 🧩 Indie UI - Rich styled UI components.
  • 🧩 Penguin UI - Plug-n-play UI component library for Tailwind CSS & Alpine JS.
  • 🧩 Motion Primitives - React motion components built with Tailwind CSS and Framer Motion.
  • 📁 Vue Notus - Open-source Tailwind CSS and Vue.js UI kit.
  • 📁 EasyTailwind - Freemium, easily customizable templates made with Tailwind CSS.
  • 📁 Windmill Dashboard - Multi theme, completely accessible dashboard template.
  • 📁 Tailwind Admin - Administration panel template with Tailwind CSS.
  • 📁 Landing Gradients - Landing page template using gradients (1.7+).
  • 📁 Resume - Simple resume with Tailwind CSS.
  • 📁 Simple Light - Free landing page template built with React & Tailwind CSS.
  • 📁 V-Dashboard - Dashboard starter template built with Vue 3 and Tailwind CSS.
  • 📁 Petra - Free landing page template built with Nuxt.js & Tailwind CSS.
  • 📁 Tailmin - Admin dashboard built with Vue.js and Tailwind CSS.
  • 📁 OhMySMTP Templates - Set of Transactional HTML Email Templates, built with Maizzle
  • 📁 Material Tailwind Kit React - Free Tailwind CSS and React UI kit.
  • 📁 Material Tailwind Dashboard React - Free Tailwind CSS and React admin template.
  • 📁 Admin One Vue 3 - Free Vue.js 3 Tailwind CSS admin template with Vite & Vue CLI support.
  • 📁 Cruip - Beautifully designed HTML, React, and Vue.js templates.
  • 📁 Admin One React - Free React.js Tailwind CSS admin template with Next.js & TypeScript.
  • 📁 Flowbite Admin Dashboard - Open-source admin dashboard template built with Tailwind CSS and Flowbite.
  • 📁 Astro Template Resume - Eye-catching resume template built with Astro, Tailwind CSS.
  • 📁 Astro Template Cactus - Tailwind CSS Astro starter template.
  • 📁 Astro Template Ovidius - Tailwind CSS & Astro blog template.
  • 📁 Astro Template Dante - Tailwind CSS & Astro blog/portfolio template.

Starters & Themes

Legend: 💼 Package · 📟 Command line tool/generator · 🚀 Cloneable

Learning

Legend: 💙 Official resource · 🧪 Sample · 🔧 Setup Tutorial · 🎬 Video Tutorial · 🎓 Component or Page Tutorial · 🎥 Cast