Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

docs: styling page updates #2129

Merged
merged 4 commits into from
Nov 14, 2022
Merged

docs: styling page updates #2129

Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2745293
docs: styling page updates
zanettin Nov 14, 2022
d16778c
typo
zanettin Nov 14, 2022
928df8f
tmp
zanettin Nov 14, 2022
7286055
revert
zanettin Nov 14, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
8 changes: 4 additions & 4 deletions packages/docs/src/routes/docs/components/styles/index.mdx
View file
Open in desktop
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 @@ -53,7 +53,7 @@ Component styles allow Qwik to lazy load the style information for the component

```tsx
import {useStyles$} from '@builder.io/qwik';
import styles from './code-block.css?inline';
zanettin marked this conversation as resolved.
Show resolved Hide resolved
import styles from './code-block.css';

export const CmpStyles = component$(() => {
useStyles$(styles);
Expand Down Expand Up @@ -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).