Skip to content

Commit

Permalink
docs: styling page update
Browse files Browse the repository at this point in the history
added info mentioned on QwikDev#2124
  • Loading branch information
zanettin committed Nov 14, 2022
1 parent 1b3059e commit 7aef7cb
Showing 1 changed file with 5 additions and 5 deletions.
10 changes: 5 additions & 5 deletions packages/docs/src/routes/docs/components/styles/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import './global.css'
```

## Inline critical styles
To reduce the blocking time of the first paint, Qwik can inline the critical styles for the current view. This means that the browser will not need to download the styles for the current view. To tell Qwik to inline styles, just add the `?inline` query parameter to the import.
To reduce the blocking time of the first paint, Vite can [inline the critical styles](https://vitejs.dev/guide/features.html#disabling-css-injection-into-the-page) for the current view. This means that the browser will not need to download any referenced `*.css` files separately. To tell Vite to inline styles, just add the `?inline` query parameter to the import.

```tsx
import from './my-component.css?inline'
Expand Down Expand Up @@ -71,11 +71,11 @@ export const CmpStyles = component$(() => {
## `useStylesScope$`
In previous sections, we have discussed how styles can be loaded lazily as they are needed using the `useStyles$()` hook.
Browser styles are global and apply to all DOM elements, for this reason, Qwik also provides a way to load styles that are specific to a specific component.
This is achieved by generating a unique class for each component and then inserting that unique class id into the stylesheet.
This is achieved by generating a unique class for each component and then inserting that unique class id into the stylesheet. Please note that you need to add `?inline` to your styles import.

```tsx
import {useStylesScoped$} from '@builder.io/qwik';
import styles from './code-block.css';
import styles from './code-block.css?inline';

export const CmpStyles = component$(() => {
useStylesScoped$(styles);
Expand All @@ -91,8 +91,8 @@ export const CmpStyles = component$(() => {
```

## Preprocessors
### SASS / SCSS
Qwik works nicely with SCSS and SASS without any additional installs. Make sure that your files have the `.scss` or `.sass` extension.
### `.scss`, `.sass`, `.less`, `.styl`, `.stylus`
Vite works nicely with many preprocessors. Just make sure, that you install the required [plugins](https://vitejs.dev/guide/features.html#css-pre-processors).

### Tailwind
To use Tailwind on your app, follow these [instructions](../../../qwikcity/integrations/tailwind).

0 comments on commit 7aef7cb

Please sign in to comment.