Tailwind Play

Tailwind Play is the official online playground for Tailwind CSS. It lets you write utility classes and see the result in a live preview without setting up a build tool.

The editor has HTML and CSS panes next to a preview, and it compiles your Tailwind code as you type. You can test theme settings, custom utilities and plugins. The generated CSS is shown so you can check what Tailwind outputs for your markup.

• Live preview of HTML with Tailwind classes
• Custom themes and @utility rules in the browser
• Add third-party plugins with @plugin
• Responsive design mode and split layouts
• Shows the generated CSS and its size
• Share a playground with a link

Developers learning Tailwind, designers prototyping layouts and teams who want to share a quick example of a styling issue. It is a good first step before adding Tailwind to a real project.

The playground is free to use. It runs the same kind of build that Tailwind uses locally, so it can help you spot differences in behaviour. Treat shared links as public, and avoid pasting private code or brand assets you do not want to publish.