Playground
A live sandbox for experimenting with Tailwind CSS. Quickly try out classes, preview results instantly, and save your progress if needed.
Edit Tailwind Code
Type or paste any HTML using Tailwind classes. Every change you make is reflected instantly in the live preview on the right.
Live Preview
Changes from your input are applied directly into this preview window. It's a great way to experiment, test, and prototype before building for production.
How to Get the Most Out of the Playground
Live Editing with Real-Time Preview
Write and modify Tailwind CSS classes in real-time and see the effects immediately in the preview. Use it for quick prototyping or to test out utility combinations you're interested in.
Save and Share Your Work
Click the 'Save' icon at the top right to store your latest snippet. Need to collaborate or show off your code? Use the 'Share' option to copy and share a link with anyone you want.
Import from Examples
Looking for a head start? Select from existing code examples or import directly from your code editor or a previously saved snippet.
Custom Configuration
Use the Tailwind CSS configuration editor to tweak the core Tailwind setup and see how your modifications affect the rendered output. Customize colors, spacing, fonts, and more!