CSS Styling
2026 Edition

Currently, your homepage has the default style of Qwik. In this chapter, you will learn how to customize the style of your Qwik application in various ways.

🌍 Global styles

If you look inside the /src folder, you'll see a file called global.css. You can use this file to add CSS rules to all the routes in your application - such as CSS reset rules, site-wide styles for HTML elements like links, and more.

By default, global.css is imported in /src/root.tsx, which makes it available across your entire application.

Although you could technically import global.css inside individual components, it is considered best practice to keep global styles at the root level.

🎨 Adding Tailwind CSS

An easy way to style your Qwik application is by using Tailwind CSS. It is a utility-first CSS framework that helps you build modern designs without ever leaving your HTML.

First, we're going to modify the content of oursrc/routes/index.tsx file.

The page already uses Tailwind utility classes. However, since Tailwind is not installed yet, these styles are not applied.

For now, if you run your application, you will see:

You will notice that the styles are not applied. This is normal because Tailwind CSS is not yet installed.🃏

To add Tailwind CSS to your application, it's very simple, in the terminal execute the following command:

The previous command updates your app with the necessary dependencies.

The command updates your project configuration and installs the required dependencies.

It will:

• Update package.json
• Modify src/global.css
• Update vite.config.ts
• Create prettier.config.js

It also updates your src/global.css file to include the Tailwind CSS entry point:

Now, if you run your application, you should see the Tailwind CSS styles applied to your home page.🏆

Congratulations! You have learned how to add Tailwind CSS to your Qwik application.🎉

Tailwind

Tailwind is a CSS framework that speeds up the development process by allowing you to quickly write utility classes directly in your TSX markup.

In Tailwind, you style elements by adding class names. For example, adding the class "text-blue-500" will turn the <h1> text blue:

Although the CSS styles are shared globally, each class is singularly applied to each element. This means if you add or delete an element, you don't have to worry about maintaining separate stylesheets, style collisions, or the size of your CSS bundle growing as your application scales.

Don't worry if this is your first time using Tailwind. To save time, we've already styled all the components you'll be using.

Let's play with Tailwind! Copy the code below and paste it above the <p> element in src/routes/index.tsx:

If you prefer writing traditional CSS rules or keeping your styles separate from your JSX - CSS Modules are a great alternative.

🧱 CSS Modules

CSS Modules allow you to scope CSS to a component by automatically creating unique class names, so you don't have to worry about style collisions.

We'll continue using Tailwind in this course, but let's take a moment to see how you can achieve the same results from the quiz above using CSS modules.

Inside /src/routes, create a new file called home.module.css and add the following CSS rules:

Then, inside your /src/routes/index.tsx file import the styles and replace the Tailwind class names from the <div> you've added with styles.shape:

Save your changes and preview them in the browser. You should see the same shape as before.

Tailwind and CSS Modules are two common ways of styling Qwik applications. Whether you use one or the other is a matter of preference, you can even use both in the same application!

Don't forget that Qwik uses class instead of className for CSS classes.

Other styling solutions

In addition to the approaches we've discussed, you can also style your Qwik application with many other solutions, such as:

• CSS-in-JS
• Styled-components
• Scoped CSS
• :global() selector
• useStyles$()
• CSS Preprocessors

Congratulations, you have learned how to style your Qwik application using Tailwind CSS and CSS Modules!🎊

Source code

You can find the source code for chapter 2 2026 edition on GitHub.