Welcome!

You can view the training on YouTube:

→ View the training on YouTube

Follow along using the instructions below.

If you have any questions,

• DM us (@samselikoff or @ryanto) in the Ember Community Discord
• Email us at [email protected]

From a directory,

git clone [email protected]:embermap/emberconf-2020-tailwindcss-best-practices.git
cd emberconf-2020-tailwindcss-best-practices
yarn install
ember s

Quick overview.

Some useful VSCode plugins:

• Tailwind CSS IntelliSense for VS Code
• Headwind for VS Code

• Style a blog post
• Pseudo states
• Responsive design

Padding trick for fixed aspect ratio.

<div class="relative bg-red-500 pb-2/3">
  <img
    class="absolute object-cover w-full h-full"
    src="https://source.unsplash.com/_Dogn_h7Qek"
  />
</div>

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.

<AspectRatio @ratio='16:9'>
  <img>
</AspectRatio>

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.

<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.

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. ]

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.

Try to encapsulate the measured text in a component. Notice how you can lay it out with flexbox.

Build with flexbox first. Then refactor to grid.

Grid is amazing. Gap is amazing.

Copy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.

Copy svgs in, get rid of hard-coded widths and heights. Set fill or stroke to currentColor.

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

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"]
},

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.

• Tailwind CSS
• Tailwind CSS IntelliSense for VS Code
• Headwind for VS Code
• Tailwind Custom forms plugin
• Heroicons: Free SVG icons
• Focus-visible polyfill
• Tailwind UI