Configuration and About

Configuration

You can customize the underlying sizing variables by extending the theme configuration in your tailwind.config.mjs:

module.exports = {
    theme: {
        extend: {
            sizeHint: {
                xs: '100px',
                '2xl': '1000px',
                card: '250px',
            },
        },
    },
};

This will automatically generate the corresponding .size-hint-xs, .size-hint-2xl, and .size-hint-card utility classes, in addition to the default sm (300px), md (500px), and lg (800px) values!

Browser Support

Chrome 85+
Edge 85+
Firefox 90+
Safari 15.4+

Performance Impact

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

Contributing

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

License

MIT License - see the LICENSE file for details

Author

Peter Benoit - @peterbenoit