lxsmnsyc / tailwind-layouts

Collection of Tailwind Layouts

tailwind-layouts

A collection of Tailwind Layouts

Playground

The website includes a client-side playground which allows components to be rendered and tweaked in real-time. The playground uses Split.js to allow resizable editor and live code output.

Editor

tailwind-layouts uses Microsoft's Monaco Editor (more specifically, @monaco-editor/react) to view and edit the component's code.

Live Code

tailwind-layouts uses ESBuild to transform and render the component in real-time. JSX and TypeScript is supported, but the compiled code is transformed into ES2017 for browser compatibility. The compiled code format is also in ESM. The code is then transported to an in-document iframe that performs an ESM HMR-like mechanism.

Since Tailwind only generates classes during build-time, tailwind-layouts instead uses twind to generate classes on runtime, as well as add support for JIT.

CDN Imports

Since the compiled code's format is in ESM, tailwind-layouts allows CDN imports. You can check out Skypack.

Live TypeScript definitions

When importing packages from Skypack or UNPKG, tailwind-layouts will attempt to load the TypeScript declarations of the imported package in real-time, allowing you to have a type-safe environment in the playground.

Source Map

Since ESBuild transforms the input code, it may lose context of what the original source may look like, so it exports a source map information of the source content. However, errors would have a hard time showing what the original source's stack looks like, therefor tailwind-layouts uses source-map-support to shim source map stack traces.

Environments

tailwind-layouts currently supports the following implementations:

• Vanilla + HTML
• React
• Preact
• Vue 3
• lit-html
• uhtml
• Alpine.js
• SolidJS

Upcoming implemenations:

• Inferno
• Vue 2
• Vue 3 SFC
• Svelte

License

MIT © lxsmnsyc

tailwind-layouts's Issues

Installing packages fails on fresh clone of repo

Steps to reproduce:

1. git clone repo
2. npm install

Results in the following error:

npm i
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/monaco-editor
npm ERR!   monaco-editor@"^0.24.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer monaco-editor@"^0.23.0" from @monaco-editor/[email protected]
npm ERR! node_modules/@monaco-editor/react
npm ERR!   @monaco-editor/react@"^4.1.3" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Lewy\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Lewy\AppData\Local\npm-cache\_logs\2021-06-24T03_19_25_628Z-debug.log

OS: Windows

Workaround:

npm install --legacy-peer-deps

This seems to work, although in my experience usually this is a fragile workaround.