Open
Description
✨ Feature Request: Add "Copy to Clipboard" Button for Code Snippets
Description
Currently, on the Tailwind CSS documentation, the code snippets shown in the right-hand editor-style panels (e.g., under the "Getting Started" section) do not include a "Copy to Clipboard" button.
This requires users to manually highlight the code and use Ctrl+C
or long-press on mobile to copy it, which adds a small friction point — especially when working with multi-line commands or configuration code.
Steps to Reproduce
- Navigate to: https://tailwindcss.com/docs/installation
- Locate any code block within the documentation (e.g., Terminal commands,
vite.config.ts
, CSS import lines). - Observe that the code is shown inside a stylized editor box.
- Try copying the code — it must be manually selected and copied.
- There is no dedicated "Copy" button available in the UI.
Screenshots
Suggested Enhancement
Add a "Copy to Clipboard" button to the top-right corner of each code snippet block across the documentation.
Desired Behavior:
- When clicked, the button should copy the full content of the associated code block to the clipboard.
- A brief visual confirmation (e.g., tooltip or toast saying "Copied!") should appear upon success.
- The feature should be:
- Accessible (keyboard support and ARIA labels for screen readers),
- Mobile-friendly, and
- Consistent across all documentation pages.
Benefits
- Improves usability and developer experience.
- Saves time during setup and onboarding.
- Makes the documentation more interactive and accessible.
Thanks for considering this suggestion! Tailwind CSS has been a fantastic tool in my workflow, and I’d love to see its already-great documentation made even better with this small improvement.
Metadata
Metadata
Assignees
Labels
No labels