{"id":15414972,"url":"https://github.com/lxsmnsyc/tailwind-layouts","last_synced_at":"2026-03-10T04:33:38.435Z","repository":{"id":45678902,"uuid":"373489442","full_name":"lxsmnsyc/tailwind-layouts","owner":"lxsmnsyc","description":"Collection of Tailwind Layouts","archived":false,"fork":false,"pushed_at":"2021-09-05T05:32:29.000Z","size":1328,"stargazers_count":64,"open_issues_count":0,"forks_count":9,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-04-19T17:01:25.295Z","etag":null,"topics":["alpinejs","cdn-imports","esbuild","esm","lit-html","playground","preact","react","skypack","solidjs","tailwind","tailwindcss","typescript","vite","vue3"],"latest_commit_sha":null,"homepage":"https://tailwind-layouts.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lxsmnsyc.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2021-06-03T11:52:27.000Z","updated_at":"2025-03-10T19:30:35.000Z","dependencies_parsed_at":"2022-09-23T15:12:00.353Z","dependency_job_id":null,"html_url":"https://github.com/lxsmnsyc/tailwind-layouts","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/lxsmnsyc/tailwind-layouts","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Ftailwind-layouts","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Ftailwind-layouts/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Ftailwind-layouts/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Ftailwind-layouts/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lxsmnsyc","download_url":"https://codeload.github.com/lxsmnsyc/tailwind-layouts/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lxsmnsyc%2Ftailwind-layouts/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30324444,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T01:36:58.598Z","status":"online","status_checked_at":"2026-03-10T02:00:06.579Z","response_time":106,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["alpinejs","cdn-imports","esbuild","esm","lit-html","playground","preact","react","skypack","solidjs","tailwind","tailwindcss","typescript","vite","vue3"],"created_at":"2024-10-01T17:05:23.691Z","updated_at":"2026-03-10T04:33:38.417Z","avatar_url":"https://github.com/lxsmnsyc.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailwind-layouts\n\n![image](https://user-images.githubusercontent.com/4783372/121133049-74fdb180-c864-11eb-86d9-dcb2a932a174.png)\n\n\u003e A collection of [Tailwind](https://tailwindcss.com) Layouts\n\n## Playground\n\nThe website includes a client-side playground which allows components to be rendered and tweaked in real-time. The playground uses [Split.js](https://split.js.org/) to allow resizable editor and live code output.\n\n### Editor\n\n`tailwind-layouts` uses [Microsoft's Monaco Editor](https://microsoft.github.io/monaco-editor/) (more specifically, [@monaco-editor/react](https://monaco-react.surenatoyan.com/)) to view and edit the component's code.\n\n### Live Code\n\n`tailwind-layouts` uses [ESBuild](https://esbuild.github.io/) 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](https://github.com/snowpackjs/esm-hmr)-like mechanism.\n\nSince Tailwind only generates classes during build-time, `tailwind-layouts` instead uses [`twind`](https://twind.dev/) to generate classes on runtime, as well as add support for JIT.\n\n#### CDN Imports\n\nSince the compiled code's format is in ESM, `tailwind-layouts` allows CDN imports. You can check out [Skypack](http://skypack.dev/).\n\n#### Live TypeScript definitions\n\nWhen importing packages from [Skypack](http://skypack.dev/) or [UNPKG](https://unpkg.com/), `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.\n\n#### Source Map\n\nSince `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`](https://github.com/evanw/node-source-map-support) to shim source map stack traces.\n\n### Environments\n\n`tailwind-layouts` currently supports the following implementations:\n\n- [Vanilla + HTML](http://vanilla-js.com/)\n- [React](https://reactjs.org/)\n- [Preact](https://preactjs.com/)\n- [Vue 3](https://v3.vuejs.org/)\n- [`lit-html`](http://lit-html.polymer-project.org/)\n- [uhtml](https://github.com/WebReflection/uhtml)\n- [Alpine.js](https://alpinejs.dev/)\n- [SolidJS](https://www.solidjs.com/)\n\nUpcoming implemenations:\n\n- Inferno\n- Vue 2\n- Vue 3 SFC\n- Svelte\n\n## License\n\nMIT © [lxsmnsyc](https://github.com/lxsmnsyc)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Ftailwind-layouts","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flxsmnsyc%2Ftailwind-layouts","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flxsmnsyc%2Ftailwind-layouts/lists"}