Introducing Tailwind Play, the official Tailwind CSS playground!

[adamwathan]

Today we're excited to release the first version of Tailwind Play, an advanced online playground for Tailwind CSS that lets you use all of Tailwind's build-time features directly in the browser.

It includes support for all of Tailwind's coolest features, plus tons of stuff that's even better in Tailwind Play than it is in your editor, like:

• Customizing your Tailwind theme
• Enabling special variants, like group-hover or focus-within
• Using custom directives in your CSS like @apply, @variants, and @responsive
• Adding plugins like @tailwindcss/typography
• Intelligent code completion and linting
• Responsive design mode
• One-click sharing

Check it out at play.tailwindcss.com and let us know what you think!

[philippbosch]

This is awesome! Thanks for this!! 🎉

What would make it even better would be a way to see the resolved config (default + custom merged) somewhere. This could help new users understand how to use the config file.

[rjgux]

This is awesome! Just as we were experimenting with the idea of designing in code with Tailwind, this will help us massively in the future.

[simonswiss]

Yep - designing in code with Tailwind is definitely unlocked with this new playground! 🙌

[skttl]

How do you make the preview viewport scale like that? So awesome!

[MartinHughes-BPC]

I can only think of one response to this:

https://play.tailwindcss.com/QT0aK8Av4H?layout=vertical&file=html

[simonswiss]

Haha thank you! 🎉

[swyxio]

congrats team, i am going to use the heck out of this!

y'all probably foresaw this question coming and didn't answer it but i gotta ask anyway...

will this be open sourced? i'd like to take parts of it and add some things of my own.

[gcavanunez]

might be wrong here but seems like when hitting the save button, it creates a new static page which is so cool. less overhead of managing a database.

[swyxio]

i could be wrong here but i reckon thats a feature of nextjs https://nextjs.org/blog/next-9-4#incremental-static-regeneration-beta

[adriandmitroca]

its just a classic Laravel API (which is curious, as in beginning it was based on AWS DynamoDB but ultimately dropped by looking at the commits)

[adamwathan]

Yep just boring API with a MySQL database. We made the switch because we were worried about a $100k AWS bill with a wide-open endpoint that writes to DynamoDB. With the Laravel API we can easily rate limit it per IP (backed by Redis), and it's all just one a small EC2 server.

The entire Laravel API is only ~10 lines of changed code from what you get when running laravel new 🙃

[adriandmitroca]

Doesn't DynamoDB have any rate limiting whatsoever?

Thanks for the insights though, super interesting!

[santicros]

It's very very good. Thanks all the TailwindLabs team!

One suggestion I have is: Do you think would be interesting to add something to easily switch between breakpoints? Like small buttons with sm, md, lg, xl...?

Thanks!!

[gcavanunez]

So cool how it's optimized, out of curiosity any reason why the responsive mode doesn't include the share button?

[humledumle]

Amazing!

[Natetronn]

This is great! Thank you.

A few ideas (no pressure or anything, just what came to mind the first time I saw the Playground.)

1. It would be cool to incorporate the docs in an intelligent way. If nothing else, some sort of "cheat sheet" that stays in the playground. Perhaps a search feature, like on Tailwind proper, but it opens up in a modal or slides out or something; but don't send me to the docs; instead give me the option to go there myself.
2. When creating a share link, being able to link (and have it highlight) a specific line or set of lines, like you can on Github. I think this would be helpful for people, this so they can narrow down what they are referring to or for people having trouble to share the section they are working on etc.
3. Add an embed feature. This way people who write tutorials on Tailwind can embed various examples into their own site. Could be the whole document or just a specific line or set of lines etc. (see # 2 above.) Could be used for tutorials, but maybe even cooler, could one day be used in places like Stack Exchange (think JSFiddle but, for Tailwind questions/answers.)

[JeffreyHyer]

Small bug: When I hit "Share" a link is generated. When I switch to responsive mode the state clears the link and if I hit "Share" again a new link is generated.

Edit: I don't mean to sound like I'm complaining/unappreciative because nothing could be further from the truth. I'm over the moon about this and everything else you guys are doing with Tailwind! This is amazing, keep up the great work guys! 🎉 🙌

[Natetronn]

Perhaps the layout state, selected file and responsive viewport etc. could be decoupled from the the url a bit more and become more like query strings or something. This way people can share various states of the app (think of how Youtube does time stamps.)

[adamwathan]

Already the case, take a look at the URL when you click share!

https://play.tailwindcss.com/rLhGpdKMbv?layout=horizontal&size=706x737

[Natetronn]

Ah okay, I see that now.

Of course, now you have ~7 different URL paths for the same code, should you want to share the different views, tabs etc.

Is it not extra work/storage for your database to have so many duplicates and would it not make more sense to have the URL update dynamically, this instead of having to click share again every time one wants to share a different view?

You said it's not a bug and was designed this way but, I'm struggling to see the reasons for it being done like that. Care to enlighten me?

Note: hopefully you don't take any of this as a complaint rather, a discussion and me trying to better understand etc.

[adamwathan]

So we don't actually store 7 copies, we only store the actual code + the associated random ID. Anything in the query string is not stored in our DB, it's just added by the client at the time the snapshot is saved. If you hit the "share" button again we don't try to dedupe or reuse anything (although we certainly can if it proves to be an issue), we just create a new link.

The main reason for designing things this way is that it was easy, it works fine enough, and anything more sophisticated would take more time, which means less time to work on other hard problems we needed to solve to release it. Spending time on optimizations around storage would mean less time we could spend making third party plugins work, or getting code completion working, etc.

We had a prototype where the URL updated dynamically every time you made a change to the editor layout, but the problem was the random ID doesn't change, so it's easy to think that if you see the layout switch from vertical to horizontal in the URL that your code changes must be saved too right? But they aren't, not until you hit "share" (saving a new row to the DB on every keystroke would really be wasteful).

Putting any sort of live updating in the URL implied that things were being saved, which made the user experience more confusing. Now the URL always reflects the "last save point", so if you hit cmd+R, you are taken to an exact snapshot of the last time you pressed "share".

[Natetronn]

Thanks for the detail explanation, Adam, we really appreciate it!

[emicheldev]

Awesome 🥳😍

[MartinHughes-BPC]

Further to my previous comment, I now find this to be:

https://play.tailwindcss.com/995gjq9GTW

This is going to change the way I work with Tailwind.

[daniel-norris]

Nice, I like it!

[trevyn]

This is great! Feature request: Word wrap option in the editor.

[shanerobinson]

O... M... G... It supports VSCode keyboard shortcuts?!?! 🤪

[Calinou]

Yes, that's because it embeds VS Code's editing core which is called Monaco. You can even right-click or press F1 to access the command palette 🙂

[mike1701]

Very nice tool for playing around or building some cool components. Thanks for so far.
But a nice feature would be, when the Dark-Mode can be apply to the rendered view for testing dark:-Modifiers.

[ErwinAI]

@adamwathan Would it be possible to look into pre-fill support? An API that allows making a new instance, prefilling it with html/css and obtaining a URL for that instance would be very useful to me. Currently, the only option available for this is codepen, but I'd much rather use Tailwind Play.

[adriatic]

This is a repost of my question in Discord, conducted here for readability reason.

I took the complete code (.jsx) from the very first navbar in the collection of navbars and pasted it in https://play.tailwindcss.com/. The outcome is very different from the originalpreview. By very different I mean that instead of getting this

I am getting this (this screenshot is cut short at the bottom)

Do I need to configure https://play.tailwindcss.com/ before pasting this code?

[vnphanquang]

I could be wrong, but last time I used tailwindplay it only supported vanilla HTML syntax and not react.

And I imagine the code snippet in your "navbar in the collection of navbars" reference is only for demonstrating purposes.

[adamwathan]

Hey! As @vnphanquang mentioned, Tailwind Play doesn't support React, it's just for playing with Tailwind with vanilla HTML.

The Tailwind UI snippet you are playing with will work though if you paste it into a proper React project 👍

[adriatic]

@adamwathan If there is just one person with authority in this context, it is you 😄 - thanks for clarifying this and apologies to @vnphanquang for doubting him.

I misread the galleries exhibited in https://tailwindui.com (which can generate .jsx files) with the belief that Tailwind Play know how to process them (not that I would be disappointed if it could 😄)

[snimavat]

It would be great if it allowed me to see list of all the play snippets created by me.
that way i can play with tailwind and come back to an older snippet whenever i need to play with it again
i dont have to recode or remember the url

[atengberg]

Is there really no "explorer" mode to see all the inspired creations?

[makikata]

Is there an way to host play ourselves? There was a public repo some time ago

Just made the repo public if you want to poke around! 🧐https://t.co/KDMALxZMMO

— Adam Wathan (@adamwathan) October 7, 2020

[intrnl]

can we get an option for disabling text wrapping? I don't like the recent update to enable text wrapping.

[HappyLDE]

Hi please open source it again, I want to offer my clients the possibility to create tailwind components in realtime and could use the help of the source code

[ShaggyDude]

Can we add branching?

[wladi3]

Why did you removed the source from Github? Is there any possibility to open the code? THX !!!

[inwardmovement]

When we select an intellisense suggestion, the app shows a preview of it.

How is this preview thing achieved? How can we get the same behavior in VSCode?

[Dan1ve]

A bit of a bummer that the source repo has been removed. I used this locally to fiddle around with designs and a spotty internet connection.

To everyone looking for the source, I found this: https://codesandbox.io/p/devbox/play-tailwindcss-com-jvnel (don't know how recent this is, but it's as least something to start with)

[vortexprime24]

It is great, all I wish is JavaScript support. And, a AI integration: maybe your own? Last, collab features and desktop app, and it is ultimate

[justrach]

Hi is there any way to get the source code for the initial playground up!

[tresorama]

#13058 (comment)