{"id":13761027,"url":"https://github.com/tachyons-css/tachyons-styled-react","last_synced_at":"2025-11-04T02:04:24.409Z","repository":{"id":39547804,"uuid":"184955903","full_name":"tachyons-css/tachyons-styled-react","owner":"tachyons-css","description":"Tachyons implemented with emotion and styled-system. Sits on create-react-app. ","archived":false,"fork":false,"pushed_at":"2023-01-03T21:01:41.000Z","size":4376,"stargazers_count":201,"open_issues_count":29,"forks_count":16,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-06T22:42:55.892Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://tachyons-styled-react.now.sh","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/tachyons-css.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}},"created_at":"2019-05-05T00:03:04.000Z","updated_at":"2025-01-07T08:04:26.000Z","dependencies_parsed_at":"2023-02-01T10:00:47.925Z","dependency_job_id":null,"html_url":"https://github.com/tachyons-css/tachyons-styled-react","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-styled-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-styled-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-styled-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tachyons-css%2Ftachyons-styled-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tachyons-css","download_url":"https://codeload.github.com/tachyons-css/tachyons-styled-react/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":251992705,"owners_count":21677019,"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":[],"created_at":"2024-08-03T13:01:33.423Z","updated_at":"2025-11-04T02:04:24.382Z","avatar_url":"https://github.com/tachyons-css.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Tachyons React App [WIP]\n\nThis extends create-react-app to include Tachyons implemented with emotion +\nstyled-system. If you're familiar with Tachyons and are interested in\ncss-in-js, this is hopefully a helpful project. Can be used for anything you'd\nuse create-react-app for. While Tachyons is light-weight by default, using css-in-js will\nresult in increased css performance as you don't send unused styles down the wire. \n\n## Getting going\n\nClone the directory and cd into the root of the directory\n```\ngit clone git@github.com:tachyons-css/tachyons-styled-react.git newProject \u0026\u0026 cd newProject\n```\n\nInstall dependencies\n```\nyarn \n```\n\nStart the dev environment\n```\nyarn start\n```\n\nThis should start a development environment on ```localhost:3000```\n\n\n## Elements \n```\nsrc/elements/\n```\nThis folder contains html elements wired up to styled system. Scales \nare defined and configurable in ```src/theme.js```\n\nNot every element has every styling prop included. For instance I don't find it useful\nto set fontSize on an img.\n\nElements can be composed together just like regular html elements to make more\ncomplex components. \n\n## Pages\n\nAdd new pages / routes in src/App.js\n\nYou can copy src/pages/Example.js to get a new blank page to work with. Say we wanted\nto create a view at localhost:3000/new-page and we wanted the page to be called NewPage.\n\nImport it into App.js \n```\n// import pages here \nimport Styles from './pages/Styles'\nimport Home from './pages/Home'\nimport NewPage from './pages/NewPage'\n```\n\nNext add the route you want to use for that page\n\n```\n  \u003cRouter\u003e\n    \u003cRoute exact path='/' component={Home} /\u003e\n    \u003cRoute path='/styles' component={Styles} /\u003e\n    \u003cRoute path='/new-page' component={NewPage} /\u003e\n  \u003c/Router\u003e\n```\n\n## Theme\n\nThe theme file is 100% configurable. While Tachyons comes with some useful defaults, \nyou can modify, extend, or reduce anything that's there to fit your needs. \n\n## Styled system\n\nStyled system is well documented and I suggest checking out the official site\nover at https://styled-system.com. In short - Styled system allows you to pass\narrays of values to style props like color, fontSize, display, and more that\nmap to a consistent set of breakpoints.  You can reference scales from a theme\nfile or pass in literal values. The output is a set of single purpose classes\nfor only the styles you need in your view.\n\nI love styled system. I've been using it heavily for the last two years and I\nthink it is a great way to implement Tachyons. While many people think of\nTachyons as a css file, I think of it as a project. A whole bunch of modular\nideas with a common set of principals. \n\nThe main Tachyons repo includes a bunch of terse naming schemes for a lot of\nthe classes, but that was never a core part of the project, which is why thanks\nto [@hongkonggong](https://github.com/hongkonggong) there has been a verbose\nversion with longer class names we've supported. While the main version was\nbuilt with postcss, we've long supported a sass build as well. The stack has\nnever been the point. Tachyons for me have been centered around pushing the\nenvelope in css performance for both rendering and download speed while testing\nthe relationships between values in design primitives.\n\nWhile trying to keep Tachyons small - it's important to limit\nthings like how large the color palette is. For every color there were\ncorresponding border,:hover,:focus classes. With styled-system and emotion this\nisn't an issue. You can keep a more verbose color palette, without automatically \ncreating a larger css foot-print. The only css that's generated is for the styles you are\nusing. While some people use something to strip out unused styles, I think this\nmodel makes more sense and is less error prone.\n\nWhile personally I don't have too much trouble parsing the same property being\nspread out in a class string e.g. ```\"f2 db di-ns f3-m f4-l\"``` I think it's a\nlot nicer to have properties automatically grouped together. You also aren't\ndealing with repetitive name spacing in the class names e.g ```f6 f4-ns f3-l```\nEach f is just indicating it's the font size property. I don't think I'm going\nout on a limb to say that this is ~1000x nicer ```fontSize={[3,4,6]}```\n\nIf the transition to javascript style syntax scares you a bit, I can absolutely\nrelate. I am very limited in my javascript ability and this project is partly a\nreflection of all the stuff I wish I had setup 2 years ago when I first started\nto almost explicitly work in codebases that used a css-in-js solution for\nstyling. If you know html and css - I hope this serves as a gateway to play with \nreact and css-in-js a bit. It's currently my favorite way to use Tachyons.\n\n## Reference \n\n- https://styled-system.com\n- https://styled-system.com/table\n- https://emotion.sh\n- https://github.com/facebook/create-react-app\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachyons-css%2Ftachyons-styled-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftachyons-css%2Ftachyons-styled-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftachyons-css%2Ftachyons-styled-react/lists"}