Tailwind Resources Logo Tailwind Resources
Emberconf2020 Tailwind Css Best Practices screenshot

Emberconf2020 Tailwind Css Best Practices

Author Avatar Theme by Embermap
Updated: 20 Apr 2020
177 Stars

Tailwind CSS Tips, Tricks & Best Practices

Github Live Preview

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.

Installation:

  1. Install Tailwind CSS IntelliSense for VS Code:
ext install eamodio.tslint
  1. Install Headwind for VS Code:
ext install me.riehle.emoji-style
  1. For the training app:
    • Clone the repository from the given directory.
    • Run the application locally using the preferred method.

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.