{"id":22833174,"url":"https://github.com/brunobertolini/tailed","last_synced_at":"2025-04-23T22:04:25.825Z","repository":{"id":38173294,"uuid":"407101546","full_name":"brunobertolini/tailed","owner":"brunobertolini","description":"Tailed is a tiny lib to add styled-components syntax like, with suport to conditional classes.","archived":false,"fork":false,"pushed_at":"2023-07-20T22:15:54.000Z","size":2194,"stargazers_count":95,"open_issues_count":8,"forks_count":5,"subscribers_count":2,"default_branch":"develop","last_synced_at":"2025-04-23T22:04:15.607Z","etag":null,"topics":["css","css-in-js","hacktoberfest","react","styled-components","tailwindcss"],"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/brunobertolini.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":"brunobertolini"}},"created_at":"2021-09-16T09:22:51.000Z","updated_at":"2024-10-17T21:22:54.000Z","dependencies_parsed_at":"2023-02-07T00:34:08.700Z","dependency_job_id":null,"html_url":"https://github.com/brunobertolini/tailed","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunobertolini%2Ftailed","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunobertolini%2Ftailed/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunobertolini%2Ftailed/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/brunobertolini%2Ftailed/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/brunobertolini","download_url":"https://codeload.github.com/brunobertolini/tailed/tar.gz/refs/heads/develop","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250522302,"owners_count":21444511,"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":["css","css-in-js","hacktoberfest","react","styled-components","tailwindcss"],"created_at":"2024-12-12T21:12:25.999Z","updated_at":"2025-04-23T22:04:25.304Z","avatar_url":"https://github.com/brunobertolini.png","language":"TypeScript","funding_links":["https://github.com/sponsors/brunobertolini"],"categories":["TypeScript"],"sub_categories":[],"readme":"# Tailed\n\nTailed is a tiny lib to add styled-components syntax like, with suport to conditional classes.\n\n## Motivation\n\nIt's was initally be created to work with tailwindcss and avoid class mess inside react components without need a  build process, but it's can used with any framework (maybe I need split in two packages later).\n\n## Usage\n\nTailed works like styled-components, but, with class names instead of css props.\n\n```js\nimport { tailed } from 'tailed-js'\n\nconst Box = tailed('div')`\n  bg-red\n  p-2 lg:p-4\n  rounded-sm lg:rounded-lg\n\n  ${props =\u003e props?.size === 'small' \u0026\u0026 'text-sm'}\n`\n\n// it's allow especialization\nconst ErrorBox = tailed(Box)`\n  border-red\n`\n\n// and you can continue using className prop to add extra class names\nconst App = () =\u003e (\n  \u003cBox className=\"m-4\"\u003e\n    Magic!\n  \u003c/Box\u003e\n)\n\n```\n\n### Using \"as\" prop\n\nLike styled-components, you can add `as` prop to use a diferent base component:\n\n```js\nconst Button = tailed('button')``\n\n// In this case, the rendered element will be an \u003ca\u003e tag instead of \u003cbutton\u003e.\n\u003cButton as=\"a\" /\u003e\n\n// There, you get AnotherComponent rendered instead of \u003cbutton\u003e tag\n\u003cButton as={AnotherComponent}\u003e\n```\n\n## Using without React\n\nYou can use this lib with a more independent way, importing `tail` insteadof `tailed`.\n\n```js\nimport { tail } from `tailed-js`\n\nconst classNames = tail`\n  bg-red\n  p-2 lg:p-4\n  rounded-sm lg:rounded-lg\n\n  ${props =\u003e props?.size === 'small' \u0026\u0026 'text-sm'}\n`\n\nconst names = classNames({\n  size: 'small'\n})\n\n```\n\nIt's totally independent of lib/frameowork and is a dependency free.\n\n## A bit more powerfull\n\nUsing tailed with [styled-by](https://github.com/brunobertolini/styled-by), you can create a powerfull conditional styles handler.\n\n```js\nimport { tail } from 'tailed-js'\nimport styledBy from 'styled-by'\n\n// you can use tail or tailed here\nconst classNames = tail`\n  bg-red\n  p-2 lg:p-4\n  rounded-sm lg:rounded-lg\n\n  ${styledBy('size', {\n    sm: 'text-sm',\n    lg: 'text-lg'\n  })}\n`\n```\n\n## VS Code IntelliSense autocomplete\n\nYou can add these settings on your user config:\n\n```json\n\"editor.quickSuggestions\": {\n  \"strings\": true\n},\n\"tailwindCSS.experimental.classRegex\" : [\n  \"tailed`([^`]*)\",\n  \"tailed\\\\(.*?\\\\)`([^`]*)\",\n  \"tail`([^`]*)\"\n],\n// if you're using typescript\n\"tailwindCSS.includeLanguages\" : {\n  \"typescriptreact\" : \"javascript\",\n  \"typescript\" : \"javascript\"\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunobertolini%2Ftailed","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbrunobertolini%2Ftailed","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbrunobertolini%2Ftailed/lists"}