kata-04.md

Qwik Kata 4 - Styling

The purpose of this kata is to show how to style your Qwik application. The kata assumes you have already completed kata 3.

Learning aims

The idea here is to learn the following:

• How to use scoped styles
• How to integrate Tailwind
• How to use styled-vanilla-extract
• Understand why many of the css-in-js solutions are not a good fit for Qwik and why these are
• Understand the differences between the approaches

Task

Complete the following:

1. Style the Inventory component using scoped styles. Hint: Look up useStylesScoped$.
2. Style the Inventory component using Tailwind
3. Optional - Style the Inventory component using styled-vanilla-extract

Navigation

• Previous kata
• Next kata