Styles

Qwik does not enforce a specific styling approach, you can style your Qwik app using any method you prefer, such as CSS, CSS-in-JS, CSS modules...

CSS Modules

Qwik supports CSS Modules out of the box thanks to Vite.

To use CSS modules, simply create a .module.css file. For example, MyComponent.module.css and import it in your component.

.container {
  background-color: red;
}

Then, import the CSS module in your component.

import { component$ } from '@qwik.dev/core';
import styles from './MyComponent.module.css';
 
export default component$(() => {
  return <div class={styles.container}>Hello world</div>;
});

Remember that Qwik uses class instead of className for CSS classes.

Qwik also accepts arrays, objects, or a combination of them to assign multiple classes:

import { component$ } from '@qwik.dev/core';
import styles from './MyComponent.module.css';
 
export default component$((props) => {
  // Array syntax example
  return <div class={[
    styles.container, 
    'p-8', 
    props.isHighAttention ? 'text-green-500' : 'text-slate-500',
    { active: