{"id":19957470,"url":"https://github.com/danpacho/tailwindest","last_synced_at":"2025-04-05T05:05:06.704Z","repository":{"id":65141701,"uuid":"539515325","full_name":"danpacho/tailwindest","owner":"danpacho","description":"Create tailwind types \u0026 Build type-safe tailwind products.","archived":false,"fork":false,"pushed_at":"2025-03-22T07:42:56.000Z","size":33752,"stargazers_count":142,"open_issues_count":3,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-29T04:06:00.024Z","etag":null,"topics":["create-tailwind-type","tailwind","typescript"],"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/danpacho.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":"SECURITY.md","support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-21T13:55:07.000Z","updated_at":"2025-03-22T07:43:11.000Z","dependencies_parsed_at":"2023-02-16T04:45:37.394Z","dependency_job_id":"b4dc4256-72d0-4a36-a268-6edaba1dc608","html_url":"https://github.com/danpacho/tailwindest","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpacho%2Ftailwindest","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpacho%2Ftailwindest/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpacho%2Ftailwindest/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danpacho%2Ftailwindest/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danpacho","download_url":"https://codeload.github.com/danpacho/tailwindest/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289426,"owners_count":20914464,"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":["create-tailwind-type","tailwind","typescript"],"created_at":"2024-11-13T01:38:00.233Z","updated_at":"2025-04-05T05:05:06.664Z","avatar_url":"https://github.com/danpacho.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\n## Build type-safe tailwindcss product\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./images/tailwindest-banner.png\" width=\"550px\" alt=\"tailwindest banner\" /\u003e\n\u003c/div\u003e\n\n\u003cbr /\u003e\n\n### 1. Create tailwind types\n\n\u003e [!NOTE]\n\u003e\n\u003e `create-tailwind-type` will generate type definitions for your tailwind configuration.\n\n```bash\nnpx create-tailwind-type --base node_modules/tailwindcss --no-arbitrary-value --disable-variants\n```\n\nThis command will generate `tailwind.ts` file in the root directory.\n\n### 2. Install package\n\n```bash\nnpm i tailwindest@latest\n```\n\n### 3. Create tools\n\n```ts\nimport { createTools, type CreateTailwindest } from \"tailwindest\"\nimport type { Tailwind, TailwindNestGroups } from \"./tailwind\"\nimport { twMerge } from \"tailwind-merge\"\n\ntype Tailwindest = CreateTailwindest\u003c{\n    tailwind: Tailwind\n    tailwindNestGroups: TailwindNestGroups\n    groupPrefix: \"$\" // prefix for nest groups, [optional]\n    useArbitrary: true // use arbitrary values, [optional]\n}\u003e\n\nexport const tw = createTools\u003cTailwindest\u003e({\n    merger: twMerge, // set tailwind-merge as merger, [optional]\n})\n```\n\n### 4. Use tools\n\n#### Def - `tw.def(classList, ...styleList)`\n\n```tsx\nconst condition: boolean = true\n\nconst container = tw.def(\n    // 🚀 Powered by clsx\n    [\n        // ✅ Statically typed literals\n        \"flex\",\n        \"size-fit\",\n        \"flex-col\",\n        \"items-center\",\n        \"justify-center\",\n        \"gap-y-12\",\n\n        // ✅ Arbitrary strings\n        \"md:flex-row md:gap-x-7\",\n        \"lg:gap-x-24\",\n\n        // ✅ Conditional styling\n        condition ? \"p-3\" : \"p-1\",\n\n        // ✅ Array-based styling\n        [\"dark:text-white\", \"text-black\"],\n    ],\n\n    // 🚀 Default merging behavior\n    {\n        // ✅ Record-based styling\n        backgroundColor: \"bg-white\",\n        dark: {\n            backgroundColor: \"dark:bg-black\",\n        },\n    },\n    {\n        // ✅ Support for infinite record styling\n        // Additional styles here...\n    }\n)\n\nconst Box = ({ children }) =\u003e \u003cdiv className={container}\u003e{children}\u003c/div\u003e\n```\n\n#### Style - `tw.style(stylesheet)`\n\n```tsx\nconst box = tw.style({\n    display: \"flex\",\n    alignItems: \"items-center\",\n    justifyContent: \"justify-center\",\n    padding: [\"px-[2.25px]\", \"py-1\"],\n    $hover: {\n        opacity: \"hover:opacity-90\",\n    },\n    $sm: {\n        padding: [\"sm:px-[4.5px]\", \"sm:py-2\"],\n    },\n})\n\nconst Box = ({ children }) =\u003e {\n    return \u003cdiv className={box.class()}\u003e{children}\u003c/div\u003e\n}\n\nconst Box2 = ({ children }) =\u003e {\n    // pass arbitrary classnames\n    return \u003cdiv className={box.class(\"some-classnames\")}\u003e{children}\u003c/div\u003e\n}\n```\n\n#### Toggle - `tw.toggle({ truthy, falsy, base })`\n\nIf you want to change the style based on a **single `boolean` condition**, use `toggle`.\n\n```tsx\nconst themeBtn = tw.toggle({\n    truthy: {}, // › light mode\n    falsy: {}, // › dark mode\n    base: {}, // [optional] base style\n})\n\nconst ThemeBtn = ({ children }) =\u003e {\n    const [isLight, setIsLight] = useState(false)\n\n    return \u003cbutton className={themeBtn.class(isLight)}\u003e{children}\u003c/button\u003e\n}\n```\n\n#### Rotary - `tw.rotary({ variants, base })`\n\nIf you need to change styles based on **three or more conditions within a single category**, use `rotary`.\n\n```tsx\nimport { type GetVariants } from \"tailwindest\"\n\nconst btn = tw.rotary({\n    variants: {\n        success: {}, // › success\n        warning: {}, // › warning\n        error: {}, // › error\n    },\n\n    base: {}, // [optional] base style\n})\n\ninterface BtnProps {\n    onClick: () =\u003e void\n    children: ReactNode\n    type?: GetVariants\u003ctypeof btn\u003e\n}\n\nconst Btn = ({ onClick, children, type = \"default\" }: BtnProps) =\u003e (\n    \u003cbutton className={btn.class(type)} onClick={onClick}\u003e\n        {children}\n    \u003c/button\u003e\n)\n```\n\n#### Variants - `tw.variants({ variants, base })`\n\n```tsx\nconst btn = tw.variants({\n    variants: {\n        type: {\n            default: {}, // › type.default\n            success: {}, // › type.success\n            warning: {}, // › type.warning\n        },\n        size: {\n            sm: {}, // › size.sm\n            md: {}, // › size.md\n            lg: {}, // › size.lg\n        },\n        border: {\n            sm: {}, // › border.sm\n            md: {}, // › border.md\n            lg: {}, // › border.lg\n        },\n    },\n    base: {}, // [optional] base style\n})\n\ninterface BtnProps extends GetVariants\u003ctypeof btn\u003e {\n    onClick: () =\u003e void\n    children: ReactNode\n}\n\nconst Btn = ({\n    children,\n    size = \"md\",\n    border = \"md\",\n    type = \"default\",\n    onClick,\n}: BtnProps) =\u003e (\n    \u003cbutton className={btn.class({ size, type, border })} onClick={onClick}\u003e\n        {children}\n    \u003c/button\u003e\n)\n```\n\n---\n\n## Create Tailwind Type\n\nGenerate typescript definitions for your tailwind configuration.\n\n\u003cdiv align=\"center\"\u003e\n\u003cimg src=\"./images/create-tailwind-type-banner.png\" width=\"550px\" alt=\"tailwindest banner\" /\u003e\n\u003c/div\u003e\n\n```bash\nnpx create-tailwind-type\n```\n\n\u003e [!IMPORTANT]  \n\u003e **Requires Tailwind CSS `v4.0.0` or higher.**\n\n### Usage Examples\n\n- **Use custom plugins**\n\n**Should change base directory to `node_modules/tailwindcss`** for your own project.\n\n```bash\nnpx create-tailwind-type -b node_modules/tailwindcss\n```\n\n- **Generate exact variants**\n\n**Will generate exact variants instead of soft variants.** But slowdown typescript language server, if you use it directly. (Importing subtype will be fine.)\n\n```bash\nnpx create-tailwind-type -S\n```\n\n- **Change output filename**\n\n**Will generate types in `src/types/tailwind.d.ts` file.**\n\n```bash\nnpx create-tailwind-type -f src/types/tailwind.d.ts\n```\n\n### CLI Options\n\n\u003e [!NOTE]\n\u003e\n\u003e Check out for more details about the CLI options in [this documentation](./packages/create-tailwind-type/README.md).\n\n| Option (Short) | Option (Long)                 | Description                                                                                                                                                | Default Value          |\n| -------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------- |\n| `-b`           | `--base \u003cpath\u003e`               | Specifies the base directory for @tailwindcss/node package. If omitted, the tool automatically resolves to the installed `@tailwindcss` package directory. | _None_ (auto-resolved) |\n| `-f`           | `--filename \u003cfilename\u003e`       | Sets the output filename for the generated types.                                                                                                          | `tailwind.ts`          |\n| `-d`           | `--docs`                      | Enables documentation comments in the generated types. Use the inverse flag to disable them.                                                               | `true`                 |\n| `-D`           | `--no-docs`                   | Disables documentation comments in the generated types.                                                                                                    | N/A                    |\n| `-a`           | `--arbitrary-value`           | Allows the generation of arbitrary values in the output types. Use the inverse flag to disable this feature.                                               | `true`                 |\n| `-A`           | `--no-arbitrary-value`        | Disables arbitrary value generation.                                                                                                                       | N/A                    |\n| `-s`           | `--soft-variants`             | Enables soft variant generation. When disabled (using the inverse flag), the tool will generate exact variants instead.                                    | `true`                 |\n| `-S`           | `--no-soft-variants`          | Disables soft variant generation (resulting in exact variant generation).                                                                                  | N/A                    |\n| `-k`           | `--string-kind-variants-only` | Limits the generated types to only string kind variants.                                                                                                   | `false`                |\n| `-o`           | `--optional-property`         | Generates optional properties in the output types, which can be useful for partial configurations.                                                         | `false`                |\n| `-N`           | `--disable-variants`          | Disable variant generation and types, can be increase performance.                                                                                         | `false`                |\n| N/A            | `--version`                   | Displays the current CLI version.                                                                                                                          | N/A                    |\n| N/A            | `--help`                      | Displays help and usage information for the CLI tool.                                                                                                      | N/A                    |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanpacho%2Ftailwindest","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanpacho%2Ftailwindest","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanpacho%2Ftailwindest/lists"}