CSS Styling

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.

You can import global.css in any component in your application, but it's usually good practice to add it to your top-level component.

When you deploy Qwik application, the global.css file is automatically included into the file /src/root.tsx (more on this later)

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.

In this file, the Tailwind style has already been added for you, so don't worry if this is your first time using Tailwind. To save time, we have already styled all the components you will use.

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.

It also adds new files to your project folder:

• postcss.config.js
• tailwind.config.js
• .vscode/settings.json

and modifies your src/global.css to include

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 as well.

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 the two most 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

Icons

Icons are an important part of any application. There are already more than 180.000 icons you can add to your Qwik app.

qwikest/icons

This package allows for a streamlined way to add icons to your Qwik app from a variety of icon sets.

• Bs: Bootstrap Icons
• Go: Octicons by GitHub
• Hi: Heroicons by Tailwind
• In: Iconoir
• Io: Ionicons by Ionic
• Lu: Lucide [superset of feather icons]
• Mo: Mono Icons
• Si: Simple Icons [icons for popular brands]
• Tb: Tabler Icons

To add @qwikest/icons package to your application, it's very simple, in the terminal execute the following command:

Important: To work correctly, you must install the @qwikest/icons package in the devDependencies.

For your project, you can use the icons from the Heroicons set.

Heroicons

You can find all the icons available in the Heroicons set on the Heroicons website.

To use an icon, you need to import it from the @qwikest/icons/heroicons package and add it to your component.

The import name of the icon is composed as follows : { Icon set identifier + Icon name in camel case + Style }.

For example, to import the arrow-right icon from the Heroicons set, you need to import it as follows:

Let's add an icon to the login button, in the src/routes/index.tsx file, decomment this lines:

Now, if you run your application, you should see the login button with the arrow icon.🏹

Other ways to add icons

You can directly use the SVG icons from the Heroicons website. To do this, you don't need to install the @qwikest/icons package. Go to the Heroicons website, select icon want to use, and click to copy the SVG code.

In your application create a new file called assets/svg/HiArrowRightOutline.tsx into the src folder and paste following code:

Paste the SVG code you copied from the Heroicons website into the HiArrowRightOutline component.

Lastly, change the import HiArrowRightOutline into the src/routes/index.tsx file:

If you run your application, You can see that the icon arrow is still present.🏹

⚠️ If you're an observer, you will notice that the icon is bigger than the previous one.
The advantage of using the SVG icons is that you can easily customize the style of the icon.

Into the HiArrowRightOutline component, you can change the class attribute of the svg tag to customize the style of the icon.

You can also add the props to the component to customize the icon.

And into the src/routes/index.tsx file, you can add the props to the HiArrowRightOutline component:

If you run your application, you will see that the icon is back to its original size.🏹

Congratulations, you have learned how to add icons to your Qwik application.🎉

Source code

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