Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/embermap/emberconf2020-tailwind-css-best-practices
Tailwind CSS Tips, Tricks & Best Practices
https://github.com/embermap/emberconf2020-tailwind-css-best-practices
Last synced: 20 days ago
JSON representation
Tailwind CSS Tips, Tricks & Best Practices
- Host: GitHub
- URL: https://github.com/embermap/emberconf2020-tailwind-css-best-practices
- Owner: embermap
- Created: 2020-03-27T21:48:00.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2022-12-12T07:51:06.000Z (almost 2 years ago)
- Last Synced: 2024-08-01T06:22:11.466Z (4 months ago)
- Language: HTML
- Homepage: https://www.youtube.com/watch?v=eTdYzNMPn1o
- Size: 1.4 MB
- Stars: 172
- Watchers: 6
- Forks: 42
- Open Issues: 27
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- tailwindcss-awesome - embermap/emberconf2020-tailwind-css-best-practices - Tailwind CSS Tips, Tricks & Best Practices <br/> (29 stars / 2020-04-20 / 20 commits ) (Running the update / By Popularity)
README
# EmberConf 2020: Tailwind CSS Best Practices
Welcome!
You can view the training on YouTube:
[→ View the training on YouTube](https://www.youtube.com/watch?v=eTdYzNMPn1o)
Follow along using the instructions below.
## Getting help
If you have any questions,
- DM us (@samselikoff or @ryanto) in the Ember Community Discord
- Email us at [email protected]
## Running the training app on your computer
From a directory,
```sh
git clone [email protected]:embermap/emberconf-2020-tailwindcss-best-practices.git
cd emberconf-2020-tailwindcss-best-practices
yarn install
ember s
```
## Intro
Quick overview.
Some useful VSCode plugins:
- [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [Headwind for VS Code](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)
## 1: Basic Tailwind
- Style a blog post
- Pseudo states
- Responsive design
## 2: Extract components, not classes
Padding trick for fixed aspect ratio.
```hbs
```
How to think about abstracting + sharing? Might reach for @apply.
Problem 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.
Instead, use components.
```hbs
![]()
```
This 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.
## 3: Tailwind-friendly Component APIs
`` takes activeClass arg. Let's make it work.
Our styles are stomping each other. We need to think of an API that's Tailwind-friendly.
What we really want is ``. Let's make it work.
## 4: Layout with Flexbox
Old school button group here. Buttons are foated left, parent is inline-block. How to center?
Use text-center.
This is weird - we're using `text-align: center` to lay out a component?
With 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.
[ **Exercise**: Once you have it using flexbox, copy + paste the button group so there are two. Play with the justify-* classes on the parent. ]
## 5: Exercise: Practice Layout with Flexbox
Match 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.
## 6: More layout - measured text
Try to encapsulate the measured text in a component. Notice how you can lay it out with flexbox.
## 7: Layout with Grid
Build with flexbox first. Then refactor to grid.
Grid is amazing. Gap is amazing.
## 8: Exercise: Practice with Grid
## 9: Working with SVG
Copy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.
## 10: Exercise: Practice with SVG
Copy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.
## 11: Form styling library
Forms by default aren't very "utility-friendly". There's also lots of inconsistencies across browsers.
The Custom forms plugin smoothes these out. Let's see how it works.
- https://github.com/tailwindcss/custom-forms
- Make sure you have autoprefixer
## 12: Writing a plugin for focus-visible
Polyfill: https://github.com/WICG/focus-visible
Download & import the polyfill
Impot `plugin` from Tailwind:
```js
const plugin = require("tailwindcss/plugin");
```
Write the plugin.
```js
plugin(function({ addVariant, e }) {
addVariant("focus-visible", ({ modifySelectors, separator }) => {
modifySelectors(({ className }) => {
return `.${e(
`focus-visible${separator}${className}`
)}[data-focus-visible-added]`;
});
});
});
```
Add the `focus-visible` variant to the relevant plugins:
```js
variants: {
borderColor: ["responsive", "hover", "focus", "focus-visible"],
boxShadow: ["responsive", "hover", "focus", "focus-visible"],
zIndex: ["responsive", "focus", "focus-visible"]
},
```
## 13: Responsive designs for very different layouts
Finishing off with a hard lesson learned.
First, if a layout is very different between two breakpoints, just split it up.
Avoid JS device viewport width. Use CSS media queries. Robust to SSR.
## Resources
- [Tailwind CSS](https://tailwindcss.com/)
- [Tailwind CSS IntelliSense for VS Code](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss)
- [Headwind for VS Code](https://marketplace.visualstudio.com/items?itemName=heybourn.headwind)
- [Tailwind Custom forms plugin](https://github.com/tailwindcss/custom-forms)
- [Heroicons: Free SVG icons](https://heroicons.dev/)
- [Focus-visible polyfill](https://github.com/WICG/focus-visible)
- [Tailwind UI](https://tailwindui.com)