Skip to content

Conversation

@tomkp
Copy link
Owner

@tomkp tomkp commented Dec 22, 2025

Summary

  • Add comprehensive documentation for using react-split-pane with Tailwind CSS and shadcn/ui
  • Cover direct className usage, custom themed divider components, and CSS variable overrides
  • Provide practical code examples for common integration patterns

Changes

This PR adds a new "Tailwind CSS & shadcn/ui" section to the README covering:

  • Using Tailwind Classes: Direct application of utility classes via className props
  • shadcn/ui Integration: Examples using shadcn's design tokens (bg-border, bg-accent, etc.)
  • Custom Divider with shadcn: Full example of a themed divider using the cn() utility
  • CSS Variables with Tailwind: How to override split-pane CSS variables in globals.css

Motivation

Users frequently ask about Tailwind/shadcn compatibility. This documentation clarifies that the component works seamlessly with utility-first CSS frameworks since it uses plain CSS + inline styles (no CSS-in-JS conflicts).

Test plan

  • Verify code examples are syntactically correct
  • Ensure documentation flows logically after existing Styling section

Add documentation section covering best practices for using
react-split-pane with Tailwind CSS and shadcn/ui, including
direct class usage, custom divider components, and CSS variable
overrides.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>
@tomkp tomkp merged commit 71f2dbf into master Dec 22, 2025
1 check passed
@tomkp tomkp deleted the docs/tailwind-shadcn-guide branch December 22, 2025 22:46
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants