{"id":13449774,"url":"https://github.com/embermap/emberconf2020-tailwind-css-best-practices","last_synced_at":"2025-03-22T22:33:48.964Z","repository":{"id":43649671,"uuid":"250655241","full_name":"embermap/emberconf2020-tailwind-css-best-practices","owner":"embermap","description":"Tailwind CSS Tips, Tricks \u0026 Best Practices","archived":false,"fork":false,"pushed_at":"2022-12-12T07:51:06.000Z","size":1467,"stargazers_count":174,"open_issues_count":27,"forks_count":43,"subscribers_count":6,"default_branch":"master","last_synced_at":"2024-10-28T16:45:25.136Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://www.youtube.com/watch?v=eTdYzNMPn1o","language":"HTML","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/embermap.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":"2020-03-27T21:48:00.000Z","updated_at":"2024-10-11T09:54:12.000Z","dependencies_parsed_at":"2023-01-27T16:00:40.391Z","dependency_job_id":null,"html_url":"https://github.com/embermap/emberconf2020-tailwind-css-best-practices","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/embermap%2Femberconf2020-tailwind-css-best-practices","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/embermap%2Femberconf2020-tailwind-css-best-practices/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/embermap%2Femberconf2020-tailwind-css-best-practices/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/embermap%2Femberconf2020-tailwind-css-best-practices/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/embermap","download_url":"https://codeload.github.com/embermap/emberconf2020-tailwind-css-best-practices/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245029305,"owners_count":20549684,"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-07-31T06:00:55.810Z","updated_at":"2025-03-22T22:33:48.368Z","avatar_url":"https://github.com/embermap.png","language":"HTML","funding_links":[],"categories":["Running the update"],"sub_categories":["By Popularity"],"readme":"# EmberConf 2020: Tailwind CSS Best Practices\n\nWelcome!\n\nYou can view the training on YouTube:\n\n[→ View the training on YouTube](https://www.youtube.com/watch?v=eTdYzNMPn1o)\n\nFollow along using the instructions below.\n\n## Getting help\n\nIf you have any questions,\n\n- DM us (@samselikoff or @ryanto) in the Ember Community Discord\n- Email us at hello@embermap.com\n\n## Running the training app on your computer\n\nFrom a directory,\n\n```sh\ngit clone git@github.com:embermap/emberconf-2020-tailwindcss-best-practices.git\ncd emberconf-2020-tailwindcss-best-practices\nyarn install\nember s\n```\n\n## Intro\n\nQuick overview.\n\nSome useful VSCode plugins:\n\n- [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)\n- [Headwind for VS Code](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)\n\n## 1: Basic Tailwind\n\n- Style a blog post\n- Pseudo states\n- Responsive design\n\n## 2: Extract components, not classes\n\nPadding trick for fixed aspect ratio.\n\n```hbs\n\u003cdiv class=\"relative bg-red-500 pb-2/3\"\u003e\n  \u003cimg\n    class=\"absolute object-cover w-full h-full\"\n    src=\"https://source.unsplash.com/_Dogn_h7Qek\"\n  /\u003e\n\u003c/div\u003e\n```\n\nHow to think about abstracting + sharing? Might reach for @apply.\n\nProblem is, you still have to duplicate html structure. You need a wrapper + a child. Another problem is that you have to go to the css file and break html-first workflow.\n\nInstead, use components.\n\n```hbs\n\u003cAspectRatio @ratio='16:9'\u003e\n  \u003cimg\u003e\n\u003c/AspectRatio\u003e\n```\n\nThis is going to be a theme of this training. Components like this keep us in the html. That should be a goal with the abstractions you make: html-first workflow. Keeps you productive.\n\n## 3: Tailwind-friendly Component APIs\n\n`\u003cLink\u003e` takes activeClass arg. Let's make it work.\n\nOur styles are stomping each other. We need to think of an API that's Tailwind-friendly.\n\nWhat we really want is `\u003cLink class='' @activeClass='' @inactiveClass=''\u003e`. Let's make it work.\n\n## 4: Layout with Flexbox\n\nOld school button group here. Buttons are foated left, parent is inline-block. How to center?\n\nUse text-center.\n\nThis is weird - we're using `text-align: center` to lay out a component?\n\nWith Tailwind + modern css you'll get very familiar with flexbox. Its great because it works in many more contexts and you usually don't need to worry about whether the child you're laying out is block or inline. The layout is kept more separate from the thing you're laying out. Also floats are super weird. Also the height of our group is different from the buttons – because of line-height. Again, inline elements are kinda weird.\n\n[ **Exercise**: Once you have it using flexbox, copy + paste the button group so there are two. Play with the justify-* classes on the parent. ]\n\n## 5: Exercise: Practice Layout with Flexbox\n\nMatch the layout on the right. Notice the behavior if you shrink the viewport. You'll need to look up the \"Flex Shrink\" utilities on tailwindcss.com.\n\n## 6: More layout - measured text\n\nTry to encapsulate the measured text in a component. Notice how you can lay it out with flexbox.\n\n## 7: Layout with Grid\n\nBuild with flexbox first. Then refactor to grid.\n\nGrid is amazing. Gap is amazing.\n\n## 8: Exercise: Practice with Grid\n\n## 9: Working with SVG\n\nCopy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.\n\n## 10: Exercise: Practice with SVG\n\nCopy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.\n\n## 11: Form styling library\n\nForms by default aren't very \"utility-friendly\". There's also lots of inconsistencies across browsers.\n\nThe Custom forms plugin smoothes these out. Let's see how it works.\n\n- https://github.com/tailwindcss/custom-forms\n- Make sure you have autoprefixer\n\n## 12: Writing a plugin for focus-visible\n\nPolyfill: https://github.com/WICG/focus-visible\n\nDownload \u0026 import the polyfill\n\nImpot `plugin` from Tailwind:\n\n```js\nconst plugin = require(\"tailwindcss/plugin\");\n```\n\nWrite the plugin.\n\n```js\nplugin(function({ addVariant, e }) {\n  addVariant(\"focus-visible\", ({ modifySelectors, separator }) =\u003e {\n    modifySelectors(({ className }) =\u003e {\n      return `.${e(\n        `focus-visible${separator}${className}`\n      )}[data-focus-visible-added]`;\n    });\n  });\n});\n```\n\nAdd the `focus-visible` variant to the relevant plugins:\n\n```js\nvariants: {\n  borderColor: [\"responsive\", \"hover\", \"focus\", \"focus-visible\"],\n  boxShadow: [\"responsive\", \"hover\", \"focus\", \"focus-visible\"],\n  zIndex: [\"responsive\", \"focus\", \"focus-visible\"]\n},\n```\n\n## 13: Responsive designs for very different layouts\n\nFinishing off with a hard lesson learned.\n\nFirst, if a layout is very different between two breakpoints, just split it up.\n\nAvoid JS device viewport width. Use CSS media queries. Robust to SSR.\n\n## Resources\n\n- [Tailwind CSS](https://tailwindcss.com/)\n- [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)\n- [Headwind for VS Code](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)\n- [Tailwind Custom forms plugin](https://github.com/tailwindcss/custom-forms)\n- [Heroicons: Free SVG icons](https://heroicons.dev/)\n- [Focus-visible polyfill](https://github.com/WICG/focus-visible)\n- [Tailwind UI](https://tailwindui.com)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembermap%2Femberconf2020-tailwind-css-best-practices","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fembermap%2Femberconf2020-tailwind-css-best-practices","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fembermap%2Femberconf2020-tailwind-css-best-practices/lists"}