Introducing Tailwind Play, the official Tailwind CSS playground! · tailwindlabs/tailwindcss · Discussion #2511

adamwathan
Oct 7, 2020
Maintainer

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!

Replies: 47 comments 25 replies

philippbosch
Oct 7, 2020

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.

0 replies

rjgux
Oct 7, 2020

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.

1 reply

@simonswiss

simonswiss Oct 9, 2020

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

skttl
Oct 7, 2020

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

0 replies

MartinHughes-BPC
Oct 7, 2020

I can only think of one response to this:

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

1 reply

@simonswiss

swyxio
Oct 7, 2020

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.

6 replies

@gcavanunez

gcavanunez Oct 7, 2020

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

swyxio Oct 7, 2020

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

adriandmitroca Oct 7, 2020

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

adamwathan Oct 7, 2020
Maintainer Author

Yep just boring API with a MySQL database. We made the switch because we were worried about a 100ドルk 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

adriandmitroca Oct 7, 2020

Doesn't DynamoDB have any rate limiting whatsoever?

Thanks for the insights though, super interesting!

santicros
Oct 7, 2020

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!!

0 replies

gcavanunez
Oct 7, 2020

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

0 replies

humledumle
Oct 7, 2020

Amazing!

0 replies

Natetronn
Oct 7, 2020

This is great! Thank you.

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

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.
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.
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.)

0 replies

JeffreyHyer
Oct 7, 2020

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! 🎉 🙌

7 replies

@Natetronn

Natetronn Oct 7, 2020

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

adamwathan Oct 7, 2020
Maintainer Author

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

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

@Natetronn

Natetronn Oct 7, 2020

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

adamwathan Oct 7, 2020
Maintainer Author

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

Natetronn Oct 7, 2020

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

emicheldev
Oct 7, 2020

Awesome 🥳😍

0 replies

MartinHughes-BPC
Oct 7, 2020

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.

0 replies

daniel-norris
Oct 7, 2020

Nice, I like it!

0 replies

trevyn
Oct 9, 2020

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

0 replies

shanerobinson
Oct 17, 2020

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

1 reply

@Calinou

Calinou Oct 22, 2020

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 🙂

ErwinAI
Jan 27, 2023

@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.

0 replies

adriatic
Apr 10, 2023

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

image

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

image

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

3 replies

@vnphanquang

vnphanquang Apr 10, 2023

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

adamwathan Apr 10, 2023
Maintainer Author

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

adriatic Apr 10, 2023

@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
Jun 10, 2023

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

0 replies

atengberg
Jun 14, 2023

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

0 replies

makikata
Jun 17, 2023

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

0 replies

intrnl
Jul 7, 2023

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

0 replies

HappyLDE
Aug 13, 2023

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

0 replies

ShaggyDude
Sep 20, 2023

Can we add branching?

0 replies

wladi3
Nov 20, 2023

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

0 replies

inwardmovement
Nov 23, 2023

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?

0 replies

Dan1ve
Apr 6, 2024

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)

0 replies

Uh oh!

Introducing Tailwind Play, the official Tailwind CSS playground! #2511

Uh oh!

adamwathan Oct 7, 2020 Maintainer

Replies: 47 comments · 25 replies

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamwathan Oct 7, 2020 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamwathan Oct 7, 2020 Maintainer Author

Uh oh!

Uh oh!

adamwathan Oct 7, 2020 Maintainer Author

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

adamwathan
Oct 7, 2020
Maintainer

Replies: 47 comments 25 replies

adamwathan Oct 7, 2020
Maintainer Author

adamwathan Oct 7, 2020
Maintainer Author

adamwathan Oct 7, 2020
Maintainer Author