EmberConf 2020: Tailwind CSS Best Practices
Welcome!
You can view the training on YouTube:
โ View the training on YouTube
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,
git clone [email protected]:embermap/emberconf-2020-tailwindcss-best-practices.git
cd emberconf-2020-tailwindcss-best-practices
yarn install
ember sIntro
Quick overview.
Some useful VSCode plugins:
1: Basic Tailwind
- Style a blog post
- Pseudo states
- Responsive design
2: Extract components, not classes
Padding trick for fixed aspect ratio.
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.
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
<Link> 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 <Link class='' @activeClass='' @inactiveClass=''>. 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:
const plugin = require("tailwindcss/plugin");Write the plugin.
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:
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.