{"id":21653531,"url":"https://github.com/danvc/tailtidy","last_synced_at":"2026-05-15T21:38:47.597Z","repository":{"id":104093873,"uuid":"609129164","full_name":"danvc/tailtidy","owner":"danvc","description":"An organized way to use TailwindCSS classes","archived":false,"fork":false,"pushed_at":"2023-03-06T14:17:30.000Z","size":20,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-09T17:02:05.649Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/danvc.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":"2023-03-03T12:44:12.000Z","updated_at":"2023-03-06T14:09:10.000Z","dependencies_parsed_at":"2023-05-29T16:00:12.707Z","dependency_job_id":null,"html_url":"https://github.com/danvc/tailtidy","commit_stats":{"total_commits":21,"total_committers":1,"mean_commits":21.0,"dds":0.0,"last_synced_commit":"ca02295db9b98df1ff3a96f1239a193284b9ac93"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/danvc/tailtidy","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danvc%2Ftailtidy","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danvc%2Ftailtidy/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danvc%2Ftailtidy/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danvc%2Ftailtidy/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/danvc","download_url":"https://codeload.github.com/danvc/tailtidy/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/danvc%2Ftailtidy/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33080779,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-15T20:25:35.270Z","status":"ssl_error","status_checked_at":"2026-05-15T20:25:34.732Z","response_time":103,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5: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":[],"created_at":"2024-11-25T08:18:55.526Z","updated_at":"2026-05-15T21:38:47.538Z","avatar_url":"https://github.com/danvc.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tailtidy\n`TailTidy` is a library that has as intention to help you organize your Tailwind classes in the way you think this should be organized.\n\n## Installing using yarn\n```\nyarn add --dev tailtidy\n```\n\n## Installing using npm\n```\nnpm add --save-dev tailtidy\n```\n\n## What problem this solve?\nThis helps you to organize your classes by a logical and structured way. When the component start to receive a lot of conditions where the shape should be changed according a specific breakpoint, like, *\"change the text color to black when the breakpoint is `xm` but when it has achieved `md`, change the text color to pink\"*. \n\n## The idea is simple:\n- It's like styled css, but, using classes.\n\nThe idea behind `tidyUp` is that it will help you to organize and visualize better how the classes should be organized\naccording each aspect.\n\nThere's no right way to shape the structure, so, you're able to define the structured in the way that you want, in the way that\nyou'll feel comfortable to maintain.\n\nAn organized way to use TailwindCSS classes:\n````\n  const classes = tidyUp({\n    // component Title\n    title: {\n      // well, whant the breakpoint is small, I want to show a red background with the font-size small\n      sm: {\n        text: \"text-sm\",\n        bg: \"bg-red\",\n      },\n      // but when the breakpoint reach the md size, I want to display the background with the color orange... the font-size will be normal\n      md: {\n        text: \"md:text-base\",\n        bg: \"md:bg-orange\",\n      },\n      // but when the breakpoint reach lg, ah man, then, we need to rock this world and change the background color to blue and the font large\n      lg: {\n        text: \"lg:text-lg\",\n        bg: \"lg:bg-blue\",\n      },\n    },\n    // component Pragraph\n    paragraph: {},\n  });\n\n````\nOf course this example is stupid, however, the library is not stupid, mainly when you're dealing with elements that has dozens of classes. Urgh!\n\nUse\n\n````\n\u003cdiv className={classes.title.getClasses()}\u003eTest\u003c/div\u003e\n````\n\nThe result\n````\n\u003cdiv class=\"text-sm bg-red md:text-base md:bg-orange lg:text-lg lg:bg-blue\"\u003eTest\u003c/div\u003e\n````\n\nYou can call the method `getClasses` on all properties that are objects. Given the example above, you could be calling:\n\n````\nclasses.title.getClasses();\n````\nwhich would return:\n````\ntext-sm bg-red md:text-base md:bg-orange lg:text-lg lg:bg-blue\n````\n\n````\nclasses.title.sm.getClasses();\n````\nwhich would return:\n````\ntext-sm bg-red\n````\nand so on.\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanvc%2Ftailtidy","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdanvc%2Ftailtidy","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdanvc%2Ftailtidy/lists"}