{"id":17367305,"url":"https://github.com/mhsdesign/jit-browser-tailwindcss","last_synced_at":"2025-04-13T00:47:13.917Z","repository":{"id":37424819,"uuid":"467481491","full_name":"mhsdesign/jit-browser-tailwindcss","owner":"mhsdesign","description":"Client side api to generate css via tailwind jit in the browser - Dynamic tailwindcss!","archived":false,"fork":false,"pushed_at":"2024-12-17T07:52:34.000Z","size":511,"stargazers_count":84,"open_issues_count":7,"forks_count":20,"subscribers_count":8,"default_branch":"main","last_synced_at":"2025-04-13T00:47:07.600Z","etag":null,"topics":["client-side","jittailwind","tailwindcss"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/mhsdesign.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"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}},"created_at":"2022-03-08T11:21:09.000Z","updated_at":"2025-04-10T01:51:44.000Z","dependencies_parsed_at":"2024-05-21T09:27:37.491Z","dependency_job_id":"21a19689-adb5-4a8a-a872-2755c094f29f","html_url":"https://github.com/mhsdesign/jit-browser-tailwindcss","commit_stats":{"total_commits":34,"total_committers":3,"mean_commits":"11.333333333333334","dds":"0.11764705882352944","last_synced_commit":"fff57cfd739942cf4f5edff13a5cb9fd02b25498"},"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhsdesign%2Fjit-browser-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhsdesign%2Fjit-browser-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhsdesign%2Fjit-browser-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mhsdesign%2Fjit-browser-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mhsdesign","download_url":"https://codeload.github.com/mhsdesign/jit-browser-tailwindcss/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248650433,"owners_count":21139672,"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":["client-side","jittailwind","tailwindcss"],"created_at":"2024-10-15T22:37:59.506Z","updated_at":"2025-04-13T00:47:13.897Z","avatar_url":"https://github.com/mhsdesign.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# @mhsdesign/jit-browser-tailwindcss\nStill in Development\n\nClient side api to generate css via tailwind jit in the browser - Dynamic tailwindcss!\n\n![image](https://user-images.githubusercontent.com/85400359/157231070-2de5d2ad-c852-40db-92dd-09d7171990bb.png)\n\n### Tailwinds CDN: https://cdn.tailwindcss.com\n(Keep in mind its not only pure tailwind but also dom observing etc)\nwith tailwind Version 3.1.8\n- 372kB\n- 98.9kB brotli\n- 99.4kB gzip\n\n### This library: https://unpkg.com/@mhsdesign/jit-browser-tailwindcss\n(pure Tailwind API)\nwith tailwind Version 3.1.8\n- 246kB\n- 74.3kB gzip\n\n## Implementation\n\n### Current  implementation\n\nThis library is inspired/extracted from the library [monaco-tailwindcss](https://github.com/remcohaszing/monaco-tailwindcss)\nsee [core code link](https://github.com/remcohaszing/monaco-tailwindcss/blob/main/src/tailwindcss.worker.ts#L176)\n\nAs you might see in the code [core code example](https://github.com/mhsdesign/jit-browser-tailwindcss/blob/d3b726e7122ff1d296ae50db17030a1962be36c8/src/index.ts#L17-L34) we uses tailwind internals to create a postcss plugin via `createTailwindcssPlugin`. This is not api but works for now ;) And produces highly optimized bundle sizes.\n\n### Previous / Other implementations\n\nPreviously i implemented this based on various other projects by mocking `fs.readFileSync` and having some kind of virtual file store.\n\nThis turned out to be not so efficient in terms of bundle size ;)\n\n\u003cdetails\u003e\n\u003csummary\u003eTo be continued ...\u003c/summary\u003e\n\nAlso mocking `fs.readFileSync` had to be done in some postcss source files and this required the whole postcss package to be prebundled. If the developer wants to use post css too it would result postcss being in the bundle twice.\n\nSee packages which are implemented like this:\n\n- [@mhsdesign/jit-browser-tailwindcss:@legacy](https://github.com/mhsdesign/jit-browser-tailwindcss/tree/legacy) 501kB (resource) - [core code link](https://github.com/mhsdesign/jit-browser-tailwindcss/blob/3604924a3d2245b64ee359edc5f19b7106943a2a/src/jitBrowserTailwindcss.js#L23-L27)\n\n- [beyondcode/tailwindcss-jit-cdn](https://github.com/beyondcode/tailwindcss-jit-cdn) 778kB (resource) - [core code link](https://github.com/beyondcode/tailwindcss-jit-cdn/blob/main/src/observer.js#L40-L52)\n\n- [tailwindlabs/play.tailwindcss.com](https://github.com/tailwindlabs/play.tailwindcss.com/) - [core code link](https://github.com/tailwindlabs/play.tailwindcss.com/blob/01c39f107a7c514b4a84ec1385926748ae5a0ef0/src/workers/processCss.js#L238-L249)\n\nThe advantage here being that it uses the official API and doesnt rely much on internals.\n\n\u003c/details\u003e\n\n## Supported Features of Tailwind Css\neverything ;) - plugins, custom Tailwind config, custom Tailwind base css, variants ...\n\n## Usage:\n\n### npm\n\n```shell\nnpm install @mhsdesign/jit-browser-tailwindcss\n```\n\n### cdn\n\n```\nhttps://unpkg.com/@mhsdesign/jit-browser-tailwindcss\n```\n\n### api to generate styles from content\n\n```ts\n/**\n * The entry point to retrieve 'tailwindcss'\n *\n * @param options {@link TailwindcssOptions}\n * @example\n * const tailwindConfig: TailwindConfig = {\n *   theme: {\n *     extend: {\n *       colors: {\n *         marcherry: 'red',\n *       },\n *     },\n *   },\n * };\n * const tailwindCss = tailwindcssFactory({ tailwindConfig });\n */\nexport function createTailwindcss(\n  options?: TailwindcssOptions,\n): Tailwindcss;\n\nexport interface TailwindcssOptions {\n  /**\n   * The tailwind configuration to use.\n   */\n  tailwindConfig?: TailwindConfig;\n}\n\nexport interface Tailwindcss {\n  /**\n   * Update the current Tailwind configuration.\n   *\n   * @param tailwindConfig The new Tailwind configuration.\n   */\n  setTailwindConfig: (tailwindConfig: TailwindConfig) =\u003e void;\n\n  /**\n   * Generate styles using Tailwindcss.\n   *\n   * This generates CSS using the Tailwind JIT compiler. It uses the Tailwind configuration that has\n   * previously been passed to {@link createTailwindcss}.\n   *\n   * @param css The CSS to process. Only one CSS file can be processed at a time.\n   * @param content All content that contains CSS classes to extract.\n   * @returns The CSS generated by the Tailwind JIT compiler. It has been optimized for the given\n   * content.\n   * @example\n   * tailwindcss.generateStylesFromContent(\n   *   css,\n   *   [myHtmlCode]\n   * )\n   */\n  generateStylesFromContent: (css: string, content: (Content | string)[]) =\u003e Promise\u003cstring\u003e;\n}\n\n/**\n * Contains the content of CSS classes to extract.\n * With optional \"extension\" key, which might be relevant\n * to properly extract css classed based on the content language.\n */\nexport interface Content {\n  content: string;\n  extension?: string;\n}\n```\n\n### lower level api to create tailwind post css plugin\n\n```ts\n/**\n * Lower level API to create a PostCSS Tailwindcss Plugin\n * @internal might change in the future\n * @example\n * const processor = postcss([createTailwindcssPlugin({ tailwindConfig, content })]);\n * const { css } = await processor.process(css, { from: undefined });\n */\nexport function createTailwindcssPlugin(\n  options: TailwindCssPluginOptions\n): AcceptedPlugin;\n\nexport interface TailwindCssPluginOptions {\n  /**\n   * The tailwind configuration to use.\n   */\n  tailwindConfig?: TailwindConfig;\n  /**\n   * All content that contains CSS classes to extract.\n   */\n   content: (Content | string)[];\n}\n```\n\n## Examples:\n\nsee `examples/*`\n- esbuild-demo\n- esbuild-demo-worker\n- script-tag\n\n\n## Use cases\nthis plugin was developed to make dynamic html content elements from a CMS usable with tailwind classes. In that case one should already have a tailwind build and css file at hand - any further css can then be generated via this package. To have the least amount of css duplication, one should disable the normalize css and also use it without the `@base` include:\n\n```ts\nconst tailwind = createTailwindcss({\n    tailwindConfig: {\n        // disable normalize css\n        corePlugins: { preflight: false }\n    }\n})\n\nconst css = await tailwind.generateStylesFromContent(`\n    /* without the \"@tailwind base;\" */\n    @tailwind components;\n    @tailwind utilities;\n`, [htmlContent])\n```\n\n## Development\n\nbuild the package\n```sh\nnpm run build\n```\n\ntest each example (will be served with esbuild)\n\n```sh\nnpm run example1\nnpm run example2\nnpm run example3\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhsdesign%2Fjit-browser-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmhsdesign%2Fjit-browser-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmhsdesign%2Fjit-browser-tailwindcss/lists"}