{"id":24081755,"url":"https://github.com/jonathanconway/tailwindjs","last_synced_at":"2026-02-07T10:30:56.593Z","repository":{"id":240005181,"uuid":"794407164","full_name":"jonathanconway/tailwindjs","owner":"jonathanconway","description":"Tailwind as Typescript/Javascript functions for code completion and type safety.","archived":false,"fork":false,"pushed_at":"2024-09-13T13:58:16.000Z","size":3520,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-26T19:52:24.954Z","etag":null,"topics":["javascript","tailwind","tailwindcss","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jonathanconway.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":"2024-05-01T04:49:28.000Z","updated_at":"2024-09-13T13:58:21.000Z","dependencies_parsed_at":"2024-05-16T08:47:03.075Z","dependency_job_id":"39f16275-c759-4cd4-a66b-892096f47b58","html_url":"https://github.com/jonathanconway/tailwindjs","commit_stats":null,"previous_names":["jonathanconway/tailwindjs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/jonathanconway/tailwindjs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Ftailwindjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Ftailwindjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Ftailwindjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Ftailwindjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jonathanconway","download_url":"https://codeload.github.com/jonathanconway/tailwindjs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jonathanconway%2Ftailwindjs/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29192602,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-07T07:37:03.739Z","status":"ssl_error","status_checked_at":"2026-02-07T07:37:03.029Z","response_time":63,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":["javascript","tailwind","tailwindcss","typescript"],"created_at":"2025-01-09T23:26:09.908Z","updated_at":"2026-02-07T10:30:56.578Z","avatar_url":"https://github.com/jonathanconway.png","language":"TypeScript","readme":"# tailwindjs\n\n\u003e Tailwind as Typescript/Javascript functions for code completion and type safety.\n\n\u003cimg src=\"docs/demo.mp4.gif\" alt=\"Screen recording of developer using TailwindJS\" /\u003e\n\n\u003cimg src=\"docs/screenshot.png\" alt=\"Screenshot of developer using TailwindJS\" /\u003e\n\n## Table of contents\n\n- [Introduction](#introduction)\n- [Getting started](#getting-started)\n- [Usage](#usage)\n- [API reference](#api-reference)\n- [Contributing](#contributing)\n\n## Introduction\n\nTailwindJS is a Javascript/Typescript library that exposes [TailwindCSS](https://tailwindcss.com) classes as Javascript objects.\n\n### What TailwindJS provides\n\nTailwindJS exposes:\n\n- **All TailwindCSS utilities** as simple constants, e.g. `h_10` =\u003e `h-10`\n- **All TailwindCSS modifiers** as functions, e.g. `dark(bg_stone_900)` =\u003e `dark:bg-stone-900`\n\nAdditionally TailwindJS provides:\n\n- **Arbitraries** - e.g. `h_arb(\"30rem\")`\n- **Helpers** - e.g. negative values (`neg`), class name joiner (`classNames`).\n\n### Benefits of using TailwindJS\n\n- Runtime checking of Javascript objects to quickly identify typos and errors\n- Build-time checking of Typescript (and Javascript if you use a build tool)\n- Auto-suggestion and auto-completion features in your IDE (e.g. Intellisense in VS Code)\n- Composability with modifiers/helpers without direct string manipulation\n\n## Getting started\n\n### Installation\n\nNPM:\n\n```bash\nnpm install @jonathanconway/tailwindjs\n```\n\nYarn:\n\n```bash\nyarn add @jonathanconway/tailwindjs\n```\n\n### Class detection\n\nIf you use TailwindJS with a build system such as Webpack, [NextJS](http://nextjs.org) or [React](http://reactjs.org), you'll need to set up [class detection](https://tailwindcss.com/docs/content-configuration#class-detection-in-depth). This is so Tailwind knows the list of classes your app code uses and can include them in the build.\n\nTailwindJS provides a special utility function to help with this: `scanTailwindJSClasses`. If you call this function from your `tailwind.config.js` file, providing a code path and an optional output path and filename, TailwindJS will scan your code, generate the list, and save it to an output file. You then simply need to add this file to the `content` array in your TailwindCSS config object.\n\nHere's the full set of steps:\n\n1. Ensure TailwindJS and TailwindCSS are installed in your project as dependencies.\n2. Open `tailwind.config.js` in your editor/IDE.\n3. Add the following import to the top: `import { scanTailwindJSClasses } from \"@jonathanconway/tailwindjs\";`\n4. Add the following call after the imports but before the config object: ` scanTailwindJSClasses(``${__dirname}/src``); `\n5. Add the following line to the `content` array in the config object: `\"./src/tailwind-js-classes.json\"`\n\nAt the end your `tailwind.config.js` file should look something like this:\n\n```javascript\nimport { scanTailwindJSClasses } from \"@jonathanconway/tailwindjs/build\";\nimport type { Config } from \"tailwindcss\";\n\nscanTailwindJSClasses(`${__dirname}/src`);\n\nmodule.exports = {\n  darkMode: \"selector\",\n  content: [\"./src/**/*.{js,ts,jsx,tsx,mdx}\", \"./src/tailwind-js-classes.json\"],\n};\n```\n\n## Usage\n\n### Utilities\n\nYou can use TailwindJS utilities by referencing them directly.\n\nFor example, in a React TSX or JSX file, you can have code like this:\n\n```tsx\nimport { cn, rounded, bg_stone_500, text_sm } from \"@jonathanconway/tailwindjs\";\n\nexport function Button({ children }) {\n  return (\n    \u003cbutton className={cn(rounded, bg_stone_500, text_sm)}\u003e{children}\u003c/button\u003e\n  );\n}\n```\n\nThis will produce markup like the following:\n\n```html\n\u003cbutton class=\"rounded bg-stone-500 text-sm\"\u003eOk\u003c/button\u003e\n```\n\n### Modifiers\n\nYou can use Tailwind modifiers by calling them as functions.\n\nFor example, in a React TSX or JSX file, you can have code like this:\n\n```tsx\nimport {\n  cn,\n  dark,\n  text_stone_950,\n  text_stone_50,\n} from \"@jonathanconway/tailwindjs\";\n\nexport function Text({ children }) {\n  return (\n    \u003cspan className={cn(text_stone_950, dark(text_stone_50))}\u003e{children}\u003c/span\u003e\n  );\n}\n```\n\nThis will produce markup like the following:\n\n```html\n\u003cspan class=\"text-stone-950 dark:text-stone-50\"\u003eOk\u003c/button\u003e\n```\n\nNote: TailwindJS does not yet support any non-TailwindJS arguments, apart from string literals, being passed to modifiers. So we recommend only passing TailwindJS utilities or modifiers, or string literals, as arguments to TailwindJS modifiers. Part of the reason for this is that TailwindJS [class detection](#class-detection) can only recognise TailwindJS utilities and functions.\n\n### Arbitraries\n\nYou can use Tailwind arbitrary values by calling them as functions, similar to modifiers.\n\nFor example, in a React TSX or JSX file, you can have code like this:\n\n```tsx\nimport { cn, size_arb } from \"@jonathanconway/tailwindjs\";\n\nexport function Footnote({ children }) {\n  return \u003cspan className={cn(size_arb(\"0.95rem\"))}\u003e{children}\u003c/span\u003e;\n}\n```\n\nThis will produce markup like the following:\n\n```html\n\u003cspan class='size-[\"0.95rem\"]'\u003eOk\u003c/button\u003e\n```\n\n## API reference\n\u003c!-- insert api start --\u003e\n\n\n### Utilities\n\n- [Accessibility](./docs/utilities/accessibility.md)\n- [Backgrounds](./docs/utilities/backgrounds.md)\n- [Borders](./docs/utilities/borders.md)\n- [Effects](./docs/utilities/effects.md)\n- [Filters](./docs/utilities/filters.md)\n- [Flexbox and grid](./docs/utilities/flexbox_and_grid.md)\n- [Interactivity](./docs/utilities/interactivity.md)\n- [Layout](./docs/utilities/layout.md)\n- [Sizing](./docs/utilities/sizing.md)\n- [Spacing](./docs/utilities/spacing.md)\n- [Svg](./docs/utilities/svg.md)\n- [Tables](./docs/utilities/tables.md)\n- [Transforms](./docs/utilities/transforms.md)\n- [Transitions and animation](./docs/utilities/transitions_and_animation.md)\n- [Typography](./docs/utilities/typography.md)\n\n\n\n### Modifiers\n\n- [Attribute selectors](./docs/modifiers/attribute_selectors.md)\n- [Media feature queries](./docs/modifiers/media_feature_queries.md)\n- [Pseudo classes](./docs/modifiers/pseudo_classes.md)\n- [Pseudo elements](./docs/modifiers/pseudo_elements.md)\n\n\n\u003c!-- insert api end --\u003e\n### Helpers\n\n- [Negative](./docs/helpers/negative.md)\n- [Class names](./docs/helpers/class-names.md)\n\n## Contributing\n\n### Installation\n\nTo get set up developing this library simple install the dependencies via NPM, run the following:\n\n```bash\nnpm install\n```\n\nTo build the project as an importable library, run the following:\n\n```bash\nnpm run build\n```\n\nTo re-generate utilities and modifiers, which are scanned from the TailwindCSS website, run the following:\n\n```bash\nnpm run build-tailwindcss-pages\nnpm run build-lib\nnpm run build\n```\n\nIf you make any changes, to re-build the generated part of the docs, run the following:\n\n```bash\nnpm run build-docs\nnpm run build\n```\n\n### Versioning\n\nCurrently TailwindJS is in Beta. Versions are formatted as 0.0._n_ where _n_ is incremented on each publish.\n\nAt some point I plan to move the versions to align with TailwindCSS versions for major and minor (e.g. 3.4) and increment the patch for fixes / minor tweaks (e.g. 1, 2, 3...).\n\n### Contributors ✨\n\nJonathan Conway ([conwy.co](http://conwy.co))\n\nContributions of any kind are welcome!","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathanconway%2Ftailwindjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonathanconway%2Ftailwindjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonathanconway%2Ftailwindjs/lists"}