{"id":19237179,"url":"https://github.com/epicweb-dev/pixel-perfect-tailwind","last_synced_at":"2025-04-05T00:04:58.424Z","repository":{"id":206875681,"uuid":"715895307","full_name":"epicweb-dev/pixel-perfect-tailwind","owner":"epicweb-dev","description":"Become a better UI designer with Tailwind — intentionally or accidentally","archived":false,"fork":false,"pushed_at":"2025-03-06T22:04:11.000Z","size":11089,"stargazers_count":158,"open_issues_count":5,"forks_count":35,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-28T23:02:51.924Z","etag":null,"topics":["epicweb-dev","tailwind","workshop"],"latest_commit_sha":null,"homepage":"https://pixel-perfect-tailwind.epicweb.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/epicweb-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","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-11-08T03:33:30.000Z","updated_at":"2025-03-11T09:30:13.000Z","dependencies_parsed_at":"2025-02-09T12:20:56.439Z","dependency_job_id":null,"html_url":"https://github.com/epicweb-dev/pixel-perfect-tailwind","commit_stats":null,"previous_names":["epicweb-dev/unleash-the-designer-in-you","epicweb-dev/pixel-perfect-tailwind"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicweb-dev%2Fpixel-perfect-tailwind","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicweb-dev%2Fpixel-perfect-tailwind/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicweb-dev%2Fpixel-perfect-tailwind/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/epicweb-dev%2Fpixel-perfect-tailwind/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/epicweb-dev","download_url":"https://codeload.github.com/epicweb-dev/pixel-perfect-tailwind/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247266563,"owners_count":20910836,"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":["epicweb-dev","tailwind","workshop"],"created_at":"2024-11-09T16:25:11.465Z","updated_at":"2025-04-05T00:04:58.392Z","avatar_url":"https://github.com/epicweb-dev.png","language":"TypeScript","readme":"# [Pixel Perfect Tailwind](https://www.epicweb.dev/workshops)\n\nBecome a better UI designer with Tailwind — intentionally or accidentally\n\nYou’re a developer tasked with converting visual designs to HTML and CSS.\n\nYou’re a confident developer already familiar with Tailwind CSS, but you don’t\nnecessarily perceive yourself as having a “good eye for design”.\n\nYou want to improve the quality and fidelity of your design implementations —\ngetting as close as possible to “pixel perfect” conversions.\n\nIf you see yourself in this description… this workshop is definitely for you!\n\n---\n\n\u003cdiv align=\"center\"\u003e\n  \u003ca\n    alt=\"Epic Web logo with the words Deployed Version\"\n    href=\"https://epicweb-dev-pixel-perfect-tailwind.fly.dev/\"\n  \u003e\n    \u003cimg\n      width=\"300px\"\n      src=\"https://github-production-user-asset-6210df.s3.amazonaws.com/1500684/254000390-447a3559-e7b9-4918-947a-1b326d239771.png\"\n    /\u003e\n  \u003c/a\u003e\n\u003c/div\u003e\n\n\u003chr /\u003e\n\n\u003c!-- prettier-ignore-start --\u003e\n[![Build Status][build-badge]][build]\n[![GPL 3.0 License][license-badge]][license]\n[![Code of Conduct][coc-badge]][coc]\n\u003c!-- prettier-ignore-end --\u003e\n\n## Prerequisites\n\n### Some experience with Tailwind CSS\n\nThis workshop is intended for developers who are already familiar with Tailwind\nCSS.\n\nIf you’re not, great free resources to quickly up-skill are the official\n[Tailwind docs](https://tailwindcss.com) and\n[YouTube channel](https://youtube.com/tailwindlabs). The\n[From Zero to Production](https://www.youtube.com/playlist?list=PL5f_mz_zU5eXWYDXHUDOLBE0scnuJofO0)\nvideo series in particular is a great introduction to Tailwind, even if designed\nfor Tailwind v2.\n\n#### Some experience with JavaScript\n\nBasic familiarity with\n[JavaScript](https://kentcdodds.com/blog/javascript-to-know-for-react) and\n[React](https://egghead.io/courses/the-beginner-s-guide-to-react) is also\nbeneficial, since we’ll be using a React + Vite app to build our UI.\n\nAgain, not critical as the workshops stays firmly focused on CSS.\n\n## System Requirements\n\n- [git][git] v2.18 or greater\n- [NodeJS][node] v18 or greater\n- [npm][npm] v8 or greater\n\nAll of these must be available in your `PATH`. To verify things are set up\nproperly, you can run this:\n\n```shell\ngit --version\nnode --version\nnpm --version\n```\n\nIf you have trouble with any of these, learn more about the PATH environment\nvariable and how to fix it here for [windows][win-path] or\n[mac/linux][mac-path].\n\n## A Figma account\n\nWe'll be implementing a design from a Figma file, and it's critical to have the\nability to \"inspect\" the design in Figma.\n\n[Link to the the Figma file](https://www.figma.com/file/P7JAJ2NX6SOw72iTa8eyjl/Pixel-Perfect-Tailwind?type=design\u0026node-id=0%3A1\u0026mode=design\u0026t=WVR4uy4alsTwrVTc-1)\n\nWithout an account, you can only \"see\" the design, but not get any measurements\nand info when hovering over layers.\n\nCreate a free account, and make sure you can see the side panel and click on\nthings to inspect them.\n\n## Setup\n\nThis is a pretty large project (it's actually many apps in one) so it can take\nseveral minutes to get everything set up the first time. Please have a strong\nnetwork connection before running the setup and grab a snack.\n\n\u003e **Warning**: This repo is _very_ large. Make sure you have a good internet\n\u003e connection before you start the setup process. The instructions below use\n\u003e `--depth` to limit the amount you download, but if you have a slow connection,\n\u003e or you pay for bandwidth, you may want to find a place with a better\n\u003e connection.\n\nFollow these steps to get this set up:\n\n```sh nonumber\ngit clone --depth 1 https://github.com/epicweb-dev/pixel-perfect-tailwind.git\ncd pixel-perfect-tailwind\nnpm run setup\n```\n\nIf you experience errors here, please open [an issue][issue] with as many\ndetails as you can offer.\n\n## Exercises\n\nYou'll find all the exercises in the `exercises` directory. The structure of the\nworkshop apps is described below, but most of the time you should be able to\nsimply run the app and navigate around the different exercises using the\napplication (there are even buttons to open the right exercise file right in\nyour editor).\n\nThe purpose of the exercise is **not** for you to work through all the material.\nIt's intended to get your brain thinking about the right questions to ask me as\n_I_ walk through the material.\n\n## Launching your editor\n\nThe application has several buttons which will launch your editor to the right\nfile. There are a lot of files in this workshop so you'll be using this feature\na lot to get to the right place at the right time.\n\nThis should just work™️ (it looks at your currently running processes and\nchooses the editor based on that). If it doesn't guess correctly, create a\n`.env` file in the root of this project and add an environment variable called\n`EPICSHOP_EDITOR` with the value being set to the path to your editor's\nexecutable. For example, if you're using VS Code on Windows, you'd add this to\nyour `.env` file:\n\n```\nEPICSHOP_EDITOR='\"C:\\Program Files\\Microsoft VS Code\\bin\\code.cmd\"'\n```\n\nMake certain that if the path includes spaces that you wrap the path in quotes\nas above (note the use of single quotes wrapping the double quotes!).\n\nThe value of `EPICSHOP_EDITOR` should be the command that you would run in your\nterminal to open your editor from the command line. This means, the first thing\nshould be the path to the executable for your editor (or the command if you have\none in your `PATH`). So you may be able to get away with doing something as\nsimple as this:\n\n```\nEPICSHOP_EDITOR=code\n```\n\n## Exercises\n\n- `exercises/*.*/README.md`: Exercise background information\n- `exercises/*.*/*.problem.*/README.*.md`: Problem Instructions\n- `exercises/*.*/*.problem.*/*.tsx`: Exercise with Emoji helpers 👈 You spend\n  most of your time here.\n- `exercises/*.*/*.solution.*/*.tsx`: Solved version\n\nThe purpose of the exercise is **not** for you to work through all the material.\nIt's intended to get your brain thinking about the right questions to ask me as\n_I_ walk through the material.\n\n## Helpful Emoji 🐨 🦺 💰 📝 🦉 📜 💣 💪 🏁 👨‍💼 🚨 🧝‍♀️\n\nEach exercise has comments in it to help you get through the exercise. These fun\nemoji characters are here to help you.\n\n- **Kody the Koala** 🐨 will tell you when there's something specific you should\n  do\n- **Lily the Life Jacket** 🦺 will help you with any TypeScript-specific parts\n  of the exercises\n- **Marty the Money Bag** 💰 will give you specific tips (and sometimes code)\n  along the way\n- **Nancy the Notepad** 📝 will encourage you to take notes on what you're\n  learning\n- **Olivia the Owl** 🦉 will give you useful tidbits/best practice notes\n- **Dominic the Document** 📜 will give you links to useful documentation\n- **Barry the Bomb** 💣 will be hanging around anywhere you need to blow stuff\n  up (delete code)\n- **Matthew the Muscle** 💪 will indicate that you're working with an exercise\n- **Chuck the Checkered Flag** 🏁 will indicate that you're working with a final\n- **Peter the Product Manager** 👨‍💼 helps us know what our users want\n- **Alfred the Alert** 🚨 will occasionally show up in the test failures with\n  potential explanations for why the tests are failing\n- **Kellie the Co-worker** 🧝‍♀️ your co-worker who sometimes does work ahead of\n  your exercises\n\n## Workshop Feedback\n\nEach exercise has an Elaboration and Feedback link. Please fill that out after\nthe exercise and instruction.\n\nAt the end of the workshop, please go to this URL to give overall feedback.\nThank you!\n\n\u003c!-- prettier-ignore-start --\u003e\n[npm]: https://www.npmjs.com/\n[node]: https://nodejs.org\n[git]: https://git-scm.com/\n[build-badge]: https://img.shields.io/github/actions/workflow/status/epicweb-dev/pixel-perfect-tailwind/validate.yml?branch=main\u0026logo=github\u0026style=flat-square\n[build]: https://github.com/epicweb-dev/pixel-perfect-tailwind/actions?query=workflow%3Avalidate\n[license-badge]: https://img.shields.io/badge/license-GPL%203.0%20License-blue.svg?style=flat-square\n[license]: https://github.com/epicweb-dev/pixel-perfect-tailwind/blob/main/LICENSE\n[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square\n[coc]: https://kentcdodds.com/conduct\n[win-path]: https://www.howtogeek.com/118594/how-to-edit-your-system-path-for-easy-command-line-access/\n[mac-path]: http://stackoverflow.com/a/24322978/971592\n[issue]: https://github.com/epicweb-dev/pixel-perfect-tailwind/issues/new\n\u003c!-- prettier-ignore-end --\u003e\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepicweb-dev%2Fpixel-perfect-tailwind","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fepicweb-dev%2Fpixel-perfect-tailwind","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fepicweb-dev%2Fpixel-perfect-tailwind/lists"}