{"id":18106642,"url":"https://github.com/balintbrews/tailwindcss-in-browser","last_synced_at":"2025-08-20T20:31:36.132Z","repository":{"id":260168867,"uuid":"880511215","full_name":"balintbrews/tailwindcss-in-browser","owner":"balintbrews","description":"Building CSS directly in the browser using Tailwind CSS 4.","archived":false,"fork":false,"pushed_at":"2024-11-22T15:37:32.000Z","size":172,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2024-11-22T15:38:33.030Z","etag":null,"topics":["css","tailwind","tailwindcss","tailwindcss-v4"],"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/balintbrews.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-10-29T21:24:02.000Z","updated_at":"2024-11-22T15:36:35.000Z","dependencies_parsed_at":"2024-10-31T11:19:22.294Z","dependency_job_id":"e50a0409-308d-402d-acdd-d2bc6ef0e7a6","html_url":"https://github.com/balintbrews/tailwindcss-in-browser","commit_stats":null,"previous_names":["balintbrews/tailwind-browser","balintbrews/tailwindcss-in-browser"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balintbrews%2Ftailwindcss-in-browser","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balintbrews%2Ftailwindcss-in-browser/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balintbrews%2Ftailwindcss-in-browser/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/balintbrews%2Ftailwindcss-in-browser/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/balintbrews","download_url":"https://codeload.github.com/balintbrews/tailwindcss-in-browser/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230452872,"owners_count":18228193,"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":["css","tailwind","tailwindcss","tailwindcss-v4"],"created_at":"2024-10-31T23:07:33.905Z","updated_at":"2025-08-20T20:31:36.042Z","avatar_url":"https://github.com/balintbrews.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003e\u003ccode style=\"font-weight: bold; font-size: 2rem;\"\u003etailwindcss-in-browser\u003c/code\u003e\u003c/h1\u003e\n\u003cp\u003e\n  \u003ca href=\"https://github.com/balintbrews/tailwindcss-in-browser/actions\"\u003e\n    \u003cimg src=\"https://github.com/balintbrews/tailwindcss-in-browser/actions/workflows/tests.yml/badge.svg\" alt=\"Build status\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nA JavaScript library that enables you to build CSS directly in the browser using\n[Tailwind CSS 4](https://tailwindcss.com).\n\n## Installation\n\n```bash\nnpm install tailwindcss-in-browser\n```\n\n## Usage\n\n```javascript\nimport buildCss from \"tailwindcss-in-browser\";\n\nconst markup =\n  '\u003cdiv class=\"text-2xl text-teal-600 font-semibold\"\u003eHello, world!\u003c/div\u003e';\n\n// Tailwind CSS 4 configuration via CSS.\nconst configurationCss = `\n  @theme {\n    --font-size-2xl: 1.75rem;\n    --font-size-2xl--line-height: 2.25rem;\n  }\n`;\n\nbuildCss(markup, configurationCss, {\n  compileCssOptions: { addPreflight: false }, // Optional. Defaults to `true`.\n  transformCssOptions: { minify: false }, // Optional. Defaults to `true`.\n}).then((css) =\u003e {\n  // `css` contains the generated Tailwind CSS styles.\n});\n```\n\nThis library is available as an ES module and works with both module bundlers\nand directly in browsers:\n\n```html\n\u003cscript type=\"module\"\u003e\n  import buildCss from \"https://unpkg.com/tailwindcss-in-browser\";\n\n  // ...\n\u003c/script\u003e\n```\n\n## Note for Vite users\n\nIf you use Vite, add the following to your config:\n\n```javascript\n{\n  optimizeDeps: {\n    exclude: [\"tailwindcss-in-browser\"],\n  },\n};\n```\n\nThis workaround is needed until\n[vitejs/vite#8427](https://github.com/vitejs/vite/issues/8427) is fixed.\n\n## How it works\n\n1. A function from Tailwind CSS 3 is used to extract class names from the\n   markup. In Tailwind CSS 4, this is done by the Oxide engine, which is written\n   in Rust, and requires a Node.js runtime.\n\n2. Compiling the CSS using the extracted class names happens with Tailwind CSS\n   4, supporting its [theme variables](https://tailwindcss.com/docs/theme).\n\n3. [Lightning CSS](https://lightningcss.dev) is used to transform the compiled\n   CSS for browser compatibility, matching the implementation of Tailwind CSS 4,\n   but using\n   [`lightningcss-wasm`](https://www.npmjs.com/package/lightningcss-wasm), so it\n   can run in the browser.\n\n## API reference\n\n### Main function\n\n#### `buildCss()`\n\nThe primary function for generating Tailwind CSS styles. It extracts class names\nfrom the markup, compiles them using Tailwind CSS 4, and transforms them with\nLightning CSS for browser compatibility.\n\n| Parameter                     | Type                                          | Description                                                                                               |\n| ----------------------------- | --------------------------------------------- | --------------------------------------------------------------------------------------------------------- |\n| `markup`                      | `string`                                      | The HTML markup containing Tailwind classes.                                                              |\n| `configurationCss`            | `string`                                      | CSS configuration for Tailwind CSS 4 (see [Tailwind CSS 4 configuration](#tailwind-css-4-configuration)). |\n| `options`                     | `object`                                      | Optional configuration object.                                                                            |\n| `options.compileCssOptions`   | [`CompileCssOptions`](#compileCssoptions)     | Options for CSS compilation.                                                                              |\n| `options.transformCssOptions` | [`TransformCssOptions`](#transformCssoptions) | Options for CSS transformation.                                                                           |\n\n**Returns**: `Promise\u003cstring\u003e` - The compiled and transformed CSS.\n\nBy default,\n[Tailwind CSS Preflight styles](https://tailwindcss.com/docs/preflight) are\nincluded, and the output CSS is minified. You can customize these behaviors via\noptions. In case you need more granular control, you can use the utility\nfunctions below. Calling them separately in the order below\n(`extractClassNameCandidates()` → `compileCss()` → `transformCss()`) is\nequivalent to calling `buildCss()`.\n\n### Tailwind CSS 4 configuration\n\nTailwind CSS 4 uses a CSS-based configuration format. Normally in this CSS file\nyou would add `@import \"tailwindcss\"`, which imports the following:\n\n- the [`base`/`preflight` layer](https://tailwindcss.com/docs/preflight),\n- the\n  [default Tailwind CSS 4 theme](https://tailwindcss.com/docs/theme#default-theme-variable-reference);\n- the `components` layer —yet to be implemented in Tailwind CSS 4—, and\n- the `utilities` layer where the actual Tailwind CSS classes are defined.\n\nWhen working with this library, all of the above is taken care of, so all you\nneed to do is add your theme customizations with a `@theme` directive. E.g.:\n\n```css\n@theme {\n  /* Colors */\n  --color-primary: #3b82f6;\n  --color-secondary: #64748b;\n\n  /* Typography */\n  --font-size-base: 1rem;\n  --font-size-lg: 1.125rem;\n  --font-size-xl: 1.25rem;\n\n  /* Spacing */\n  --spacing-4: 1rem;\n  --spacing-8: 2rem;\n}\n```\n\n### Utility functions\n\n#### `extractClassNameCandidates()`\n\nExtracts Tailwind class names from markup.\n\n| Parameter | Type     | Description             |\n| --------- | -------- | ----------------------- |\n| `markup`  | `string` | HTML markup to analyze. |\n\n**Returns**: `string[]` - Array of extracted class names.\n\n#### `compileCss()`\n\nCompiles CSS using Tailwind CSS 4.\n\n| Parameter             | Type                                      | Description                      |\n| --------------------- | ----------------------------------------- | -------------------------------- |\n| `classNameCandidates` | `string[]`                                | Array of class names to process. |\n| `configurationCss`    | `string`                                  | Tailwind v4 configuration CSS.   |\n| `options`             | [`CompileCssOptions`](#compileCssoptions) | Compilation options.             |\n\n**Returns**: `Promise\u003cstring\u003e` - Compiled CSS\n\n#### `transformCss()`\n\nTransforms CSS for browser compatibility.\n\n| Parameter | Type                                          | Description             |\n| --------- | --------------------------------------------- | ----------------------- |\n| `css`     | `string`                                      | CSS to transform.       |\n| `options` | [`TransformCssOptions`](#transformCssoptions) | Transformation options. |\n\n**Returns**: `Promise\u003cstring\u003e` - Transformed CSS\n\n### Configuration options\n\n#### `CompileCssOptions`\n\n| Option         | Type      | Default | Description                                                                               |\n| -------------- | --------- | ------- | ----------------------------------------------------------------------------------------- |\n| `addPreflight` | `boolean` | `true`  | Whether to include [Tailwind's Preflight styles](https://tailwindcss.com/docs/preflight). |\n\n#### `TransformCssOptions`\n\n| Option   | Type      | Default | Description                       |\n| -------- | --------- | ------- | --------------------------------- |\n| `minify` | `boolean` | `true`  | Whether to minify the output CSS. |\n\n## Credits\n\n- The technical foundation for running Tailwind CSS 4 in the browser was\n  demonstrated by [@dtinth](https://github.com/dtinth) in a\n  [blog post](https://notes.dt.in.th/TailwindCSS4Alpha14Notes), which served as\n  the basis for this implementation.\n- This package was created with sponsorship from\n  [Acquia](https://www.acquia.com/) through work on Drupal's\n  [Experience Builder](https://www.drupal.org/project/experience_builder).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalintbrews%2Ftailwindcss-in-browser","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbalintbrews%2Ftailwindcss-in-browser","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbalintbrews%2Ftailwindcss-in-browser/lists"}