Emberconf2020 Tailwind Css Best Practices

Overview:

The EmberConf 2020 video training on Tailwind CSS Best Practices covers various topics such as styling a blog post, extracting components, Tailwind-friendly component APIs, layout with flexbox, working with SVG, and form styling libraries. The training emphasizes using components to maintain an HTML-first workflow and explores modern CSS techniques like flexbox and grid for layout design.

Features:

• Basic Tailwind: Style a blog post, implement pseudo states, and work on responsive design.
• Extract Components: Use padding tricks for fixed aspect ratios, explore abstraction and sharing using components.
• Tailwind-friendly Component APIs: Implement Tailwind-friendly APIs for components like links.
• Layout with Flexbox: Learn to use flexbox for layout design, including centering elements and handling multiple buttons.
• Practice Layout with Flexbox: Engage in exercises to practice layout designs using flexbox.
• Layout with Grid: Build layouts using flexbox and then refactor them using grid for more advanced designs.
• Working with SVG: Import SVGs, remove hard-coded dimensions, and use currentColor for fills or strokes.
• Form styling library: Explore the Custom forms plugin to enhance utility and consistency in form styling.

Summary:

The EmberConf 2020 training video on Tailwind CSS Best Practices offers valuable insights into practical implementations using Tailwind CSS for web development. From basic styling to advanced layout techniques, the training covers a range of topics with a focus on maintaining an HTML-first workflow and utilizing modern CSS features like flexbox and grid for efficient design. Additionally, the training introduces tools like Tailwind-friendly component APIs and form styling libraries to enhance the developer experience and the quality of the end product.