Section Title
Content...
A lightweight Tailwind CSS plugin that adds utilities for managing content visibility (content-visibility) and intrinsic size hints (contain-intrinsic-size). Designed to improve rendering performance and provide flexible size hints using custom theme valu
npm install tailwindcss-visibilityA lightweight Tailwind CSS plugin that adds utilities for managing content visibility (content-visibility) and intrinsic size hints (contain-intrinsic-size). Optimize rendering performance with flexible size hints using custom theme values.


``bash`
npm install tailwindcss-visibility
Add the plugin to your tailwind.config.js:
`javascript`
module.exports = {
plugins: [require('tailwindcss-visibility')],
theme: {
sizeHint: {
// Optional: Customize default size hints
sm: '300px',
md: '500px',
lg: '800px',
},
},
};
Or add your own size hints in your tailwind.config.js:
`javascript`
module.exports = {
content: ['./src/*/.{html,js}'],
plugins: [require('tailwindcss-visibility')],
theme: {
extend: {
sizeHint: {
xs: '100px',
'2xl': '1000px',
custom: '250px',
},
},
},
};
- content-auto: Enables content-visibility optimizationcontent-hidden
- : Hides content while preserving sizecontent-visible
- : Forces content to remain visible
`html`
Predefined size hints:
- size-hint-sm: 300px (default)size-hint-md
- : 500px (default)size-hint-lg
- : 800px (default)
Arbitrary values:
- size-hint-[200px]size-hint-[20rem]
- size-hint-[50vh]
-
`html`
1. Long Scrolling Pages
Optimize rendering performance for long pages with multiple sections:
` Content...html`
Section Title
2. Image Galleries
Prevent layout shifts in image galleries:
`html`

3. Accordion Sections
Optimize hidden content in accordions:
` Collapsed accordion content...html`
- Chrome 85+
- Edge 85+
- Firefox 90+
- Safari 15.4+
Using content-visibility: auto can significantly improve initial page load and rendering performance:
- Reduces rendering time for off-screen content
- Improves paint and layout performance
- Optimizes browser resource usage
Custom Size Hints
`javascript`
// tailwind.config.js
module.exports = {
theme: {
sizeHint: {
xs: '100px',
'2xl': '1000px',
card: '250px',
},
},
};
1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)git commit -m 'Add amazing feature'
3. Commit your changes ()git push origin feature/amazing-feature`)
4. Push to the branch (
5. Open a Pull Request
MIT License - see the LICENSE file for details
Peter Benoit - @peterbenoit
- Official Tailwind CSS Documentation
- MDN Content-Visibility Documentation
- MDN Contain-Intrinsic-Size Documentation
- CSS Tricks Content-Visibility
- CSS Tricks Contain-Intrinsic-Size
- Web.dev Content-Visibility
- Web.dev Contain-Intrinsic-Size