{"id":26891790,"url":"https://github.com/hyperse-io/tailwind-layer","last_synced_at":"2025-11-03T17:41:43.880Z","repository":{"id":208393386,"uuid":"721493031","full_name":"hyperse-io/tailwind-layer","owner":"hyperse-io","description":"Make tailwind IntelliSense list my custom class in @layer Utilities","archived":false,"fork":false,"pushed_at":"2024-10-25T15:43:05.000Z","size":4410,"stargazers_count":3,"open_issues_count":2,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-06T22:48:09.569Z","etag":null,"topics":["hyperse","tailwindcss-intellisense","tailwindcss-plugin"],"latest_commit_sha":null,"homepage":"","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/hyperse-io.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["hyperse-net"]}},"created_at":"2023-11-21T07:12:55.000Z","updated_at":"2025-05-29T04:02:08.000Z","dependencies_parsed_at":"2024-02-03T04:25:58.491Z","dependency_job_id":"e2621a27-c9b2-46a3-a30b-82c1241980ae","html_url":"https://github.com/hyperse-io/tailwind-layer","commit_stats":null,"previous_names":["hyperse-io/tailwind-layer"],"tags_count":4,"template":false,"template_full_name":null,"purl":"pkg:github/hyperse-io/tailwind-layer","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperse-io%2Ftailwind-layer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperse-io%2Ftailwind-layer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperse-io%2Ftailwind-layer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperse-io%2Ftailwind-layer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hyperse-io","download_url":"https://codeload.github.com/hyperse-io/tailwind-layer/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hyperse-io%2Ftailwind-layer/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263421918,"owners_count":23464048,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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":["hyperse","tailwindcss-intellisense","tailwindcss-plugin"],"created_at":"2025-03-31T22:41:39.168Z","updated_at":"2025-11-03T17:41:43.837Z","avatar_url":"https://github.com/hyperse-io.png","language":"TypeScript","funding_links":["https://github.com/sponsors/hyperse-net"],"categories":[],"sub_categories":[],"readme":"# @hyperse/tailwind-layer\n\n\u003cp align=\"left\"\u003e\n  \u003ca aria-label=\"Build\" href=\"https://github.com/hyperse-io/tailwind-layer/actions?query=workflow%3ACI\"\u003e\n    \u003cimg alt=\"build\" src=\"https://img.shields.io/github/actions/workflow/status/hyperse-io/tailwind-layer/ci-integrity.yml?branch=main\u0026label=ci\u0026logo=github\u0026style=flat-quare\u0026labelColor=000000\" /\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"stable version\" href=\"https://www.npmjs.com/package/@hyperse/tailwind-layer\"\u003e\n    \u003cimg alt=\"stable version\" src=\"https://img.shields.io/npm/v/%40hyperse%2Ftailwind-layer?branch=main\u0026label=version\u0026logo=npm\u0026style=flat-quare\u0026labelColor=000000\" /\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Top language\" href=\"https://github.com/hyperse-io/tailwind-layer/search?l=typescript\"\u003e\n    \u003cimg alt=\"GitHub top language\" src=\"https://img.shields.io/github/languages/top/hyperse-io/tailwind-layer?style=flat-square\u0026labelColor=000\u0026color=blue\"\u003e\n  \u003c/a\u003e\n  \u003ca aria-label=\"Licence\" href=\"https://github.com/hyperse-io/tailwind-layer/blob/main/LICENSE\"\u003e\n    \u003cimg alt=\"Licence\" src=\"https://img.shields.io/github/license/hyperse-io/tailwind-layer?style=flat-quare\u0026labelColor=000000\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nCompile your tailwindcss components into tailwind plugins and enjoy full IntelliSense autocompletion!\n\n## Usage\n\n1. yarn add @hyperse/tailwind-layer\n\n2. packages.json\n\n```json\n  \"scripts\": {\n   \"build:twl\": \"twl -p \\\"**/globals.css\\\"\",\n  }\n```\n\n3. yarn run build:twl will output `./tailwindcss-extend.cjs`\n4. update `plugins` in `tailwind.config.ts`\n\n```ts\nimport type { Config } from \"tailwindcss\";\n\nconst config: Config = {\n  ...\n  plugins: [require(\"./tailwindcss-extend.cjs\")],\n};\nexport default config;\n```\n\n4. re-lunch your vscode ide\n\n```css filename=\"app/globals.css\"\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@import 'keen-slider/keen-slider.min.css';\n\n* {\n  scroll-behavior: smooth;\n}\n\n.progress-bar {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  height: 10px;\n  background: var(--red);\n  transform-origin: 0%;\n}\n\n@layer components {\n  .hyperce-head-xl {\n    @apply font-extrabold text-4xl md:text-6xl;\n  }\n  .hyperce-sub-head {\n    @apply font-medium text-base md:text-lg;\n  }\n  .hyperce-head-sup {\n    @apply text-sm font-semibold;\n  }\n\n  .hyperce-card-header {\n    @apply text-lg md:text-xl font-bold;\n  }\n\n  .hyperce-card-description {\n    @apply text-xs md:text-sm font-medium;\n  }\n\n  .hyperce-btn-text-low {\n    @apply text-base font-bold;\n  }\n  .hyperce-btn-text-high {\n    @apply text-lg font-bold;\n  }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperse-io%2Ftailwind-layer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhyperse-io%2Ftailwind-layer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhyperse-io%2Ftailwind-layer/lists"}