{"id":15647268,"url":"https://github.com/kt3k/twd","last_synced_at":"2025-04-30T12:41:25.547Z","repository":{"id":48041726,"uuid":"372436774","full_name":"kt3k/twd","owner":"kt3k","description":"🚩 Simple tailwind like CLI tool for deno 🦕","archived":false,"fork":false,"pushed_at":"2021-08-11T05:31:53.000Z","size":150,"stargazers_count":45,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-21T01:46:38.975Z","etag":null,"topics":["deno","tailwind","twind"],"latest_commit_sha":null,"homepage":"https://deno.land/x/twd","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/kt3k.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}},"created_at":"2021-05-31T08:32:16.000Z","updated_at":"2023-10-17T12:30:49.000Z","dependencies_parsed_at":"2022-08-12T17:20:38.864Z","dependency_job_id":null,"html_url":"https://github.com/kt3k/twd","commit_stats":null,"previous_names":[],"tags_count":21,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kt3k%2Ftwd","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kt3k%2Ftwd/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kt3k%2Ftwd/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kt3k%2Ftwd/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kt3k","download_url":"https://codeload.github.com/kt3k/twd/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251701963,"owners_count":21629925,"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":["deno","tailwind","twind"],"created_at":"2024-10-03T12:18:04.715Z","updated_at":"2025-04-30T12:41:25.528Z","avatar_url":"https://github.com/kt3k.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# twd v0.4.8\n\n[![ci](https://github.com/kt3k/twd/actions/workflows/ci.yml/badge.svg)](https://github.com/kt3k/twd/actions/workflows/ci.yml)\n\nSimple tailwind like CLI tool for deno 🦕\n\nThis tool uses [twind](https://github.com/tw-in-js/twind) internally.\n\n# Install\n\n```\ndeno install --allow-read=. --allow-write=. --allow-net=deno.land,esm.sh,cdn.esm.sh -fq https://deno.land/x/twd@v0.4.8/cli.ts\n```\n\n# Usage\n\nCall `twd` command with input html files.\n\n```sh\ntwd input.html\n```\n\nThis outputs the tailwind compatible stylesheet which is needed by the input\nfile.\n\nYou can specify more than 1 input file.\n\n```sh\ntwd input-foo.html input-bar.html\n```\n\nThis outputs the stylesheet for both input-foo.html and input-bar.html.\n\nOr you can input the files under the directory by specifying the directory.\n\n```sh\ntwd dir/\n```\n\n## Watch files\n\nYou can watch files with `-w, --watch` option.\n\n```sh\ntwd -w input-a.html input-b.html -o styles.css\n```\n\nWhen you use `-w` option, you also need to specify `-o, --output` option, which\nspecifies the output file for generated styles.\n\n# Config\n\nYou can configure the output styles through config file 'twd.ts'.\n\nYou can create the boilerplate code with `-i` (--init) option.\n\n```shellsession\n$ twd -i\nCreating config file 'twd.ts'\nDone!\n```\n\nThis creates the config file 'twd.ts' like the below:\n\n```ts\nimport { Config } from \"https://deno.land/x/twd@v0.4.8/types.ts\";\n\nexport const config: Config = {\n  preflight: true,\n  theme: {},\n  plugins: {},\n};\n```\n\n## Theme\n\nTheming works almost the same way as\n[theming in tailwind](https://tailwindcss.com/docs/theme), or\n[theming in twind](https://twind.dev/handbook/configuration.html#theme).\n\nThe example of overriding values in the theme:\n\n```ts\nimport { Config } from \"https://deno.land/x/twd@v0.4.8/types.ts\";\n\nexport const config: Config = {\n  preflight: true,\n  theme: {\n    fontFamily: {\n      sans: [\"Helvetica\", \"sans-serif\"],\n      serif: [\"Times\", \"serif\"],\n    },\n    extend: {\n      spacing: {\n        128: \"32rem\",\n        144: \"36rem\",\n      },\n    },\n  },\n};\n```\n\n## Colors\n\nThe Tailwind v2 compatible color palette is available from\n`https://deno.land/x/twd@v0.4.8/colors.ts`.\n\n```ts\nimport { Config } from \"https://deno.land/x/twd@v0.4.8/types.ts\";\nimport * as colors from \"https://deno.land/x/twd@v0.4.8/colors.ts\";\n\nexport const config: Config = {\n  theme: {\n    colors: {\n      // Build your palette here\n      gray: colors.trueGray,\n      red: colors.red,\n      blue: colors.lightBlue,\n      yellow: colors.amber,\n    },\n  },\n};\n```\n\nTo extend the existing color palette use theme.extend:\n\n```ts\nimport { Config } from \"https://deno.land/x/twd@v0.4.8/types.ts\";\nimport * as colors from \"https://deno.land/x/twd@v0.4.8/colors.ts\";\n\nexport const config: Config = {\n  theme: {\n    extend: {\n      colors: {\n        gray: colors.trueGray,\n      },\n    },\n  },\n};\n```\n\n## Preflight\n\n`twd` automatically provides reset stylesheet,\n[modern-normalize](https://github.com/sindresorhus/modern-normalize), in the\nsame way as [tailwind](https://tailwindcss.com/docs/preflight) or\n[twind](https://twind.dev/handbook/configuration.html#preflight). By default\n`twd` inserts these styles at the beginning of the other styles.\n\nThis behavior can be disabled by `preflight` option in 'twd.ts' config file.\n\n```ts\nimport { Config } from \"https://deno.land/x/twd@v0.4.8/types.ts\";\n\nexport const config: Config = {\n  preflight: false,\n};\n```\n\n## Plugins\n\nYou can provide [plugins][twind-plugins] in config file. Plugins are not\ntailwind compatible, but it follows the rules of [twind plugins][twind-plugins].\n\nIn twd.ts:\n\n```ts\nexport config: Config = {\n  plugins: {\n    'scroll-snap': (parts) =\u003e ({ 'scroll-snap-type': parts[0] }),\n  },\n};\n```\n\nThis generates the style `.scroll-snap-x { scroll-snap-type: x; }` in the\noutput. See more details in [twind plugin docs][twind-plugins] about what kind\nof plugins are possible.\n\n# TODOs\n\n- Expose APIs like `generate(files, opts)`, `watch(files, opts)` to enable\n  easily integrate this tool into another tool.\n\n# License\n\nMIT\n\n[twind-plugins]: https://twind.dev/handbook/plugins.html\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkt3k%2Ftwd","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkt3k%2Ftwd","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkt3k%2Ftwd/lists"}