Morioh
Login
Mable Wilderman

Mable Wilderman

2 years ago

A Collection of Tailwind Layouts with React

tailwind-layouts

Untitled

A collection of Tailwind Layouts

Playground

The website includes a client-side playground which allows components to be rendered and tweaked in real-time.

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.

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.

To be added

  • Support for HTML (Vanilla), Vue and other libraries/frameworks
  • Add a tool drawer for tweaking Tailwind code through GUI.

Download Details:

Author: LXSMNSYC
The Demo/Documentation: View The Demo/Documentation
Download Link: Download The Source Code
Official Website: https://github.com/LXSMNSYC/tailwind-layouts
License: MIT © lxsmnsyc

#react #tailwind #tailwindcss #web-development

A Collection of Tailwind Layouts with React
7.25 GEEK