{"id":20054391,"url":"https://github.com/divriots/starter-tailwindcss","last_synced_at":"2026-05-31T21:32:20.241Z","repository":{"id":45856916,"uuid":"347088164","full_name":"divriots/starter-tailwindcss","owner":"divriots","description":null,"archived":false,"fork":false,"pushed_at":"2022-07-13T10:05:38.000Z","size":168,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":5,"default_branch":"master","last_synced_at":"2026-02-19T11:38:28.587Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/divriots.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-03-12T14:10:58.000Z","updated_at":"2022-06-12T02:22:02.000Z","dependencies_parsed_at":"2022-09-15T18:51:26.415Z","dependency_job_id":null,"html_url":"https://github.com/divriots/starter-tailwindcss","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/divriots/starter-tailwindcss","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-tailwindcss","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-tailwindcss/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-tailwindcss/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-tailwindcss/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/divriots","download_url":"https://codeload.github.com/divriots/starter-tailwindcss/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/divriots%2Fstarter-tailwindcss/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33750474,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-31T02:00:06.040Z","response_time":95,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":[],"created_at":"2024-11-13T12:40:17.329Z","updated_at":"2026-05-31T21:32:20.226Z","avatar_url":"https://github.com/divriots.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![backlight.dev](https://img.shields.io/badge/Open%20in-Backlight.dev%20editor-%23f8c307)](https://backlight.dev/review/U3bRwsh0qncQBY27uPGi)\n[![Github Repo](https://img.shields.io/github/last-commit/divriots/starter-tailwindcss)](https://github.com/divriots/starter-tailwindcss)\n\n# Tailwind CSS Tech Sample \u003cbr/\u003e\u003csmall\u003e_by_ ‹div›RIOTS\u003c/small\u003e\n\nThis is a _Technology Sample_ you can rely on to build your own Design System, based on React and [Tailwind CSS](https://tailwindcss.com/).\n\n**Disclaimer**: _Technology Samples_ aren't comprehensive _Design Systems_ but showcases a given technology so you free to build you own solution upon it.\n\n## Architecture\n\nThis _tech sample_ declares its **Design Tokens** using the [Tailwind CSS Theme Config](https://tailwindcss.com/docs/configuration) syntax. Each component in your Design System can exploit those theme specific tokens using the atomic classes exposed by Tailwind CSS.\n\nTo build its components, this _tech sample_ uses [Headless UI](https://headlessui.dev/) and [React/JSX](https://reactjs.org/docs/introducing-jsx.html) with [TypeScript](https://www.typescriptlang.org/). Components are then styled using Tailwind CSS atomic classes, according to Headless UI examples.\n\n_Note_: The use of Headless UI is **not** mandatory and you can use any kind of framework allowing you to customize the rendering process with CSS classes. Headless UI is built by [Tailwind Labs](https://github.com/tailwindlabs) whom also provide _Tailwind CSS_.\n\n### Tokens\n\nThe Tokens are split in different components:\n\n- `typography`: fonts families\n- `colors`: colors, variants, and helpers\n- `borders`: borders and radius\n- `opacity`: transparency values\n- `shadows`: shadows effects\n- `spacing`: relative and absolute spaces\n- `z-index`: z-axe indexes\n\n### Tailwind CSS Theme\n\nAll tokens are declared in the [Tailwind CSS Theme Config](https://tailwindcss.com/docs/configuration) syntax by exporting them in dedicated objects, e.g.:\n\n```ts\nexport const typography = {\n  fontFamily: {\n    code: ['Consolas', 'SFMono-Regular', 'Monaco', 'monospace'],\n  },\n  fontWeight: {\n    custom: '600',\n  },\n};\n```\n\nThen all tokens definitions are merged in the `~/theme/` component to build the global Tailwind CSS `theme` definition. This `theme.extend` is used in the `tailwind.config.js` file directly to setup all the classes and variants.\n\n## Components\n\nComponents can exploit the Tailwind CSS atomic classes directly:\n\n```jsx\n\u003cbutton\n  className={`\n    ${active ? 'bg-purple-500 text-white' : 'text-grey-900'}\n    flex items-center w-full px-2 py-2\n    group rounded-md\n    text-sm\n  `}\n\u003e\n  Click Me!\n\u003c/button\u003e\n}\n```\n\n## Stories\n\nStories are written in Storybook's [Component Story Format](https://backlight.dev/docs/component-story-format). Components' stories are located in their `stories/` folder.\n\n## Documentation\n\nDocumentation pages are decorated by a React layout using the [@divriots/dockit-react](https://github.com/divriots/dockit-react) helpers. See the `mdx-layout` component.\n\n### Pages\n\nEach component embed its own documentation in its `doc/` folder. You can use any web format for your documentation but we recommend you to write it with the [mdx](https://backlight.dev/docs/mdx) format, allowing you to embed your components live in the documentation.\n\n---\n\n## Links\n\n- [Tailwind CSS on Github](https://github.com/tailwindlabs/tailwindcss)\n- [Headless UI on Github](https://github.com/tailwindlabs/headlessui)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-tailwindcss","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdivriots%2Fstarter-tailwindcss","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdivriots%2Fstarter-tailwindcss/lists"}