TailwindCSS content-visibility Plugin

A 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.


Installation

``bash
npm install tailwindcss-visibility
`

Setup

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',
},
},
},
};
`

Usage

$3

- content-auto: Enables content-visibility optimization
- content-hidden: Hides content while preserving size
- content-visible: Forces content to remain visible

`html


- 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


`html


`html


`html


`javascript
// tailwind.config.js
module.exports = {
theme: {
sizeHint: {
xs: '100px',
'2xl': '1000px',
card: '250px',
},
},
};
`

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature`)
5. Open a Pull Request

License

MIT License - see the LICENSE file for details

Author

Peter Benoit - @peterbenoit

Related Projects

- 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