tailwindlabs / play.tailwindcss.com Goto Github PK

Hey,

Wondering if we're able to fork this project to make use of it in our own product?

Hi everyone,

I would like to suggest two changes:

• Display the full version of the TailwindCSS version used for the Tailwind Play. At the moment it's just displaying v2 or v1, I would like to see the full version like v2.0.1
• Allow us to choose more versions. People could be "stuck" with an older version of Tailwind and would like to try some changes with those versions.

Can we add emmet abbreviations expansions on tab?

Here is attached issue is coming after running code in locally.

OS: Linux mint 20

I spent the last 15 mins scratching my head as to why my styles aren't working 😂

I was using className instead of class. I think a warning would've been great. Or just a squiggly-underline like in VSCode saying Did you mean `class` instead? :)

I’m considering setting up a self-hosted instance of play.

The intended audience is UX designers who will design components.

Programmers using these components would like to access the HTML and tailwind config from git afterwards, perhaps via pull requests.

Do you have any plans for GitHub integration? Would you accept a contribution? I’m thinking oauth authentication, selecting a repo and then be able to save/load/browse files from the repo.

Perhaps this is best done via a plugin api and implemented as a third party plugin?

I have limited tools for validating the accessibility behaviour of my HTML. Some of my users depend on a screen reader, I'd like to do better by them. Tailwind Play is already my go-to for testing new components. Could it gain some means by which we can preview (visually or audibly) what a screen reader will produce? Confession: I have no idea what might be possible.

Browser: Chrome 88

Removing these classes from the select fixes it
dark:focus:text-white dark:text-gray-400

Here is my code

function HeaderItem({ Icon, title }) {
return (
${ <div className='flex flex-col items-center cursor-pointer w-12 sm:w-20 hover:text-white group'> <Icon className="h-8 mb-1 group-hover:animate-bounce"/> <p className='opacity-100 group-hover:opacity-100 tracking-widest'>{title}</p> </div>}
)
}

export default HeaderItem

Tailwind config.js

module.exports = {
mode:'jit',
purge: ['./pages//*.{js,ts,jsx,tsx}', './components//*.{js,ts,jsx,tsx}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {
animation: ['group-hover'],
},
},
variants: {
extend: {
},
},
plugins: [],
corePlugins: {

}
}

Hi,
I've just discovered this new jit-technique and think it would be awesome to have it integrated in the play.tailwindcss.com site. Maybe as a version to select?

Having that as an option would enable everyone to get started quickly experimenting with the new fancy stuff 🙌

I'm running MacOS Mojave with Safari 13.0.5, and I get this error when visiting the site:

Granted, I should probably update my Mac to get Safari 14 (I just learned that it's tied to the OS update). Kind of a judgement call if you want to add a ResizeObserver polyfill.

The polyfill (e.g. resize-observer-polyfill or @juggle/resize-observer) would add ~3 KB to the bundle.

Add title to projects and create a "Dashboard" with all projects like codepen and search.

Thanks for an amazing product to begin we, I have used this successfully while teach web development to high school students. There is one extremely annoying thing though. At the top part of the editor the hover info box obscures the code where the pointer is, stopping you from click-to-navigate (unless you are fast enough)

To illustrate the problem (the gif is slowed down..)

Browser: Firefox 83

When mocking up layouts, I find myself copy-pasting certain elements a lot. For example, when building a list, I tend to duplicate the first row a few times, so I have more than one row.

However, this is a bit annoying when I change classes. Now I have to apply my change to all of them.

If Play would have a dead simple loop directly, this could we way easier.

I know this is not really the scope of this project, and once loops are added, people will want more. However, it's worth a shot.

Now imagine you're in the middle of making a project, and you accidentally close all your tabs or somehow close the tailwind play tab. There you go, lost your entire design quick in a single second. Happened to me with web editors too many times, It's incredibly annoying because I've had to re-write stuff a ton of times.

What I'm basically saying is, please add an auto-save or save feature OR to save to an existing github repo via the playground itself. Some way to not lose whatever you're working on.

Please choose a license for this project and add a LICENSE file for this repo. 😄

Oftentimes I don't need to share drafts but rather to save examples to reuse them later (similar to CodePen).

Hey there,

First off, great project! This is super useful for a tutorial I'm making about using tailwind with Oxygen builder for WordPress, as now I don't have to explain how to get tailwind installed locally.

Is there any way you could add a tab for the CSS output? It would help a lot when using tailwind in a WordPress environment.

Thanks!

Hey guys, I can't start dev server

I run: npm install then npm run dev and I get this in the console

ready - started server on http://localhost:3000
info  - Using external babel configuration from /Users/Joel/Downloads/play.tailwindcss.com/.babelrc
[BABEL] Note: The code generator has deoptimised the styling of /Users/Joel/Downloads/play.tailwindcss.com/node_modules/monaco-editor/esm/vs/language/typescript/lib/lib.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/Joel/Downloads/play.tailwindcss.com/node_modules/monaco-editor/esm/vs/language/typescript/lib/lib.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/Joel/Downloads/play.tailwindcss.com/node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of /Users/Joel/Downloads/play.tailwindcss.com/node_modules/monaco-editor/esm/vs/language/typescript/lib/typescriptServices.js as it exceeds the max of 500KB.

When I try to access to http://localhost:3000 it just shows me a blank screen forever loading.

PD: My environment
MacOS Catalina 10.15.5
Node: v12.18.3

Cheers

Thanks for building such an amazing tool. I'm new to web development and it has massively accelerated my learning and my productivity.

Feature request: It would be great to be able to hover over an HTML tag and see the corresponding item highlighted in the preview, similar to devtools works when viewing the source for a page.

When I run npm run dev this error pops up.
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/input.js' is not defined by "exports" in A:\projects\plugableweb\play.tailwindcss.com\node_modules\postcss\package.json

There is a Dark Mode for Tailwind Play but I would love to have a Dark Mode for my code itself so that I don't have to write JavaScript just to toggle dark class on html tag.

On Tailwind Play, shades of colors are different from the standard. This is causing designs (on play) to look different from the actual units.

For example, bg-gray-100 is #f7fafc, where as normally it is #f4f5f7. Link - https://play.tailwindcss.com/V5JNLj1q9x.

I couldn't see any theme/color customizations that could cause this.

Am I missing something?

We created a new preset and published it to npm, can I use this preset in tailwindplay?

It is not working for me https://play.tailwindcss.com/PltE4UuWyx?file=config

This is the preset https://www.npmjs.com/package/@placetopay/spartan

When sharing a Play, perhaps better UX not to include the social card? This will prevent excessive scrolling like such:

Of course, do include the social card when sharing the root domain.

And ultimately would be great if preview image was actual screenshot of the shared Play, but that's a whole different ticket item...

I just wanted to check something on the fly on my iPad, and there isn't any way to clear the default code loaded.

No way to do "select all" and iOS doesn't allow for holding down the backspace key.

For some reason, the error you can see in the above picture occurs when I want to use tailwind-play in Safari. I did not modify any of the default code that is loaded when opening the site.

With v2.0.2, it looks like this configuration is not working

module.exports = {
  variants: {
    extend: {
      textColor: ['last'],
    }
  },
}

The error is as follows: { extend: { textColor: string[]; }; }' is not assignable to type 'VariantsConfig'

I've tried running a Vite VueJS project w/ the same version and it's perfectly fine !

PS: thanks for your work guys. ❤️

When I try to add the plugin to the Config I get the error

Cannot find module 'tailwindcss/forms'

It would be useful to have at least support for "official" plugins or at least whitelisted one on the Tailwind Play website.

I'm on Windows 10 and afer installation (npm i) I ran npm run dev but I'm seeing a blank screen.

If it helps, this is the command line output when running npm run dev.

$ npm run dev

> @ dev C:\Users\david\Desktop\play.tailwindcss.com
> next dev

ready - started server on http://localhost:3000
info  - Using external babel configuration from C:\Users\david\Desktop\play.tailwindcss.com\.babelrc
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\david\Desktop\play.tailwindcss.com\node_modules\monaco-editor\esm\vs\language\typescript\lib\lib.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\david\Desktop\play.tailwindcss.com\node_modules\monaco-editor\esm\vs\language\typescript\lib\lib.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\david\Desktop\play.tailwindcss.com\node_modules\monaco-editor\esm\vs\language\typescript\lib\typescriptServices.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\david\Desktop\play.tailwindcss.com\node_modules\monaco-editor\esm\vs\language\typescript\lib\typescriptServices.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\david\Desktop\play.tailwindcss.com\node_modules\monaco-editor\esm\vs\language\css\_deps\vscode-css-languageservice\data\webCustomData.js as it exceeds the max of 500KB.
[BABEL] Note: The code generator has deoptimised the styling of C:\Users\david\Desktop\play.tailwindcss.com\node_modules\monaco-editor\esm\vs\language\css\_deps\vscode-css-languageservice\data\webCustomData.js as it exceeds the max of 500KB.

warn - You have enabled experimental features: uniformColorPalette, extendedSpacingScale, darkModeVariant
warn - Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, defaultLineHeights, standardFontWeights
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
event - compiled successfully
Attention: Next.js now collects completely anonymous telemetry regarding usage.
This information is used to shape Next.js' roadmap and prioritize features.
You can learn more, including how to opt-out if you'd not like to participate in this anonymous program, by visiting the following URL:
https://nextjs.org/telemetry

event - build page: /[[...slug]]
wait  - compiling...
event - build page: /[[...slug]]

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, defaultLineHeights, standardFontWeights
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes

warn - You have enabled experimental features: uniformColorPalette, extendedSpacingScale, darkModeVariant
warn - Experimental features are not covered by semver, may introduce breaking changes, and can change at any time.

risk - There are upcoming breaking changes: removeDeprecatedGapUtilities, defaultLineHeights, standardFontWeights
risk - We highly recommend opting-in to these changes now to simplify upgrading Tailwind in the future.
risk - https://tailwindcss.com/docs/upcoming-changes
undefined
undefined
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
    in Pen (at [[...slug]].js:367)
    in App (at _app.js:51)
    in Fragment
    in App
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
    in Pen (at [[...slug]].js:367)
    in App (at _app.js:51)
    in Fragment
    in App
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
Could not find files for /[[...slug]] in .next/build-manifest.json
Could not find files for /[[...slug]] in .next/build-manifest.json
Could not find files for /[[...slug]] in .next/build-manifest.json
Could not find files for /[[...slug]] in .next/build-manifest.json
event - compiled successfully
undefined
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
    in Pen (at [[...slug]].js:367)
    in App (at _app.js:51)
    in Fragment
    in App
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
Could not find files for /[[...slug]] in .next/build-manifest.json
Could not find files for /[[...slug]] in .next/build-manifest.json
undefined
Warning: useLayoutEffect does nothing on the server, because its effect cannot be encoded into the server renderer's output format. This will lead to a mismatch between the initial, non-hydrated UI and the intended UI. To avoid this, useLayoutEffect should only be used in components that render exclusively on the client. See https://fb.me/react-uselayouteffect-ssr for common fixes.
    in Pen (at [[...slug]].js:367)
    in App (at _app.js:51)
    in Fragment
    in App
    in Unknown
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in Context.Provider
    in AppContainer
Could not find files for /[[...slug]] in .next/build-manifest.json
Could not find files for /[[...slug]] in .next/build-manifest.json

Describe the problem:

Sorry if this is not the correct place, but I didn't find any repo related to the new online playground (launched today).

The problem is that some plugins don't seem to be working:

1. I added the tailwindcss-filters plugin (https://github.com/benface/tailwindcss-filters)
2. I changed the config correctly
3. The server will do its thing without complaining
4. However the new classes (added by this plugin) are not available

But if I get the link to share and open it in a new tab, then everything will ok (in that new tab the classes are available). It seems that reloading the page will unlock something.

This problem doesn't happen with other plugins, such as these two

• https://github.com/benface/tailwindcss-typography (from the same author)
• https://github.com/jorenvanhee/tailwindcss-debug-screens

Link to a minimal reproduction:

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

When this playground is initially loaded the class "filter-grayscale-90" is available (added by tailwindcss-filters). But after a simple change is made in the config (a simple newline is enough), it won't be available anymore.

I've noticed this project is missing any form of a license. I guess maybe it wasn't initially intended to be open sourced? I checked the main tailwindcss project and saw that one is MIT licensed, but I didn't want to be cheeky enough to open a PR with a specific license.

I created a Tailwind Play with this code:

<div class="flex justify-center items-center h-screen">
  <button class="inline-flex items-center text-white px-4 py-2 text-sm font-medium border border-transparent rounded-md shadow-sm select-none focus:outline-none focus:ring-2 focus:ring-offset-2 hover:shadow-lg transform hover:-translate-y-0.5 transition-all duration-150 group bg-indigo-600 hover:bg-indigo-700 focus:ring-indigo-500">
    <svg class="w-6 h-6 text-white group-hover:animate-bounce" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M15 13l-3 3m0 0l-3-3m3 3V8m0 13a9 9 0 110-18 9 9 0 010 18z"></path>
    </svg>
    <span class="ml-2">Download Image</span>
  </button>
</div>

It should show bounce animation on hover as I use group-hover:animate-bounce on the SVG.

But it doesn't.

Repro → https://play.tailwindcss.com/6uHgZwsqGt

hello! i'm new to this project and just installed for the first time and ran into this on first run:

as far as I can tell nobody's reported this before so here i am. trying to debug it now... the error message is weird because it says Unhandled Runtime Error - Error: Parsing successful!

to repro: download this repo fresh, npm install, npm run dev.

latest versions of everything

Great to see it supports sharing. However, it would be cool if we could share this as embed so that we can include it on blogposts etc.

Inspiration: Can check how codepen uses the Embed Feature,

Loving Play Tailwind, thank you SO much for the amazing product.

I would love to see multi-monitor support so I can code on one screen and visualize on another.

Thank you!

First of all thank you for all the great job you're doing.

any plan to add emmet to the text editor? it helps a lot

It would be nice to be able to quickly open the docs from the playground.

Hi all,

the other day I created a sharable snipped on Tailwind Play and I was updating while adding/editing content. I saw that the snipped is just a snapshot of when you create it and it will not automatically update to the latest content.

I think that it would be a good thing that it gets updated on the backend on the on save event if I own the snippet.

It seems that you have a maximum size around 64KB which sounds reasonable.
But it might be a good idea to make the error nicer by saying that the file is too big or something similar?

The new tailwind sandbox looks great! I noticed this bug though, look like something to do with the frontend routing.

Steps to reproduce

1. Navigate to https://play.tailwindcss.com/
2. Make a change, or click to any tab to enable the share button
3. Click "Share"
4. Click your browser's back button

Expected result

Probably to be taken back to the initial state of the sandbox, or taken back to the original URL with my changes still applied

Actual result

404 | This page could not be found

To install do I have to run npm install? Then run npm run dev?

I have seen that there is an initial branch for Apline.js. Is there any plan to merge it to master? It would be useful to test out Alpine components in the editor.

Hello, i cant start dev server, when i run yarn dev i get this in the console

ready - started server on http://localhost:3000
Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/input.js' is not defined by "exports" in D:\Software Dev\play.tailwindcss.com\node_modules\postcss\package.json
    at throwExportsNotFound (internal/modules/esm/resolve.js:290:9)
    at packageExportsResolve (internal/modules/esm/resolve.js:513:3)
    at resolveExports (internal/modules/cjs/loader.js:432:36)
    at Function.Module._findPath (internal/modules/cjs/loader.js:472:31)
    at Function.Module._resolveFilename (internal/modules/cjs/loader.js:867:27)
    at Function.resolve (internal/modules/cjs/helpers.js:94:19)
    at Object.webpack (D:\Software Dev\play.tailwindcss.com\next.config.js:178:19)
    at Object.webpack (D:\Software Dev\play.tailwindcss.com\node_modules\next-transpile-modules\src\next-transpile-modules.js:172:29)
    at getBaseWebpackConfig (D:\Software Dev\play.tailwindcss.com\node_modules\next\dist\build\webpack-config.js:136:360)
    at async Promise.all (index 0) {
  code: 'ERR_PACKAGE_PATH_NOT_EXPORTED'
}
error Command failed with exit code 1.

Env:
WIndows 10
Node 14

Apologies if this issue should be formatted or structured differently, this is my first ever issue submission!

Describe the problem:
A newly created, unmodified playground shows the copy link to playground button when hovering to the right of the Share button. Clicking this button copies a link to https://play.tailwindcss.comundefined, which is invalid.

Expected result:
Expected outcome would be that the button is completely hidden until the Share button has been clicked, which is how this button functions when changes have been made to the playground before clicking the Share button.

How to reproduce:
To reproduce this issue, simply open a new tab of https://play.tailwindcss.com/ and hover to the right of the Share button. The copy link button will appear, and clicking it will copy the invalid link to your clipboard.

I am testing a bug out in Tailwind Play but my local code uses postcss-import & postcss-nested to support SASS in CSS but can't get it to work in Tailwind Play.

Is this available? If so, how do I do it?

Hi,
I made DaisyUI plugin and it uses some custom config properties from tailwind.config.js file. When I try to use those config properties in Tailwind Play, it works perfectly but the editor highlights it as an error.

Highlighter error:

Type '{ plugins: any[]; theme: { extend: { colors: any; }; }; daisyui: { themes: boolean; rtl: boolean; }; }' is not assignable to type 'Partial<BaseConfig & { presets: Partial<BaseConfig & ...>[]; future: FutureConfig; experimental: FutureConfig; purge: PurgeConfig; ... 4 more ...; plugins: PluginsConfig; }>'.
Object literal may only specify known properties, and 'daisyui' does not exist in type 'Partial<BaseConfig & { presets: Partial<BaseConfig & ...>[]; future: FutureConfig; experimental: FutureConfig; purge: PurgeConfig; ... 4 more ...; plugins: PluginsConfig; }>'.(2322)

I love Play TW, thank you SO much for building this awesome tool.

A request I have is the ability to download the customized CSS. This would allow me to use the output when I don't want to set up a full project and build process for only a few customizations.

Especially useful for when I make config changes.

Options might also include "full" or "min" outputs